Access to the web is as important as access to electricity, water, or any other utility. For one in five of us, that access can be limited by designs that were never built for folks with disabilities. There are over one billion disabled people in the world and the number will only grow as our population ages.
iSoftStone North America has worked with global enterprise, mid-sized growth companies, universities and nonprofits to build, refine, and publish websites that exceed accessibility standards. The topic is important to us, and we want to share what we’ve learned.
Accessibility Compliance Guidelines
Everyone in your development, testing and QA teams should be able to access the most commonly accepted accessibility standards. Sadly, there is no universal standard for accessible, inclusive web design. But the community has relied on two popular guidelines:
The World Wide Web Consortium maintains accessibility guidelines which forms the most commonly accepted standards for accessibility online. At least one person on your team should become a WCAG expert.
US Access Board - Section 508 of the Rehabilitation Act
The final ruling on accessibility requirements for information technology was published on January 18, 2017 by the U.S. Access Board. The ruling updated Section 508 and Section 255 of the Communications Act, and provides a framework to help Federal agencies comply with accessibility requirements, making all government websites fully accessibility
Vision impairment isn’t the only disability
The most common accessibility issue addressed by designers is vision impairment. From users that are totally blind, to those with color blindness or high-contrast requirements, vision impairment is a core focus for designers.
But vision impairments make up only a fraction of accessibility cases.
Also plan your designs for cognitive impairments, mobility loss and hearing impairments. Only when you develop for as many scenarios as possible, is your website truly accessible.
Among the more important items we believe are vital to a focused accessibility-first development process are:
- HTML passes parsing validation. This is especially important for non-visual users since improper code is more difficult to interpret.
- Screen interactions do not require the use of a mouse. Instead, all functionality is available using a variety of input devices (keyboard, touch, mouth stick, etc.).
- The contrast between text and the background meets a minimum ratio of 4:5 to 1 for normal text and 3 to 1 for large text. This is especially helpful for users with low vision.
- All images use an alt attribute that provides useful and accurate alternative text. For decorative images, the alt attribute value is null (alt="").
- Heading structure is accurate and consistently used across pages. Starting with a single H1 these headings outline the structure of the page without skipping levels.
- Tab paths are consistent and predictable.
- All form elements have appropriate, programmatically-linked labels.
- Users can skip sections of the site using "skip links". This is especially important for the heading and top navigation.
- Users are able to control or skip video, or other moving content.
- Closed captions, descriptive audio, and transcripts are provided as appropriate.
- Additional accessibility tests are passed successfully as appropriate.
Web Developer Checklist for Accessibility
There are many accessibility tools you can use to test your site. iSoftStone uses a variety of tools to test a mix of accessibility issues. When you find a tool that you love, stick with it for the entire testing process.
General accessibility tools
- Accessibility Insights for Web
Accessibility Insights for Web is a Chrome extension that helps developers find and fix accessibility issues in web apps and sites. The tool supports two main components.
Testing apps available for Chrome, Firefox, and Android. Coming soon to iOS. The axe scan engine is what Microsoft's Accessibility Insights tools check against.
- Nu Html Checker
Parse HTML for correct formatting by entering HTML or a URL.
Tenon website allows you to enter a URL to test or paste code directly for analysis.
- WAVE (Web Accessibility Evaluation Tool)
The WAVE Chrome and Firefox extensions allows you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers. (WAVE also offers other tools including an enterprise-level tool that provides monitoring and reporting of accessibility over time.)
- a11yTools Safari macOS by Paul J. Adam
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in an Extension for Safari used for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error to developers and designers.
- a11yTools for iOS by Paul J. Adam
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location on your iPhone and iPad for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and easily take a screenshot on your phone showing the a11y error to developers and designers.
Color, contrast, and vision
- Color Contrast Analyser by Paciello
The Colour Contrast Analyser (CCA) is a desktop application for Windows/macOS that helps determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. Includes WCAG 2.1 compliance indicators, entering colors or using a color picker, alpha transparency support, and a colour blindness simulator.
- Color Contrast Tester by Joe Dolson
Enter foreground and background colors in Hex, RGB, or HSL and see WCAG compliance results.
Funkify is an extension for Chrome that helps you experience the web through the eyes of some extreme users with several different abilities and disabilities.
- Gunning Fog and Flesch Reading Ease Test. Reading-ease tests determine how easy copy is to read and understand. The easier copy is to understand, the more accessible it is - especially to users with cognitive impairments. Remember, users the rely on a screen reader face stressful cognitive loads on some pages – easy-to-read copy helps them navigate a site.
- Bookmarklets for Accessibility Testing
- Diagnostic.css by Karl Groves
Diagnostic.css is a CSS (Cascading Stylesheets) file which, when applied to a web page, will highlight accessibility errors in the page.
Client-side script that checks HTML source code and detects violations.
Other accessibility tools & testing resources
- Powermapper Assistive technology compatibility tests
Shows results from using various combinations of ARIA, HTML, browsers, and screen readers. This provides insights into expected success and failures.
- GitHub - paypal/AATT: Automated Accessibility Testing Tool
Integrate accessibility testing into your existing automation test suite using AATT. AATT includes HTML CodeSniffer, Axe and Chrome developer tool with Express and PhantomJS, which runs on Node.
- My Post-CSUN Comparison of Web Accessibility Checkers | Terrill Thompson
- Pa11y - Your automated accessibility testing pal
A range of free and open source tools to help designers and developers make their web pages more accessible. Much of it applies to testers as well.
- Laws and checklists for testing accessibility (slide show) by Paul J. Adam
iSoftStone Web Accessibility Testing Process
There are 4 basic steps in testing:
- Define what will be tested. We call these "core scenarios", or the most common user flows in the product, app or website. Include any "gating" flows such as the user having to log in, sign-up, or purchase.
- Build a Testing Matrix. There is a wide variety of test tools and browsers, and not all work together. Build a testing matrix that defines combinations of platform, operating system, and versions for testing. These combinations determine what software can be used for accessibility testing.
- Run automation tools on the product.
- Manual testing conducted by trained accessibility testers.