Disability Resources

Web Accessibility Standards Notebook

Learn it in Five Minutes – Here’s Your Key Points

There are a number of evaluation tools available which can be used to determine whether or not web content meets a variety of needs; however, the reports produced by some of these tools can be difficult to interpret. Choosing a tool appropriate to your skill set and technology comfort level is recommended. Also, determining which tool(s) to use is dependent on the tools that may already be available at an institution; thus, it is recommended that users first connect with the appropriate offices/staff at their institution before selecting an evaluation tool.

One important item to note when evaluating a site for accessibility and compliance is automated evaluation tools can never replace human testing; for example, an accessibility evaluation tool might not flag issues such as visual or sensory details included in instructions and sensory dependent activities. In addition, using only one tool to evaluate web content is not recommended since various tools check for only specific accessibility issues.  

The most common web evaluation tool is WAVE (Links to an external site.), which is the Web Accessibility Evaluation Tool provided by WebAIM. The steps for using WAVE to evaluate a website for accessibility are as follows:

  1. Go to wave.webaim.org 
  2. Copy the URL of the website that requires evaluating.
  3. Paste the URL into the WAVE Web Page Address field.
  4. Click Enter.
  5. The accessibility report will appear as an overlay to the evaluated website.

The WAVE tool uses icons to indicate accessibility errors on the page. This can be confusing for those not familiar with the tool. It is recommended that beginner users review the WAVE Help (Links to an external site.) page and the WebAIM guide to Accessibility Evaluation Tools (Links to an external site.) before using WAVE to evaluate a website.

I Need More Information – Here’s Your Resources

For information on other available tools for evaluating the accessibility of web content, W3C provides a Web Accessibility Evaluation Tools List (Links to an external site.). This list has filters which allow users to find a tool that meets their needs. For information on other available tools for evaluating the accessibility of web content, W3C provides a Web Accessibility Evaluation Tools Lists (Links to an external site.)  This list has filters which allow users to find a tool that meets their needs.

Animations, Visual Effects

Learn it in Five Minutes – Here’s Your Key Points

The Standards
Section 508 Standards:

  • Standard 1194.21, h "When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user." (Section508.gov)
  • Standard 1194.22, j "Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz." (Section508.gov)
  • Standard 1194.21, k "Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz." (Section508.gov)

WCAG 2.0 Guidelines:

  • Guideline 2.2.2 "Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)" (W3C)
    • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
    • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
  • Guideline 2.3.1 "Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)" (W3C)

What do the Standards Mean?

For individuals with photosensitive seizure disorders, flashing or blinking lights can trigger seizures. Many animations (e.g. gif animation), visual effects (e.g. transitions in slides or videos) and objects that automatically update (e.g. RSS feeds) on web pages, videos, slide presentations, and games have rapid flashing or blinking components. Whether the resource is dangerous to individuals with photosensitivity depends on the speed and size of the animation; for instance, if the object is large and blinks more than three times in a second then it is dangerous. If the requirements are not met then that resource should not be used.

Whenever animations and visual effects are presented in a resource, ensure that any content conveyed by those animations and visual effects are also detailed in the accompanying text. In addition, provide a method for users to pause, stop or slow down the animation, visual effect or automatically updating objective. An example would be allowing users to control the play and speed of the automatic refresh of an RSS feed.

How to Test an Object?

One easy method for assessing whether or not an object meets the above standards is checking to see if the resource blinks or flashes more than three times in a single second. If it does then that animation, visual effect or object could potentially cause individuals with photosensitivity to have a seizure.

There are also tools available that can assess an object for issues related to photosensitivity. Review the page in week 6 for more information.

Tips for Using Animations and Visual Effects

While it is possible to make blinking objects safe, it is often easier and quicker to forgo using any blinking and flashing animations, visual effects or other related objects. Also, when creating slide presentations and videos, use simple, slow transitions and visual effects.

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about Animations, Visual Effects:

  • WebAIM Seizure Disorders. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • W3C Seizures. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.  
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Learn it in Five Minutes – Here’s Your Key Points

