Standards

The Web is an increasingly important resource in many aspects of life (e.g., education, employment, government, commerce, health care, recreation, etc). It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities.

Below is a list of principles summarizing WCAG 2.0 principles and guidelines (as of 2011), with simple implementation guidelines and links on where to find more details.


Web Content Accessible Guidelines 2.0

Each section will detail the current WCAG standards, using correct and incorrect examples where applicable. Included in each section are additional resource sites, including links to codes, corrective methods, and tools where applicable. These guidelines are not a list of HTML “do’s and don’ts”, but rather a list of accommodations that must be made for people with different disabilities.

Standard Definition

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Overview

Providing a text alternative for images, media, and other non-text content is not only one of the first principles of web accessibility, it is also one of the most difficult to monitor and to implement.

Text is always accessible, but images, audio, sound effects, animations, and image maps are not. You must make them accessible by adding text alternatives. To do this requires the developer to take into consideration the various ways users can access your content. For example, visually impaired users can understand an image if the browser reads alternative text aloud. A hearing impaired visitor can understand an audio file if there is a text script that accompanies it. Even animations can be described in text.

This section will cover the basic guidelines to assist web developers and content managers in meeting Section 508 Section A and the Web Content Accessibility Guidelines (WCAG 2.0).

Using the Alternative Text for Images

All non-text content on a web page, such as pictures, charts, illustrations, and multimedia must include a text alternative that describes the content and the function to the visitor. The objectives of alternative text are:

  • To translate all media into a format that can be read by screen readers.
  • To be used in place of the image in the browser if the image is missing or the user has elected not to display images.
  • To provide meaning to the image in relation to the content that surrounds it.

There are two ways to present alternative text in relation to pictures, charts, and illustrations.

  • Developers can use the “alt” attribute in the <img> tag to describe the picture or graphic.
  • The image can be described in the context or surroundings of the image itself.

Notice that in addition to using the “alt” attribute in the HTML code, the image can be described to the users within the content of the text that surrounds it. However, all images must have the “alt” attribute or they are determined to be inaccessible.

Applying the “alt” Attribute Effectively

When determining how to describe an image using the “alt” attribute, determine whether the image represents the content on the page or if it performs a function. Usually an image will only have a function if it is a link, such as a button on a menu or logo at the top of the web page. In some cases, the content on the page that surrounds the image may be sufficient and additional “alt” text would not be required. In these situations, an empty alt attribute can be use (alt=” ”).

The alternative text should be concise, no more than a few words at the most. Avoid redundant or obvious statements such as “an image” or “a picture” as part of the description.

If the image requires a more lengthy description or explanation, provide a text link to a page that contains this information.

NOTE: Though the “longdesc” attribute is referenced in the actual standard, it is no longer supported by any of the major browsers. It was used to specify a URL to a page that contained a long description of the image. It is recommended that now you simply provide a link (that is visible to anyone) to a page with the description.

Code Example 1North Carolina Small Business Center logo

alt=”North Carolina Small Business Center Network (SBCN) logo”>

Code Example 2North Carolina Small Business Center logo
<img src=”sbcnLogo.jpg” alt=”Link to the North Carolina Small Business Center Network (SBCN) web site”><a href=”http://www.sbcn.org”>North Carolina Community College Small Business Center Network</a>

Decorative Images

Some images, such as background pattern or a bullet style do not convey content or perform a function. These types of images do not need to have a description associated with them. Whenever possible, include these images in the cascading style sheet (CSS) to remove them from the content. If this is not possible, use an empty, or null, alt attribute (alt=””). Some pictures on a web page are simply decorative and could be removed without impacting the content on the page. One way to test this is to ask yourself “If I took this picture out what would I need to write in its place?” If nothing, then use the null attribute.

Audio and Visual Recordings

An audio presentation includes not only dialogue but can also include both artificial and natural sounds. The challenge is to create a document that tells the same story to the visitor. Creating a script prior to the recording gives you a good place to start in meeting this requirement. If your podcast includes images, you need to include a description of them in your script. If your podcast includes a video, it should have captions applied to it.

If the web page has a video either embedded or linked, the video must contain captions. Here again, creating a script for your video before you begin recording can help you in this process. Software programs such as Camtasia and MAGpie (Media Access Generator) can help you create captions for your videos. You can also provide a link to the alternative next to the non-text content.

If plugins, such as Shockwave, are loaded using the embed element, the noembed element can be used to redirect your visitors to transcripts or images with alternative text. There are two ways to implement this.

  • The noembed is a child element of the embed element.
  • The noembed is provided right next to the embed element.

