Website Accessibility
By Kasey Kruser
An accessible website doesn't exclude visitors due to their abilities or the method they choose to access the web. Accessible content helps people with disabilities and people with limited internet, old technology, or who speak a different language.
Strive to provide web content that meets accessibility guidelines as defined by the World Wide Web Consortium (WC3) Web Content Accessibility Guidelines (WCAG).
Criteria for an Accessible Site
Writing for Web Accessibility introduces some basic considerations to help you get started writing web content that is more accessible to people with disabilities.
- Images. Use the “alt” attribute to describe the function of each visual.
- Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
- Keyboard controls. Make sure every control on the page is usable with keyboard commands. Does “Tab” get you to everything? Is it obvious where the focus is and how controls work?
- Links. Use text that makes sense when read out of context. For example, avoid “click here.”
- Meaningful Links
- Brief Links
- Don't open new windows: External Links, New Tabs, and Accessibility
- Page organization. Use headings, lists, and consistent structure.
- Color. Sufficient contrast between text and background helps the visually impaired as well as those using devices in bright sunlight, though too much contrast can hurt readers with dyslexia.
- Check color contrasts and get suggestions for improvement: Tanaguru Contrast Finder (4.5 minimum ratio meets WCAG Level AA; 7 meets AAA)
- Graphs and charts. Summarize.
- Scripts, applets, and plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
- PDF files. HTML is always the preferred format for web documents. If you use PDFs, be sure they are not just images of text or captured but non-edited text.
- Frames. Do not use frames. Frames have many accessibility and usability issues.
- Tables. Use tables for structured data, not for layout. Make line-by-line reading sensible, add a caption, and summarize.
- Forms. Use the label attribute and review your form's instructions and keyboard controls.
Testing a Page
These tools are mostly for use by web developers, but non-coders can use them to see how many accessibility errors a page has (and how seriously they're rated). When hiring a developer or considering a web product, ask about their WCAG compliance and check samples of their work.
- The Web Developer extension adds web developer tools to a browser, allowing you to easily turn off styles or scripts.
- The Axe Chrome extension lets you inspect a page to find errors. Reporting includes links to more information on the requirement and inspection tools that help pinpoint the site of the problem.
- Cynthia Says is designed to identify errors in your content related to Section 508 standards and/or the Web Content Accessibility Guidelines (WCAG).
- Functional Accessibility Evaluator checks for violations and gives a tabular view. Check HTML5 and Accessible Rich Internet Applications (ARIA) techniques or HTML4 legacy techniques.
- WAVE Web Accessibility Tool displays checks visually over the website itself.
Learn More
- 6 Surprising Bad Practices That Hurt Dyslexic Users: Web accessibility doesn’t only extend to color blind users, but dyslexic users too.
- Seven Screen Reader Usability Tips
- Simple Usability Tips with Samples
- Disability & Accessibility for Congregations