Authored by Rian Rietveld
Everyone needs to play their part in making the web accessible; from developers to editors, to designers, theme builders, and content creators. This is a brief overview of practical approaches and best practices to implement in a design workflow.
- Ensure there is sufficient contrast between text and background colours
- Fonts should be made as thick as the design allows, and not be too thin
- Use more than just colour to highlight information
- Make links stand out in sentences by underlining them
- Provide one clear and unique title per page (h1)
- Use borders for input fields and provide them with visual labels
- Provide three ways to find and navigate content, such as;
- a consistent menu
- a search field
- a sitemap
- Avoid using capitalised text
- Avoid using animation that can’t be controlled or stopped by the user
- Use real text rather than text within graphics
- Select basic, simple, easily-readable fonts
- Use a limited number of fonts
- Avoid small font sizes: use 16px or larger, depending on the font
- Don’t rely only on the appearance of the font (colour, shape, font variation, placement, etc.) to convey meaning
- Review your branding colours for adequate colour contrast with the background colour, before you use them in a web design. All text must have a high colour contrast, including headings and text placed on images
- Use standard fonts, natively available in the browser for content text
- For online reading, sans-serif fonts (e.g. Arial, Verdana) are generally considered more legible than serif fonts (Times New Roman), narrow fonts or decorative fonts. Decorative and narrow fonts, in particular, should be reserved for headlines and decorative texts only
Guidelines: WCAG 2 AA
Web accessibility is the degree to which a website is usable by as many people as possible, and different levels of accessibility are defined by their own standards. Depending on whether a site is being used as a governmental or public service, a different set of legal requirements will apply and the WCAG 2 AA (Web Content Accessibility Guidelines, version 2, level AA) could be a strict requirement.
You can check the requirements in your countries of business using services like PowerMapper.
Testing for colour contrast
When you’re building and designing your site to be accessible, it’s good practice to test the accessibility throughout your entire workflow.
Colour contrast ratio between text and background must be;
- 4.5 or more for normal text
- 3.1 or more for larger text of at least 24 pixels or 19 pixels bold
Note: Colour contrast rules do not apply to text that is embedded in a (company) logo.
Here are some useful tools for testing colour contrast:
- WebaXe – Broad overview of tools
- Snook – Colour contrast checker
- ColorA11y – Colour contrast browser extension for Google Chrome
- Sim Daltonism – Colour blindness simulator
Recommended reads and presentations digging deeper into accessibility guidelines for designers, and providing practical and applicable information on designing a more accessible web.
- Inclusive Components
- Inclusive Design Patterns by Heydon Pickering
- Inclusive Design Checklist by Heydon Pickering
- Web Accessibility for Designers
- 7 Things Every Designer Needs to Know about Accessibility – Jesse Hausler
- Writing accessible content – Sami Keijonen
- 6 Principles Of Visual Accessibility Design – Jenna Erickson
- Designing for Accessibility, Step 1: Colour Contrast – Neil Shankar
- Accessible Design – Maja Benke (presentation)
- Accessibility for everyone – Laura Kalbag (book)
- WebAIM: on fonts
- Pennsylvania State University: about Font Face
You can catch Rian at WordCamp US this December 1st in Nashville where she will be discussing Accessibility Testing, Tools & Workflow.