Basically, if the embed element is called to load a video and the player is not found, the nonembed takes over and provides a link to a transcript of the file or a still from the movie.

Example of noembed inside an embed

<embed src=”../movies/history_of_rome.mov” height=”60″ width=”144″ autostart=”false”>

<noembed>

<a href=”../transcripts/transcript_history_rome.htm”>Transcript of “The history of Rome”</a>

</noembed>

</embed>

Example of noembed provided beside an embed

<embed src=”moviename.swf” width=”100″ height=”80″ pluginspage=”http://example.com/shockwave/download/” /><noembed> <img alt=”Still from Movie” src=”moviename.gif” width=”100″ height=”80″ /></noembed>;

Resources


Guideline 1.1 details

Standard Definition

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Overview

This requirement states that access to time-based and synchronized media must be provided to all web site visitors. This includes media that is:

  • Audio only
  • Video only
  • Audio-video
  • Audio and/or video combined with interaction

This section will cover the basic guidelines to assist web developers and content managers in meeting Section 508 Section (b) and the Web Content Accessibility Guidelines (WCAG 2.0).

Captions

Captions are the text version of the spoken word in a video or a podcast. They allow the content to be accessible to not only those who are hearing impaired but can also be used who may not be fluent in the language.

Web accessibility guidelines state that captions should be:

  • Synchronized – This means the text content should display at the same time that the audio occurs.
  • Equivalent – The captions equal in meaning that which is spoken in the audio.
  • Accessible – The captions should be available.
google_captions

Figure 1: Example of Captions on a Web Site

Any time multimedia content, either visual or auditory) occurs on the web synchronized and equivalent captions should be provided. This applies not only to audio and video played through multimedia players (Shockwave, Windows Media Player) but also technologies such as Flash or Java when audio is part of the content.
Captions can be either closed or open. Closed captions can be turned on and off while open captions are always visible. Closed captioning on most of the pre-recorded television shows is a requirement in the United States and all television sets with a screen size of 13 inches or more can interpret closed captions. With the popularity of Smart TVs, users are now accessing web programs in additional to traditional programming.

Transcripts

Transcripts allow anyone that cannot interpret the web audio content to read a text transcript instead. Unlike closed captions, they do not have to be verbatim accounts of the spoken word. They contain additional descriptions, explanations, and other editorial comments that could help the user understand what is included in the content. Similar to reading a script from a play, the transcript may include notations indicating laughter or noises that are part of the video or audio.

Both captions and a text transcript should be provided for all web video. If the content is only audio, then you only need to provide the transcript. Transcripts also allow the content of the multimedia to be searchable by both search engines and end users.

Audio Descriptions

Audio descriptions are for users with visual disabilities and they provide additional information about what is on the screen. If web video is created with accessibility in mind from the beginning then audio descriptions are usually not necessary as long as the visual elements in the movie are described. The link below provides an example of an audio description of an advertisement for Universal Studios.

Audio Description in MP3 Format

Resources

Understanding Guideline 1.2 Time-based Media


Guideline 1.2 details

Standard Definition

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Overview

When designing and developing web pages, ensure that all the information is available in a form that can be perceived by all users (e.g., spoken aloud, or presented in a simpler visual layout). If all of the information is available in a form that can be determined by software, then it can be presented to users in different ways. If web content is embedded in a way that the structure and information cannot be programmatically determined by the assistive technology, then it cannot be rendered in other formats as needed by the user.

Guidelines

  • Use appropriate semantic markup whenever possible for HTML documents, including header styles.
  • Use appropriate markup for table headers.
  • Use appropriate markup, including form LABELS, to identify form and application controls.
  • Preserve the visual sequence of content even with disabled styles.
  • Flash objects are implemented so that a screen reader will read them in the appropriate sequence.

Guideline 1.3 details

Standard Definition

Make it easier for users to see and hear content including separating foreground from background.

Overview

While some guidelines are focused on making information available in a form that can be presented in alternate formats, this guideline is concerned with making the default presentation as easy to perceive as possible to people with disabilities. The primary focus is on making it easier for users to separate foreground information from the background. For visual presentations this involves making sure that information presented on top of a background contrasts sufficiently with the background. For audio presentations this involves making sure that foreground sounds are sufficiently louder than the background sounds. Individuals with visual and hearing disabilities have much greater difficulty separating foreground and background information.

Use of Color

Your customers with visual impairment need help when you use color on your website. Making your website accessible to these customers is very easy. The main area to focus on is giving instructions. Saying things like

