Website evaluation tool
Any accessible website must … #
- use semantic-, standards-based HTML,
- apply accessibility best pratices (which is a wide field), and
- be fast.
Tools #
The table below is listing tools to check a website for compliance in the named areas.
| Category | Tool | Comment |
|---|---|---|
| HTML | W3C Markup Validation Service | Check HTML standard compliance |
| HTML | Switching off CSS | A good check for semantic HTML is to switch off CSS in the browser. The document should be usable and readable even without CSS attached. |
| Accessibility | Firefox Accessibility Inspector | Check the entire web page for visual contrast, navigation via keyboard, missing text labels, and visualize tabbing order. It also has a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency, as well as contrast sensitivity loss. |
| Accessibility | WebAIM WAVE | Check accessibility patterns |
| Accessibility | WebAIM Contrast Checker | Check contrast of two colors |
| Accessibility | Colorslurp | Check contrast of two colors. Desktop tool for Mac. |
| Accessibility | Color Contrast Accessibility Validator | Check contrast of an entire web page |
| Performance | Lighthouse PageSpeed Insights | Check web page performance. A Lighhouse analysis can also be started through the Chrome Developer Tools, where it is available as a dedicated top-level menu entry. This allows to analyse a website running locally on the developer machine. |
References #
- Adam Silver, Semantic HTML and ARIA explained
- kulturbanause, HTML-Elemente und Semantik
- MDN, Semantics