Introduction
Accessibility is one of the most important aspects of modern web development. Accessibility means the greatest number of users can view your content. It means search engines will be able to read your site more completely. Users of all types will have a better experience if you take accessibility concerns into account. And least of all, it’s required by law for all federal EIT (electronic information technology) products to be accessible (with a few minor exceptions).
Accessibility works best when incorporated into an agile production environment. It’s very hard to adequately address accessibility concerns at the end of a project, but if taken into account at the beginning, it’s quite straightforward and cost effective. The best and perhaps only way to ensure this is done is training and education. Every member of a production team should be aware of what accessibility concerns are and have a basic understanding of how they’re addressed.
Here at Skylight we follow Web Content Accessibility Guidelines (WCAG) 2.1 as our standard for accessibility. We do so for a couple reasons. WCAG has long been the gold standard for accessibility on the web. It also incorporates Section 508 standards. Under 1194.5 of the Section 508 standards, we can use a different set of standards as long as they meet the current Section 508 standards.
Disclaimer
This resource is intended to help Skylight develop accessible products and isn’t a replacement for the standards defined by the U.S. Access Board. Please visit the Access Board for information on 508 and their compliance criteria.
This toolkit is a fork of 18F’s accessibility guide originally created by Skylight’s Nick Bristow.
Resources
Standalone testing tools
- Lighthouse CI — command-line interface for Google’s Lighthouse test suite
- JAWS Screen Reader — one of the most-commonly-used screen readers
- Accessibility Insights — Windows application for automated and guided-manual testing for accessibility, including WCAG 2.0 and 2.1
- Colour Contrast Analyser — Mac and Windows application for testing color contrast against WCAG 2.0 and 2.1 guidelines
- Pa11y — open-source tools for automatically testing and highlighting accessibility issues
- Tenon — suite of automated accessibility testing tools
- Tanaguru Contrast Finder — open-source tool for finding better color contrast options
- Accessible Color Palette Builder — open-source tool for finding accessible color combinations
- Windows NVDA Screenreader — free tool for testing non-visual access
Browser-based testing tools
- Chrome/Edge: Accessibility Insights — browser plugin for automated and guided-manual testing for accessibility, including WCAG 2.0 and 2.1
- Firefox: WCAG Contrast Checker — browser plugin for evaluating CSS color contrast
- Chrome: Color Contrast Analyzer — browser plugin for evaluating color contrast, including images and gradients
- Chrome: Lighthouse — built-in feature of Chrome DevTools for improving the quality of web pages, including accessibility
- Firefox/Chrome: WAVE Toolbar — browser plugin for evaluating web content accessibility issues
- Firefox/Chrome: Web Developer — extension that adds various web developer tools to a browser
- HTML CodeSniffer — open-source bookmarklet tool for analyzing a page’s HTML source and detects coding-standard violations
Government sites and tutorials
- Section 508
- Accessibility for Teams
- Skylight Accessibility Checklist
- GSA’s Section 508 Policies
- Creating Accessible PDFs
- Required Fixes for PDFs
World Wide Web Consortium’s web accessibility initiative
- WCAG
- How to Meet WCAG (Quick Reference)
- Web Accessibility Tutorials
- ARIA in HTML
- Web Accessibility Evaluation Tools List
Misc. sites and tutorials
- Inclusive Components
- WebAIM’s Blog
- The Accessibility Project
- Knowbility’s WCAG 2.1 Blog Series
- Simply Accessible
- WebAIM’s Accessibility Resources
- Tips for Creating Accessible SVGs
- Udacity Web Accessibility Course
- Viget WCAG 2.1 Blog Post
- Vox Accessibility Guidelines Checklist
- CanIUse.com
- New Zealand Web Accessibility Standard 1.1