Accessibility Guidelines - The Checklist
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
HHS.gov HTML 508 Checklist
Chapter 5 Addendum:
Title II Checklist
A Free 24-Hour Online Community Event On Accessibility Organized by The Paciello Group
Inclusive Design 24 celebrates efforts worldwide to ensure people with disabilities have full and equal access to the web. To this end, we will be holding 24 completely free one-hour webinars on all things accessibility. The sessions range from beginner to advanced and are aimed at everyone from executives to web developers.
Github website: Progressively enhanced ARIA accordions
Smashing Magazine: Stop Designing for Only 85% of Users: Nailing Accessibility in Design
What I've learned about motor impairment - SimplePrimate Thoughts on how websites and apps can better address the needs of those with a wide range of motor impairments.
The Paciello Group Inclusive Design Principles
Teach Access Initiative - https://teachaccess.github.io/tutorial/
- Alt text is applied to images that convey meaningful information.
- Captions are provided on video content with audio.
- Video or audio-only content is accompanied by text transcript or description.
- Links are provided to media players required to view content.
- Headings are presented in logical order.
- "b" and "i" tags are replaced with "strong" and "em."
- There are no empty links or heading tags.
- Presentation or feedback does not rely solely on color.
- Automatically-played audio can be stopped or is not included.
- The keyboard can be used to navigate the site.
- Time limits provide notifications to the user before they expire.
- Automatically scrolling or blinking content can be stopped.
- No strobe effects or rapidly flashing colors occur on the site.
- “Skip navigation” functionality is provided to allow keyboard users to quickly access content.
- Page titles clearly and succinctly describe page content.
- Buttons and links are clearly and logically named.
- The language of each page is identified in code.
- Elements receiving focus do not change layout in a substantial way.
- Invalid form input is identified to the user.
- Forms have labels and legends that can be read by screen reader software.
- Contrast ratio between text and page backgrounds is at least 4.5-to-1.
- Text on pages can be resized to 200% while still maintaining form.
- Text-based images are not used.
- Pages on the site can be accessed in multiple ways.
- Keyboard focus is visible and clear.
- Menus and buttons are shown consistently regardless of the user’s location in the site.
- Users are given suggestions on how to solve input errors.
- Underlined text that does not provide a link is removed.
- Redundant links on the same page are eliminated or minimized.
Link Type Indicators Tip: While not required by accessibility guidelines, it is a good idea to inform users when a link goes to non-HTML content (such as a PDF file or Word document). It can be frustrating to activate a link and then realize that the link requires an external program or viewer. An icon (with appropriate alternative text) or text, such as "(PDF)", is sufficient. It is vital that the link type indicator icon or text be placed within the link, otherwise this information is readily available to sighted users, but not presented as part of the link for screen reader users.
Web Browser Tools for Testing Accessibility:
Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.
Web Accessibility Toolbar - Accessibility toolbar for Internet Explorer
Accessibility Evaluation Toolbar - Accessibility Evaluation Toolbar for Mozilla Firefox
Color Contrast Analyzer for Firefox - Color contrast analyser for Firefox (PC and Mac)
Fangs - Text-reader emulator for Firefox (PC and Mac)
NCDAE video: Identifying Web Accessibility Issues
Web Sites for Testing Accessibility:
W3C HTML Validator - Validates your HTML coding
W3C Link Checker - Checks to see if there are any broken links
W3C CSS Validator - Validates your Cascading Style Sheet code
WCAG Contrast checker - Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2.
Colour Contrast Check - Web page for testing foreground and background color choices
Cynthia Says Portal - Online Web accessibility evaluation tool
WAVE - Online Web accessibility evaluation tool
AChecker - Online Web accessibility evaluation tool
Other information for Website Accessibility:
Alt Text resources
Fact sheet and other resources: https://www.accessibilityoz.com/factsheets/interactive-maps/
- Some important aspects of accessible maps include keyboard focus, color and contrast, text within map needs to be able to resize.
- A good approach to alt text for maps is to say in the alt text the name of the map and then “long description follows image.” In the long description, take as much text as needed to describe the important aspects of the map.
- Different browsers and different screen readers will work differently in terms of accessing accessibility features. Don’t assume that if it works in one combination, that it will work in other combinations.
- To be accessible, all actions need to work with keyboard, mouse, or touch (phones/tablets).
- Maps.google.com is keyboard accessible.
- For more complex maps, use a table of data instead of a long description.