Legal Guidelines for Interactive Media
[Author: Bill Fischer]
This is my interpreted checklist of the legal requirements for interactive media as outlined by Title II and III of the American's 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 grants, 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 will all 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 is also accessible by people with disabilities.
The WCAG 2.2 AA Specifications
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 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)
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 on the same page and avoid redundant links in general
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.
A site map page should be included for sites with drop down menus.
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 Apples 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 hit zone size. It may be smaller, but should not be larger.
Links in body text should be underlined
Links to external sources should labeled as such:
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.
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.
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 complimentary colors or stripes that may scintillate. You can dive deeper into this requirement by reading the siezure 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 have 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.
It is very likely that a sight impaired person will navigate a web page by tabbing through the headings. The headingss 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 text, add the word "Important."
Should be high contrast against its background (light on dark or dark on light). Use the Wave Checker (external link) tool to test color combinations. Use the a combination of the Wave Checker and the NoCoffee Chrome extension to test color combinations for various color blind conditions. The visual presentation of text and images of text should have a contrast ratio of between 4.5:1 and 16:1 (Level II) or 7:1 and 16:1 (level III). I strongly recommend level III.
Should be sized for easy reading.
Should be left-aligned in most cases when there is a large volume 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 upper case type setting. 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 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.