Web Accessibility Basics

Legal Requirements

This is a basic interpreted checklist of the legal requirements for web 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.

Overview

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.

In addition to that, any website that fits in the category of "a place of public accommodation" is required to be accessible and meet the WCAG 2.1 standard.

Places of Public Accommodations Include Websites For:

Places of lodging (e.g. , inns, hotels, motels) (except for owner-occupied establishments renting fewer than six rooms);
Establishments serving food or drink (e.g. , restaurants and bars);
Places of exhibition or entertainment (e.g. , motion picture houses, theaters, concert halls, stadiums);
Places of public gathering (e.g. , auditoriums, convention centers, lecture halls);
Sales or rental establishments (e.g. , bakeries, grocery stores, hardware stores, shopping centers);
Service establishments (e.g. , laundromats, dry-cleaners, banks, barber shops, beauty shops, travel services, shoe repair services, funeral parlors, gas stations, offices of accountants or lawyers, pharmacies, insurance offices, professional offices of health care providers, hospitals);
Public transportation terminals, depots, or stations (not including facilities relating to air transportation);
Places of public display or collection (e.g. , museums, libraries, galleries);
Places of recreation (e.g. , parks, zoos, amusement parks);
Places of education (e.g. , nursery schools, elementary, secondary, undergraduate, or postgraduate private schools);
Social service center establishments (e.g. , day care centers, senior citizen centers, homeless shelters, food banks, adoption agencies); and
Places of exercise or recreation (e.g. , gymnasiums, health spas, bowling alleys, golf courses).

The WCAG 2.2 AA Specifications (Basics)

You can find the official requirements in their original legal language at the Elsevier accessibility checklist website (external link).

Navigation

Avoid single page websites. They make navigation for blind persons onerous and it is difficult or impossible to share a link to particular page section via an email or other messaging service.
Don't use hamburger menus on the desktop version of a site. Most screenreaders can't 'see' them.
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.
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.

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:
1. - Title, Heading, Sub-heading, Normal
  - H1, H2, H3, H4, Normal
  - Never use heading tags (types) strictly for their style.
Text 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.
1. - text should have a contrast ratio of between 4.5:1 and 16:1
Text should be sized for easy reading.
1. - Text should be left-aligned in most cases where there are more than 2 lines.
  - Don't use image-based text. Screen readers cannot read it.
  - Should be live text... not image text, so users are able to enlarge it using devise controls.
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 with most screen readers.
Don't place text over images unless there is an empty area in the image behind the text for all breakpoints. Text over complex images will likely not meet the 4.5-1 minimum conrast requirements.

Content

Media such as video and image carousels should not auto-play. Users should have control over the media. An exception may be when the auto-play video or carousel is acting as a decorative, animated background and is not critical to understanding the content being delivered.

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.

Images

Icons and other graphical images utilized for navigation or conveying information should have a contrast ratio of between 3:1 and 16:1.
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'
  - Images that are not important to the understanding of the content, like those sometimes used as backgrounds in page headers, do not need descriptive alt tags. Null alt tags ( "" ) should be inserted instead.
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. 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.
Icons should always include live text with them.
Color should not be used alone to identify or differentiate information.
Size and Compression (use these specs to ensure fast loading).
- - Images should be JPG (60-80 quality) or SVG (not PNG... they will load slowly)
  - Max. size for full width/height header: 1920 w. x 1080 h.
  - Max. size for full width image: 1930 w. x 720 h.
  - Max. size for 2/3 site width image: 1280 w. x 720 h.
  - Max. size for half site width image: 960 w. x 720 h.
  - Max. size for 1/3 site width image: 640 w. x 720 h.
  - Max. size for 1/4 site width image: 480 w. x 720 h.

Additional Resources

A short video demonstrating MAC's, free, built-in screen reader called VoiceOver

The video below was created by Developer/advocate Rob Dobson. (start at the Wikipedia Section: external link)

Tools

Web content should be fast loading on 2-3 bar 4g connection, respond to every device size, and be usable on phones. Over half of all page views on the internet are from mobile devices. Below, are two tools to help you with assessment.

Check your site for accessibility compliance.

Check contrast of text over an image.

Check your site for color-blind efficacy. While there are no laws requiring this, 4.5 percent of the population is on the deuteranopia (red-green) colorblind spectrum.