Accessibility for Web- Tools, Checklist & Best Practices
What is Web Accessibility?
Accessibility means the ability of everyone regardless of their condition to have access to something.
Accessibility Checklist
Designers
- Make sure there is enough contrast between the text and its background color
- Don’t indicate important information using color alone
- Don’t rely on sensory characteristics as the sole indicator for understanding and operating content
- Design focus states to help users navigate and understand where they are
- Help users understand inputs, and help them avoid and correct mistakes
- Write good alt text for your images
- If an experience cannot be made accessible, create another route for users to get that information
- Be as consistent and clear as possible in layout and copy
Engineers
- Use the correct HTML element for your content
- Support keyboard navigation
- Understand and use HTML landmarks
- Write good alt text for your images
- Design focus states to help users navigate and understand where they are
- Help users understand inputs, and help them avoid and correct mistakes
- Use ARIA attributes when applicable
- Give users a way to skip top level navigation to access main content
- Make links descriptive
- Avoid images and iconography in pseudo-elements
- Make SVGs accessible to assistive technology
- Hide decorative elements from screen readers
- Links should be visually identifiable and have clear :focus and :active states
- HTML document should have a language attribute
- Use unobtrusive JavaScript (never use inline scripting).
- Check document outline — Use semantic headings and structure
- Make sure placeholder attributes are not being used in place of label tags. An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)
Project Managers & BAs
- Familiarize yourself with the work associated with making content accessible
- Build in time for accessibility during project planning and sprint planning
- When sharing good work done by your team, praise efforts to increase accessibility
- Be an advocate for accessibility
Quality Assurance
- Run through each page with the WAVE Chrome Extension/Sort site.
- Users should be able to navigate through content using their keyboard.
- Users should be able to navigate content using a screen reader.
- The general architecture and hierarchy of the content should make sense.
- Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images.
- Decorative images should not be visible to screen readers.
Testing Tools & Validation
Use these tools to help make your work accessible:
W3C Techniques for providing useful text alternatives
http://www.w3.org/TR/html-alt-techniques/
Get Mayank Kapahi’s stories in your inbox
Join Medium for free to get updates from this writer.
WCAG 2.0 guidelines to review best practices: http://code.viget.com/interactive-wcag/#responsibility=design&level=aa
FANGS — The screen reader emulator
http://www.standards-schmandards.com/projects/fangs/
Web Accessibility Checker to check accessibility across your products: http://achecker.ca/checker/index.php
Text over images accessibility tool:
http://www.brandwood.com/a11y/
HTML, CSS Validation
- Firefox Extn. for HTML Validation https://addons.mozilla.org/en-US/firefox/addon/html-validator/
- Online HTML Validator
https://validator.w3.org/nu/ - CSS Validation
https://jigsaw.w3.org/css-validator/#validate_by_uri+with_options
WCAG Accessibility testing
Wave Evaluation tool for Chrome
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
WAT for IE https://github.com/ThePacielloGroup/WebAccessibilityToolbar/releases/tag/2015-05-20
Online Tools
http://www.508checker.com/
Web Accessibility Checker to check accessibility across your products: http://achecker.ca/checker/index.php
Web Developer Toolbar
https://chrispederick.com/work/web-developer/
Color and Contrast
Normal text: below 14pt bold or 18pt normal:
- AA: 4.5:1 (aim for this)
- AAA: 7:1 (but this is better)
Large text: 14pt bold or 18pt normal, and above:
- AA: 3:1 (aim for this)
- AAA: 4.5:1 (but this is better)
Color Contrast Analyzer App to analyze color contrast: https://www.paciellogroup.com/resources/contrastanalyser/
Color Palette Accessibility Checker to automatically check color combinations for passing contrast:
https://accessibility.oit.ncsu.edu/tools/color-contrast/
Color Extractor bookmarklet to find all colors in CSS and load them in the Color Palette Accessibility Checker: https://accessibility.oit.ncsu.edu/tools/color-extractor/
Color Safe to make accessible color palettes:
http://colorsafe.co/
Color Oracle to simulate color blindness:
http://colororacle.org/index.html
Sim Daltonism to simulate color blindness: https://michelf.ca/projects/sim-daltonism/
ZoomText
- Resize text and make sure everything on the page works. Repeat until you get to 200% zoom.
Test for different types of color blindness
Deuteranopia, Protanopia & Tritanopia
Check comprehension level
People with cognitive disabilities often struggle with reading text on the Internet. When writing content, it is important to identify your target audience and write accordingly.
Here are some tools to test your content:
- Read-able.com
- Readability Test — Juicy Studio
- Test your document’s readability — Microsoft Office
- Hemingway Editor
- Choose your words carefully — plainlanguage.gov
- Datayze Readability Analyzer
- xkcd Simple Writer
👏🏻Clap if you enjoyed the article