Guidelines:
Click the green button or Required fields are red is useless to your customers who can’t see green or red. Back these kinds of instructions up with at least one more identifying remark.

Another web accessibility point is to make sure that important graphics are not dependent on color alone. For example, your customers might not understand a pie chart where only color separates the segments. In this case you should add clear labeling and patterns to the segments.

Audio Control

Providing audio control helps your customers focus on the important parts of your website. Avoid sounds that play automatically. This is already considered an outdated technique, and will make browsing your website very difficult for your customers with disabilities that affect their focus.

Guidelines:
When adding audio ensure you add a pause or stop function to any audio that plays automatically. You should go further and ban it from your website. You don’t want your customer frantically searching around your website for the audio control.

Contrast

Web pages should provide enough contrast between text and the background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.

Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this criterion.

Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio.

Example

Example of good and bad contrast

Resources
American Foundation for the Blind: Creating Accessible Website

WebAim.org: Designing for Color Blindness

W3Schools.com: HTML <font> color attribute

W3C Essential Components of Web Accessibility

Delorie Software: Lynx View

Resize text

The scaling of content is primarily a user agent responsibility. The author’s responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets.

Images of Text

Try to avoid text as images within your webpages if possible. Not only does this help with SEO, but will help with screen readers and other visually impaired functionality. Text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed (e.g., Brand logos).


Guideline 1.4 details

Standard Definition

Make all functionality available from a keyboard.

Overview

Users will have varying degrees of motor skills and will benefit from keyboard accessibility. Customers with motor impairment, including many elderly customers, need help to navigate websites. These customers will most likely use their keyboard to navigate websites.

All areas of your website must meet keyboard accessibility, which includes menus and forms. Additionally you cannot require specific timings for keystrokes to access any feature on your website.

Guidelines

A clean HTML and CSS website will often be keyboard accessible without further work. You can test this by unplugging your mouse and make sure you can fully use your website with your keyboard. Make sure no function on your website requires timed keystrokes (e.g., such as double tap enter/return within two seconds to submit).

No Keyboard Trap

Users must also be able to navigate away from all parts of your website. If your customers can access a feature (such as a subscribe form) by keyboard but exit the form using the keyboard, they are keyboard trapped.

  • Test your website to make sure you can navigate away from, as well as to, all parts of your website by keyboard only.
  • Make sure all navigation is controllable by either the tab or arrow keys, which is a standard most people are familiar with.

Guideline 2.1 details

Standard Definition

Provide users enough time to read and use content.

Overview

Many users who have disabilities need more time to complete tasks than the majority of users: they may take longer to physically respond, they may take longer to read content, they may have poor vision and take longer to find content, or they may be accessing content through an assistive technology that requires more time. This guideline focuses on ensuring that users are able to complete the tasks required by the content with their own individual response times. The primary approaches deal with eliminating time constraints or providing users enough additional time to allow them to complete their tasks. Exceptions are provided for those cases where this is not possible.

Guidelines

When appropriate:

  • The user is warned of time limit expiration and permitted to extend time.
  • Scrolling or blinking text can be paused.
  • Users have the option to block an automatic update of content.

Exceptions are allowed when changes in timing would interfere with an essential function.


Guideline 2.2 details

Official Definition

Do not design content in a way that is known to cause seizures.

Overview

Flashing content at your users will most likely provide them with a bad user experience, especially if any of your customers have epilepsy. To make your website as safe as possible, limit flashing media. Flashing media is defined as something that pulses more than 3 times a second.

Animated .gif files and videos that flash the same image, or a rapid succession of similar images, can be considered repeated flashing images. Users with photosensitive epilepsy are subject to seizures triggered by such flickering or flashing effects, and even the average user can suffer headaches or dizziness.

Strobe effects can be described as abrupt changes from light to dark. The more common definition of a strobe effect is when those abrupt changes are repetitive. Users with photosensitive epilepsy are subject to seizures triggered by strobe effects, and even the average user can suffer headaches or dizziness from abrupt color changes.

Users with photosensitive epilepsy are most vulnerable to flicker rates between 2Hz (Hertz) to 55Hz (Hertz) flashes per second range. Do not cause the screen of any web page to flicker with a frequency greater than 2Hz and lower than 55 Hz.

Guidelines

  • Do not use repeatedly flashing images where the rate is 2Hz (Hertz) to 55Hz (Hertz) flashes per second.
  • Do not use strobe light effects—abrupt changes from light to dark—or use flashes in any color range at a rate of 2Hz (Hertz) to 55Hz (Hertz) flashes per second.
  • When in doubt about the flicker rate, avoid incorporating any type of flickering mechanism.

