Building a site

How to make a project with Visual Framework components.

Accessibility guidelines

Users with a visual, motor or cognitive impairment are far from rare.

Starting guidance on how to make your web site and Visual Framework components more accessible.

Reality

People vary in their ability to see, hear, read text and use the mouse. For example, at least 1 in 5 people in the UK have a long term illness, impairment or disability that may make it harder for them to use a website. Many more have a temporary disability.

So when we think about making a quality website, we should focus beyond technical performance metrics, bugs and good looks. The standard of quality should also include usability and accessibility so that the site can be used by as many people as possible.

For Visual Framework sites we recommend the WCAG 2.1 AA accesibility level. This is both the legal level required by the European Union (and other national governments) and it is a level that should impose a reasonable amount of effort on develop and design. As the Digital Accessibility Centre summarizes: “AA is accepted as a very good commitment to accessibility”.

Sidebar: what-a-cag?

Read at all on web accessibility and you'll see: "WCAG", "AA" and "AAA". The Web Content Accessibility Guidelines (WCAG) is set of widely recognised recommendations for making websites and apps accessible to people with disabilities. The WCAG primer explains these guidelines and how to use them.

An accessible start

This is not a topic we can fully cover in 1000 words, so how can you get started?

  1. Good: Use an automated testing tool
  2. Better: Refer to checklists
  3. Best: Real human testing

Automated tools

You can find many more tools at The Accessibility Project.

Automated online tools and browser extensions can help immensely, but they are not everything. We need also to spend time familiarising ourselves with the challenges and techniques, read on for more ideas and approaches.

Checklist

In addition to lots of good advice, The Accessibility Project has a comprehensive checklist. This checklist uses WCAG as a reference point and can help you check your WCAG compliance. Although the checklist cannot guarantee that your site is accessible, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.

Real humans

When working with your UX colleagues (or doing your own UX planning and testing) spend time trying to recruit testers and participants who have impairments.

In conclusion ...

And remember it's about more than colour: Often discussed is the AA and AAA accessibility of colour contrast but accessibility is equally about type size, spacing and if text can be read aloud.

Related

Also in this section

More from the Building a site section

Browser support

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

Components are part of patterns

Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.

Content guidelines

Unique to the web are certain types of content that support user interaction.

Find an issue on this page? Propose a change or discuss it.