Legal Guidelines for Interactive Media
[Author: Bill Fischer]
Overview
This is my interpreted checklist of the legal requirements for interactive media as outlined by Title II and III of the Americans with Disabilities Act, and Section 508 of the rules for Educational and Governmental Institutions. Federal departments and agencies, some state governments, educational institutions, and some federal grantees, are required to meet section 508 regulations, which were last updated in 2018. This requires compliance to WCAG 2.2 level AA (Web Content Accessibility Guideline) plus some additional requirements under 508. Websites, mobile, and desktop apps and games that can be considered places of public accommodation (those offering services that are similar to those that are or have been offered in physical locations) also need to comply, will need to comply or, in some cases, alternative modes of access may be offered.
The three primary regulatory components
Technical – these requirements make sure the coding of a website, software, operating systems, etc. is compatible with assistive technologies.
Functional – these requirements ensure that in addition to the technical coding, the entire system is usable by someone with a disability.
Support – these requirements make sure that support documents and alternative information are also accessible by people with disabilities.
The WCAG 2.2 AA Specifications
You can find the official requirements in their original legal language at the Elsevier accessibility checklist website (external link).
Visit this WebAim technical guide for screen reader compatibility (external link) for help with organizing, writing, and code development.
A summary of The Guidelines
The Four Principles of Accessibility
Anyone who wants to use the Web must have content that is:
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
Operable - User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Understandable - Information and the operation of the user interface must be understandable.
This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Navigation
The media should be navigable using a keyboard arrow and tab keys.
Should be consistent from page to page.
Links to the same location with different names should not be in the body of the same page and avoid redundant links when possible.
A "skip Menu" invisible or visible button should be included if the menu has more than 4 buttons.
Do not differentiate categories of information using only color. Other indicators such as value, text and iconography, borders, etc. will work better for the sight-impaired.
There should be multiple ways to to locate a page within a set of pages except where the Page is the result of, or a step in, a process. Acceptable methods include the addition of a search bar, a content/site map, or linear, screen to screen navigation.
Users should be warned of time limits that are essential or longer than 20 hours. Audio and visual warnings (20 seconds in advance) should tell the user when time limits are at hand. Ideally, time limits should be extendable.
Larger is better when it comes to button/text hit zone sizes. A good minimum to work with comes from Apple's design guidelines:
48 pixels x 48 pixels for touch/click area and 8 pixels between hit zones. 60 - 72 pixels with 12 -24 pixels spacing is optimal.
Button or text size can be independent from the hit zone size. It may be smaller, but should not be larger.
Links
Links in body text should be underlined
Links to external sources should labeled as such:
Example: Google Scholar (external link)
Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.
Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.
A good example: Learn more about the principles of universal design.
A bad example: Click here to learn more about the principles of universal design.
Layout
Symantec Web Design should be employed: When all CSS styling of the page is removed, the elements on the page should still be in a logical reading order in the HTML code. Here's how you can test:
Use Firefox Developer Edition (Click View > Page Style > No Style in the top menu)
Use the WAVE checker (external link) (click the "no styles" tab)
Check manually that the elements on the page are in a logical reading order.
The media should be responsive to a variety of screen sizes.
Orientation should not be locked to either portrait or landscape.
The content should be displayed in a left to right, top to bottom hierarchy.
Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples of good visual hierarchy design (external link).
Use alphabetical, unordered or ordered lists when organizing information
Table columns should have headers.
No automatic pop-ups or focus changes triggered by scrolling.
There should be ample space between navigation elements that allow for ease of use on a small phone
Avoid overuse of parallax effects and animation triggered by scrolling. As many as 35% of people over the age of 40 are likely to feel nauseous when used, due to vestibular disorders.
Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complementary colors or stripes that may scintillate. You can dive deeper into this requirement by reading the seizure guidelines from Webaim (external link).
If a plugin is required to view the content, a link to a download should be provided
When a User Interface Component displays a visible keyboard focus, all of the following are true:
Minimum area: the focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.
Focus contrast: color changes used to indicate focus has at least a 3:1 contrast ratio with the colors changed from the unfocused control.
Contrast or thickness: the focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
Text
It is very likely that a sight-impaired person will navigate a web page by tabbing through the headings. The headings should be written to maximize that process. Hierarchical/chronological use of text tags is also critical. For example:
Title, Heading, Sub-heading, Normal
H1, H2, H3, H4, Normal
It's best not to rely on visual formatting alone to communicate meaning. Screen readers might not announce formatting changes, such as boldface or highlighting. For example, to mark an important section of the text, add the word "Important."
Should be high contrast against its background (light on dark or dark on light). Use the WebAim Contrast Checker (external link) tool to test color combinations. Use a combination of the Wave Checker and the SilkTide extension (external link) to test color combinations for various color blind conditions. The visual presentation of text and images of text should have a contrast ratio of:
4.5:1(Level II) for small text
3:1 for large text, defined as; 14pt (18.5px) bold or 18pt (24px) regular)
7:1 for all text (level III).
Maximum contrast for all text and graphics should be 16:1
Should be sized for easy reading.
Should be left-aligned in most cases when there is a large volume of text.
The line height (line spacing) should be at least 1.5 times the font size, and spacing following paragraphs should be at least 2 times the font size.
Letter spacing (tracking) should be at least 0.12 times the font size, and word spacing should be at least 0.16 times the font size.
Text should be able to be resized up to 200 percent without loss of content or functionality, except for captions and images of text.
If you use image-based text, the text in the image must be included, in full, in the image alt tag.
Should be able to enlarge using devise controls.
Avoid redundant text: especially between title and header tags
Don't use all uppercase typesetting. Some screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT-style text will work well with screen readers.
Images
Images should be high-contrast to ensure sight-impaired persons can understand them. Reference the imaging design principles in this site.
Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.
An example of a bad tag: figure 2
An example of a good tag: cartoon of a dog in a window barking at a postal delivery woman approaching a house on foot.
An example of a tag with a link destination: fish icon: links to the fishing guide
If an image contains complex information that is critical to understanding the content, a "long description" tag can be used. WordPress has this capability built into it.
Icons should always include text with them.
The visual presentation of icons and other graphical images utilized for navigation should have a contrast ratio of between 3:1 and 16:1 (Level II).
Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.
Purely decorative images, like those sometimes used as backgrounds in page headers, do not need descriptive alt tags. Null alt tags ( "" ) should be inserted instead.
Captions should not be used in place of alt tags. Captions should be used for adding context to an image such as: 'It's source' or 'why it is important', etc.