The Standards
Section 508 Standard:

Standard 1194.22, o  "A method shall be provided that permits users to skip repetitive navigation links." (Section508.gov)

WCAG 2.0 Guideline:

Guideline 2.4.6  Headings and Labels: "Headings and labels describe topic or purpose. (Level AA)" (W3C)

What do the Standards Mean?

Using word processing software’s built-in headings and list structure (e.g. Styles block in Microsoft Word) when creating text-based content benefits users of many types of assistive technologies; for example, users of screen readers. Screen readers do not convey headings and lists created with direct formatting (bold, italics, underline, numbering) to users; thus, users cannot distinguish between regular text and headings and lists created with direct formatting. On the other hand, built-in headings and lists are created in a way screen readers are able to interpret and communicate to users. Another example of assistive technology users who benefit are those who use navigation functions in some word processing software; for example, navigation pane (aka document map) in Microsoft Word.

How to Create Accessible Headings and Lists?

Creating accessible headings and lists is straight-forward. When creating a document using word processing software, choose one of the pre-made, built-in styles or layouts. For example, when using Microsoft Word, navigate to the Styles block and choose one of the heading style options listed. Also, select the bulleted list or numbered list button in Microsoft Word to use the pre-made list styles. For detailed information on how to create text-based documents using built-in headings and list structures, review the lesson available in week 6.

How to Verify Headings and Lists are Accessible?

Most word processing software provides a way to verify that a built-in style and/or list structure was used when creating a text-based document; for example, newer versions of Microsoft Word provide an Accessibility Checker that will confirm the use of built-in headings and lists.  Selecting and highlighting the text and then reviewing the setting in the Styles block is another way to confirm headings and lists are accessible. An option in the Styles block will be selected if the highlighted text was formatted with a built-in style.

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about headings and list structure:

  • Headings and List Structure. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • Headings. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.  
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Learn it in Five Minutes – Here’s Your Key Points

The Standards
WCAG 2.0 Guidelines:

  • Guideline 2.4.4 "Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)" (W3C)
  • Guideline 3.2 "Make Web pages appear and operate in predictable ways." (W3C)

What do the Standards Mean?

A URL (a.k.a hyperlink) can be a long string consisting of letters, numbers, dashes, underscores, and other characters that connect the user to a web link. These combinations are not “words” and are often not meaningful or descriptive. This can be problematic for all users not only users of assistive technologies.  Adding display text to URLs makes them easier to read and understand for all users. There are a number of factors to consider when creating display text.  

Readability and Length

Readability and length are two factors to consider when creating display text to replace a URL. When a screen reader reads a URL it may sound non-sensical since the long string of characters used in the URL are not “words”. Providing readable display text with meaning in the content allows a user to understand the relevance of that link.  

While there no minimum or maximum limits or restrictions on the length of display text, there are some recommended best practices.  

  • Display text should be concise yet long enough to convey the meaning of the link.
  • Avoid using entire sentences or paragraphs as display text. Display text of this length is often unnecessary and creates frustration for screen reader users since they must listen to the all of the display text . Short, concise links are less likely to frustrate screen reader users than long, imprecise links.
  • A descriptive short URL (e.g., a site’s homepage) can be used as the link text and does not require display text to meet compliance.
  • Creating display text of only one character can provide difficulty for some users.  If it is necessary to create display text of only one character, the recommendation is to increase the font size of the display text and add additional whitespace around the small display text. This will help to limit the issues encountered by users.  
  • Avoid empty links. The display text provided should always link to a location where content is presented. Empty links are still navigable and can be frustrating for users.

Description and Meaning

A well designed link should be meaningful and descriptive.  The display text should provide the reader with the purpose of the link even when out of context.  Assistive technologies, such a screen readers, have the ability to present a list of links on a web page to the user.  Using descriptive and meaningful links assists users in deciding which links to follow.  

