Skip to content
English

Accessible Design: a process

Web accessibility aims to create an online space that is available to everyone, and a key part of that is designing websites and software that are flexible for all user needs.

Posted on in Accessibility

It not only helps to deliver content to more people, but small improvements such as the correct semantic use of HTML, CSS and JavaScript will make websites more robust and better prepared for future technologies.

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.

for designers

  • 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

On fonts

  • 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

Recommended fonts

  • 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:

Additional Resources

Recommended reads and presentations digging deeper into accessibility guidelines for designers, and providing practical and applicable information on designing a more accessible web.

You can catch Rian at WordCamp US this December 1st in Nashville where she will be discussing Accessibility Testing, Tools & Workflow.