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:
Accessible contrast
- 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.
Fonts
- Consider using system fonts as they are optimised to be more readable.
- Here is a list of other fonts that are easy to read.