Examples of Accessible Web Design

The World Wide Web Consortium (W3C) publishes the HTML standards, and sets the procedures for web accessibility in the Web Content Accessibility Guidelines (WCAG). These guidelines provide three tiers of compliance, ranging from basic accessibility to advanced accessibility features (such as audio descriptions of video content for individuals with visual impairments): Level A, AA, and AAA. A reference guide for meeting these criteria is available at: https://www.w3.org/WAI/WCAG20/quickref/ Links to an external site..

Text Alternatives for Non-text Items

One of the most basic attributes used for web accessibility is the alt attribute of the img tag. The alt attribute provides a text alternative for images inserted onto a webpage via the img tag. Using the logo of the W3C on this page as an example, the code to add this image to the page is displayed below.

The text alternative for the image in the alt attribute provides users of screen readers with the information conveyed via this image in a text format that can be read aloud to them. Individuals with visual impairments who use screen readers to navigate the web are not the only individuals who benefit from text alternatives; text provided as alternatives can be searched by researchers and search engines, making it easier for everyone to navigate the web.

Media such as video and audio also require text alternatives to make the content accessible for individuals with hearing impairments. Closed Captions are the most common text alternative for video, since they are embedded within the video playback, and are time coded to match the rate of speech in the video. Transcripts are common practice for providing a text alternative to audio-only media on the web. Though transcripts are useful and encouraged to be shared for video, they are not an equitable means of access for video content in lieu of captions. The video in this section demonstrates how to add closed captions to a YouTube video. Transcripts can also be uploaded to the YouTube Video Manager and the automatic speech recognition will synchronize the transcript to the video and create captions. More information on adding captions to YouTube videos can be found at the YouTube Help site Links to an external site..

Document Hierarchy

Many document formats provide a structure upon which your document should be hierarchically organized. The common structure for document types is headings. In HTML, the heading element is noted by use of different heading level tags. Heading level 1 <h1> tags should only have one occurrence in a document. This top heading level should be reserved for the title of the page; on this page, for example, "Examples of Accessible Web Design" is our level 1 heading. The next heading level, <h2>, would be appropriate for the sections of the document, such as the "Text Alternatives for Non-text Items" and "Document Hierarchy" sections of this page. If either of these sections were to have sub-sections, they would have the <h3> tag applied. The use of headings is meant for navigation and is not meant to be stylistic or aesthetically pleasing, so do not use headings out of order based on the aesthetics of how the heading appears. This theory also applies to headings used in Word documents, PDFs, and other text-based document formats that permit structure via the use of headings. The WebAIM article on Semantic Structure Links to an external site. provides more information on proper usage of specific HTML elements, and the article on Creating Accessible Word Documents Links to an external site. has a section on proper usage of headings to provide document structure.

In the next section of the course, we will take a look at a free tool that will help assess the accessibility of a website.