Opening a New Window

Display text should only open a link in a new window or tab when necessary.  Opening links in a window or tab can be confusing and disorienting for some users, particularly those user who have difficulty perceiving visual content.  Here are a few examples of when content should open in a new window:

  • Context-sensitive information (e.g., help instructions)
  • An alternate means of completing a form (e.g. a calendar-based date picker)
  • In cases where the following a link will cause the user to be logged out of a secure area of a site

When it is deemed necessary to open a link in a new window, user should be provided advanced warning.  This can be accomplished through a visual warning or a warning spoken through the use of assistive technology.  Each of these warnings should state that this link opens in a new window.  

Avoid using uninformative link descriptions

Links such as click here, read more, here, etc. do not offer a meaning and are unnecessary.  Typically, these uninformative links precede a more meaningful phrase so it makes sense to eliminate the uninformative link and use the more meaningful phrase as the display text.  In some cases it may be appropriate to include words like more in the display text; however it is usually best practice to avoid them especially if the same meaning is being conveyed in the context.

Following these guidelines and recommendations, when creating display text for URLs (a.k.a. hyperlinks) will result in descriptive and meaningful links that are functional and user-friendly; thus, providing a better experience for all users.

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about hyperlinks:

  • W3C Hyperlinks. Retrieved January 24th, 2016. 
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • WebAIM Hyperlinks. Retrieved January 24th, 2016. 
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Learn it in Five Minutes – Here’s Your Key Points

The Standards
Section 508 Standard:

Standard 1194.21, a "When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually." (Section508.gov)

WCAG 2.0 Guideline:

Guideline 2.1 Keyboard Accessible: "Make all functionality available from a keyboard." (W3C)

What do the Standards Mean?

Keyboard accessibility means:

  • When assembling and/or creating websites, software, and multimedia, make sure users can navigate to and execute all the links, buttons and other interactive content using just keyboard commands. If a user has to use the mouse to fully interact with the resource then this standard is not met.  
  • When using keyboard commands to navigate the resource, check for a logical and instinctual order of navigation.  
  • For seeing individuals, it is clear when a link, button or another interactive element is selected because it has a border around it, a different background color or some other visual indicator.
  • If the resource has a large amount of content then it should have a “skip to main content” link.  

It is important to make content accessible with the keyboard alone because not everyone can use a traditional mouse. The reasons are unique to the individual. If a user can fully interact with a resource using the keyboard alone then that gives access to the largest possible audience (W3C, "Keyboard Accessible: Understanding Guideline 2.1"). 

Examples of resources that are frequently not fully keyboard accessible are:

  • Video players (especially Flash-based players)
  • Drag-and-drop activities and videos with quizzes or interactive games built into them
  • Some software and web applications

How do you Check for Keyboard Accessibility?

For most websites and software, users do not need a special software to check for keyboard accessibility. There is a simple way to test using just keyboard commands. Put away the mouse and use the following keyboard commands to navigate and to execute hyperlinks, buttons and other interactive elements in the resource.

Try to navigate through two popular websites using the following keyboard keys (without using the mouse) (WebAim, "Keyboard Accessibility").

  • Clicking TAB repeatedly allows you to navigate from button to button and from link to link.
  • Clicking SHIFT+TAB allows you to go back to the previous button or link.  
  • Clicking the SPACEBAR, the return or the enter keys when a link or button is selected activates that link or button.

Note which features are accessible and which are not accessible. If not all content is accessible without using a mouse then that resource does not meet the standards and guidelines.

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about keyboard navigation:

  • WebAIM Keyboard Accessibility. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • W3C Keyboard Accessible. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.  
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.
  • Apple Mac Keyboard Shortcuts
    • Listed above are the most commonly used keyboard shortcuts. For a more extensive list of Mac keyboard shortcuts, the best resource is the Apple website itself.
  • Microsoft Products Keyboard Shortcuts
    • For a more extensive list of keyboard shortcuts for Microsoft products, review this page on the Microsoft website.

