Tools of the trade: Accessibility and Validation
Useful tools for blogs and websites. Part 6.
Accessibility is very important to me, and I like to make sure that each web page I build is optimised for readability and supports screen readers.
There is a lot to read and research about accessibility, inclusive websites, and accommodation and I definitely suggest the following websites as a starting point on accessible design:
- Web Content Accessibility Guidelines (WCAG) 2.2.
- W3 Schools accessibility tutorial.
- Website best practices.
- Accessibility principles for ICT.
That is a lot to absorb, so here are some quick and dirty shortcuts that can be used a walk-through:
- Cloudflare Color. A tool create or import a palette and preview multiple depths of accessible combinations against a set of UI elements.
- Colorsafe. Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Accessible links: Easy to spot, descriptive, reader-friendly
Make your page screen reader friendly
- Always add alt text to your images.
- Take a look at these rules for sensible ARIA usage.
- Have a screen reader read web pages for you:
- Windows: NVDA, Narrator.
- Linux: Orca.
- macOS, iOS: VoiceOver.
- ChromeOS: Chromevox.
- Android: TalkBack.
- Consider using system fonts as they are optimised to be more readable.
- Here is a list of other fonts that are easy to read.
Validate your website!
- W3C Markup validator service.
- Web Accessibility Evaluation Tool.
- Use the a11y project validation checklist.
Previously in Tools of the trade
- Part 1: TinyPNG
- Part 2: Joplin
- Part 3: Royalty-Free images
- Part 4: Stretchly
- Part 5: proof-reading with Grammarly and Hemingway