GSA

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.

Non-Text Content – Meaningful Images> Non-Text Content – Meaningful Images # All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Content owners are the best resource for text descriptions since they know what information they want the image to convey.

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.

Page Titled> Page Titled # Web pages have titles that describe topic or purpose. Content/Design Considerations Provide a descriptive title for each page or screen. If the page is a result of a user action or scripted change of context, the TITLE should describe the result of change of context.

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.

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

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.

Name, Role, Value> Name, Role, Value # For all user interface components (including, but not limited to, form elements, links, and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies (Level A).

Audio-only and Video-only (Prerecorded)> Audio-only and Video-only (Prerecorded) # For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

Headings and Labels> Headings and Labels # Headings and labels describe topic or purpose. (Level AA). Refer to WebAIM’s Using Headings for Content Structure. Content/Design Considerations Provide descriptive headings for sections of content for content structure.

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.

Name, Role, Value> Name, Role, Value # For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

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.

Info and Relationships> Info and Relationships # Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Content/Design Considerations Use simple tables instead of complex tables whenever possible Development Considerations

Keyboard> Keyboard # All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.