18F

Links are commonly used to quickly navigate a site when someone is using assistive technology. Often, screen reader users won’t read through an entire page to find what they are looking for.

If timeouts are used, you must give the user at least 20 seconds to easily request more time. Testing> Testing # Identify any timeouts on the page. Contact the developer to find these.

When using multimedia, we must provide means for everyone to consume the media. Multimedia is anything that uses audio and video. Captioning> Captioning # Videos with audio require synchronized captioning. Captioning can be either closed, meaning they can be turned off, or open captioning, meaning it is baked into the video.

Page titles are important because they help a user navigate their browser. Most users have multiple tabs open at once. It’s easier to jump between pages if each page title is unique.

Making forms accessible is a simple process. Each form element should be associated with its instructions and errors, and everything should be accessible via the keyboard. Testing> Testing # Identify each form element.

Setting the language of your site allows assistive technology to interact with your content correctly. Assistive technology will read foreign languages, but it needs to know the main language of the page and when any content’s language differs from the default language for the page.

There are two main accessibility concerns for color, contrast and color dependence. Color contrast is the ratio of the foreground color(text) and the background color. Text should have a ratio of 4.

Color tools> Color tools # WebAIM color contrast checker compares two hex colors and tells you whether they meet WCAG AA and AAA contrast thresholds. Snook’s color contrast analyzer lets you adjust RGB and HSV values and reports contrast compliance interactively.

Hiding content is very useful for accessibility. We can hide things visually and only display it to screen reader users, we can hide content from screen reader users and only show it visually, or we can hide content from both.

18F Accessibility Guide: a comprehensive accessibility guide with resources published by 18F, a digital services agency under the General Services Administration (GSA). Accessibility is one of the most important aspects of modern web development.

When using iframes, it’s important that all content contained in them is accessible. Testing> Testing # Identify all iframes on a page. Using the keyboard, navigate to each iframe to ensure content is accessible.

When using images on a page, you must provide an alternate method for that content. This can be provided in multiple ways. You can provide this information with a caption, alt attribute (alt tag), title attribute, or aria-label attribute.

When tables are used to show data, the header cells that relate to the data cells need to be programmatically linked. This makes table navigation for screen readers more accurate and meaningful.

Cascading style sheets ( CSS) allow us to add and manage styles (e.g., fonts, colors, size, spacing) on web pages. CSS dependence refers to sites that rely on CSS to be functional or understandable.

When laying out a page, headings provide a semantic way to lay out sections of content. A heading element briefly describes the topic of the section it introduces. Heading elements are used by users of AT to navigate a page quickly and to understand the structure of a page.

All elements on a page should be contained in a landmark element. This helps users of AT quickly navigate a page. HTML5 provides built in landmark elements such as main, nav, aside, header, footer.

Keyboard access to a website is key to the usability of your site. All interactions and information that can be accessed with a mouse must be accessible with just a keyboard.

Flashing is generally a bad idea. It can cause all sorts of issues, from seizures to motion sickness. If you absolutely must have a flashing element there are a few things to consider.

This checklist helps developers identify potential accessibility issues affecting their websites or applications. It’s broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.

Alternate versions of web pages should only be used when the main page can’t be made accessible. There are very few instances where they would be necessary. Live dynamic mapping applications are one example.