Additionally, the color red is also more likely to cause a seizure. While large, flashing images are not commonplace on the web, seizure-inducing media is, however, becoming more common in web video. This is especially true with HD-quality video that includes strobbing special effects. Such media must be avoided


Guideline 2.3 details

Official Definition

Provide ways to help users navigate, find content, and determine where they are.

Overview

The intent of this guideline is to help users find the content they need and allow them to keep track of their location. These tasks are often more difficult for people with disabilities. For finding, navigation, and orientation, it is important that the user can find out what the current location is. For navigation, information about the possible destinations needs to be available. Screen readers convert content to synthetic speech which, because it is audio, must be presented in linear order. Some Success Criteria in this guideline explain what provisions need to be taken to ensure that screen reader users can successfully navigate the content. Others allow users to more easily recognize navigation bars and page headers and to bypass this repeated content. Unusual user interface features or behaviors may confuse people with cognitive disabilities.

As described in The Motive Web Design Glossary, navigation has two main functions:

  • to tell the user where they are
  • to enable the user to go somewhere else

This guideline works closely with Guideline 1.3, which ensures that any structure in the content can be perceived, a key to navigation as well. Headings are particularly important mechanisms for helping users orient themselves within content and navigate through it. Many users of assistive technologies rely on appropriate headings to skim through information and easily locate the different sections of content. Satisfying Success Criterion 1.3.1 for headings also addresses some aspects of Guideline 2.4.

Bypass Blocks

Use skip to content links to help your customers with disabilities find their way round your website. They might get ‘lost’ easier than other customers and leave your website feeling frustrated.

A web page title is what you see in the very top bar of your web browser. A good web page title will tell you what the webpage is about without you needing to read more. This lets your visitors quickly understand if they are on the right page.

Focus Order

Some users move around websites using their keyboards only. They might have difficulty with motor functions that prevent them navigating with a mouse or laptop’s track-pad. These customers should be able to use the tab key to jump between features on your website – the sequence of these jumps is your focus order.

Unplug your mouse and navigate to your website. Make sure you can got to every page and every feature on the pages with your keyboard. You can use the tab key to skip between features and the enter key to submit forms and follow links. As you tab through features, you must reach them in the order they are intended to be read or used.

Link Purpose (In Context)

Hyperlinks are how users navigate the websites. They are how users get from one page to another on your website. So it’s essential that you make your links clear and easy to understand.

Multiple Ways

Webpages should make it possible for users to locate content in a manner that best meets their needs (e.g., search functionality, navigation, etc.). Users may find one technique easier or more comprehensible to use than another.

Providing an opportunity to navigate sites in more than one manner can help people find information faster. Users with visual impairments may find it easier to navigate to the correct part of the site by using a search, rather than scrolling through a large navigation bar using a screen magnifier or screen reader. A person with cognitive disabilities may prefer a table of contents or site map that provides an overview of the site rather than reading and traversing through several Web pages. Some users may prefer to explore the site in a sequential manner, moving from one page to the next in order to best understand the concepts and layout.

Individuals with cognitive limitations may find it easier to use search features than to use a hierarchical navigation scheme that be difficult to understand.

Headings and Labels

A good heading or label will help users understand what information is contained in Web pages and how that information is organized. When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content.

Labels and headings do not need to be lengthy. A word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content.

Focus Visible

The purpose of this success criterion is to help a person know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.

Note that a keyboard focus indicator can take different forms. One common way is a caret within the text field to indicate that the text field has the keyboard focus. Another is a visual change to a button to indicate that that button has the keyboard focus.

Locations

Try to avoid text as images within your webpages if possible. Not only does this help with SEO, but will help with screen readers and other visually impaired functionality. Text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed (e.g., Brand logos).

Link Purpose (Link Only)

Try to avoid text as images within your webpages if possible. Not only does this help with SEO, but will help with screen readers and other visually impaired functionality. Text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed (e.g., Brand logos).

Section Headings

Try to avoid using text as images within your webpages if possible. Not only does this help with SEO, but will help with screen readers and other visually impaired functionality. Text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user’s requirements;
Essential: A particular presentation of text is essential to the information being conveyed (e.g., Brand logos).


Guideline 2.4 details

Official Definition

Make text content readable and understandable.

Overview

The intent of this guideline is to allow text content to be read by users and by assistive technology, and to ensure that information necessary for understanding it is available.