Learn it in Five Minutes – Here’s Your Key Points

The Standards
Section 508 Standards:

 Standard 1194.21, g "Applications shall not override user selected contrast and color selections and other individual display attributes." (Section508.gov)

WCAG 2.0 Guidelines:

  • Guideline 1.4.4 "Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)" (W3C)
  • Guideline 1.4.5 "Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)" (W3C)

What do the Standards Mean?

There are a number of factors to consider when selecting which fonts to use when creating compliant content.  Some of these factors include but are not limited to, readability, font size, font variations, number of fonts used, etc.

When selecting a font for readability, choosing a font from the most commonly used font families which are universal to most devices is recommended.  The Serif and Sans-serif font families are two of the most common.  Known for its flared extensions and thick and thin lines, the Serif font family consists of Times News Roman, Georgia, and Antigua.  The Sans-serif font family has more of a block appearance to its letter and consists of Arial, Tahoma, Trebuchet MS, and Verdana. Specific details on each of the fonts listed above can be found on WebAIM Font Techniques.

Although the number of fonts used in a text-based document is not directly tied to accessibility, it is often considered a best practice to limit the numbers of fonts used within a document.  This best practice also applies to the font variations.  Limiting the number of fonts and variations used can lead to better document readability and less confusion for readers. 

Today’s browsers have made the selection of font size less important because users can magnify and shrink text based on their needs and preferences.  Content creators should select a font that maintains its readability and functionality when magnified or shrunk. Readability and functionality must be maintained at a magnification of 200% to be compliant.

How to Verify Text Formatting is Accessible?

  • Is the font selected from the Serif or Sans-serif font families?
  • Are there a limited number of fonts and font variations used in the text-based document?
  • When magnifying or shrinking the text is the readability maintained?

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about text formatting:

  • WebAIM Font. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • W3C Fonts. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015. 
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Learn it in Five Minutes – Here’s Your Key Points

The Standards
Section 508 Standards:

  • Standard 1194.22, c "Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup." (Section508.gov)
  • Standard 1194.22, i "Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." (Section508.gov)

WCAG 2.0 Guidelines:

  • Guideline 1.4.1 Use of Color: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)" (W3C)
  • Guideline 1.4.3 Contrast (Minimum): "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:" (Level AA) (W3C)
    • "Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
    • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
    • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement."

What do the Standards Mean?

Many individuals benefit when a resource is designed with high color contrast between the foreground (e.g. text) and background colors. For instance, high contrasting color combinations (e.g. black text on a white background) make text easier to read for users with a wide-variety of visual impairments, including but not limited to partial sight, low vision, color-blindness, etc. High color contrast requirements can vary depending on the text size and type of content.

Users with visual impairments may not able to distinguish important information when its importance is conveyed only through the use of color.  For example, color-blind users may not know a field is required if the only feature identifying that field as required is a red label.  Important information conveyed through the use of color must also be conveyed using text cues.  Screen readers and other assistive technologies are able to interpret these text cues for users with visual impairments.  For example, when the text color of a form field is red to indicate it is a required field, adding the word “Required” after the field name will provide the necessary cue.

How do you Verify the Use of Color is Accessible? 

WebAIM (Web Accessibility in Mind) provides a free color contrast checker to assist with developing compliant content.  To verify color accessibility, enter the foreground/text color and background color into the Color Contrast Checker to verify the colors selected “Pass” the ratio required for WCAG 2.0 AA guidelines for normal and large text.  To learn more about how to use this tool visit the lesson in Week 6.

I Need More Information – Here’s Your Resources

Information on this page is from the following resources about use of color:

  • WebAIM Contrast Checker. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • W3C Website. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.  
  • Quick Reference Guide to Section 508 Requirements and Standards. Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.