People with disabilities experience text in many different ways. For some the experience is visual; for some it is auditory; for some it is tactile; for still others it is both visual and auditory. Some users experience great difficulty in recognizing written words yet understand extremely complex and sophisticated documents when the text is read aloud, or when key processes and ideas are illustrated visually or interpreted as sign language. For some users, it is difficult to infer the meaning of a word or phrase from context, especially when the word or phrase is used in an unusual way or has been given a specialized meaning; for these users the ability to read and understand may depend on the availability of specific definitions or the expanded forms of acronyms or abbreviations.

User agents, including speech-enabled as well as graphical applications, may be unable to present text correctly unless the language and direction of the text are identified; while these may be minor problems for most users, they can be enormous barriers for users with disabilities. In cases where meaning cannot be determined without pronunciation information (for example, certain Japanese Kanji characters), pronunciation information must be available as well

Guidelines

  • Identify the language of the page using the HTML lang attrribute in the (<html lang=”en”>.
  • Identify and define words that are ambigous, unknown,or used in a very specific way through adjacent text, a definition list, a glossary, or some other similar method.
  • Before using an abbreviation, the full expansion should be provided first.
  • Content should be presented in at a reading level that can be understood by a person with approximately 9 years of primary education.
  • If the pronunciation of a word is vital to understanding it, its pronunciation should follow immediately after the word. This can be either a link to a glossary or even an audio.

Guideline 3.1 details

Official Definition

Make Web pages appear and operate in predictable ways.

Overview

The intent of this Guideline is to help users with disabilities by presenting content in a predictable order from Web page to Web page and by making the behavior of functional and interactive components predictable. It is difficult for some users to form an overview of the Web page: screen readers present content as a one-dimensional stream of synthetic speech that makes it difficult to understand spatial relationships. Users with cognitive limitations may become confused if components appear in different places on different pages.

For example, people who use screen magnifiers see only part of the screen at any point in time; a consistent layout makes it easier for them to find navigation bars and other components. Placing repeated components in the same relative order within a set of Web pages allows users with reading disabilities to focus on an area of the screen rather than spending additional time decoding the text of each link. Users with limited use of their hands can more easily determine how to complete their tasks using the fewest keystrokes.

Guidelines

  • Navigation links that are repeated on web pages do not change order when navigating through the site.
  • Elements that have the same functionality, for example a search box, are consistently identified and labeled.
  • Avoid unannounced pop up windows.
  • Avoid disabling the browser’s Back button.
  • Provide a separate Submit or Go button/link to initiate page changes (versus auto submit upon selection).
  • Allow automatic slideshows and scrolling or blinking text to be paused.
  • Give users the option to block automatic updates of content.

Guideline 3.2 details

Official Definition

Help users avoid and correct mistakes.

Overview

Everyone makes mistakes. However, people with some disabilities have more difficulty creating error-free input. In addition, it may be harder for them to detect that they have made an error. Typical error indication methods may not be obvious to them because of a limited field of view, limited color perception, or use of assistive technology. This guideline seeks to reduce the number of serious or irreversible errors that are made, increase the likelihood that all errors will be noticed by the user, and help users understand what they should do to correct an error.

Guidelines

  • Provide appropriate form field validation.
  • Provide clear labels for form and application controls.
  • Provide usable instructions for entering information into forms and applications (preferably before the form field).
  • Provide clear and usable error messages identifying the location of error and information for correcting it.
  • If the user can change or delete data,

Guideline 3.3 details

Official Definition

Maximize compatibility with current and future user agents, including assistive technologies.

Overview

The purpose of this guideline is to support compatibility with current and future user agents, especially assistive technologies (AT). This is done both by 1) ensuring that authors do not do things that would break AT (e.g., poorly formed markup) or circumvent AT (e.g., by using unconventional markup or code) and 2) exposing information in the content in standard ways that assistive technologies can recognize and interact with. Since technologies change quickly, and AT developers have much trouble keeping up with rapidly changing technologies, it is important that content follow conventions and be compatible with APIs so that AT can more easily work with new technologies as they evolve.

Guidelines

  • Use validated markup. Check HTML/XHTML validation/parsing errors at http://validator.w3.org.
  • Label the name and role of all user interface components.
  • Identify the value for all data fields, including parameters for interface controls.

Guideline 4.1 details

About the VLC

The Virtual Learning Community is a collaborative effort of all North Carolina’s Community Colleges to increase the quality and availability of online learning and support services.

VLC Logo

NCCCS Logo