20 - November - 2017

A Dummies Guide To Web Accessibility

Post by Josh W Josh W

The web can be a daunting place for those with a disability. Web accessibility aims to reduce those fears and create an environment in which everyone can thrive.

Recently, I attended a day of training on website accessibility hosted by Drupal core accessibility maintainer, Andrew Macpherson. The day was packed with information and it really conveyed how difficult the web can be to use for someone with a disability.

To start things off we dove right into how to use the online resources for WCAG (Web Content Accessibility Guidelines) and to do this we needed to know a few things:

  • The guidelines are graded at three different success criteria, levels A, AA, and AAA. The higher the level (AAA being the highest), the more constrictive it is on the design process; you thought having that fancy dropdown would be a good idea? Well, it doesn’t conform to AAA guidelines.
  • The guidelines are organised under what is considered the four principles of accessibility: Perceivable, Operable, Understandable and Robust (POUR).
    Perceivable means that a user can perceive the information being purveyed on the site without any difficulty. Operable means that the components and interface of a site are easily navigated. Understandable means that users need to be able to understand the information and interface. Robust means that content must be solid enough that it can be interpreted reliably by a range of assistive technologies.

Only 25 guidelines need to be met in order a level A, as demonstrated by this checklist tool, this is considered the baseline for accessibility and all sites should aim for it. Picking out a guideline at random, 1.3.1 Info and Relationships, an example of success criterion for this is to use labels for checkbox inputs, a label can be related to a checkbox by using a for the attribute in the label’s markup. The for attribute specifies which form element a label is bound to, this is so simple to implement and it greatly benefits users who have to rely on a screen reader - Drupal provides this functionality by default.

As for things that shouldn’t be done when designing for accessibility, there is a blog posted on the UK Government website relating to this exact topic.

Moving on, Andrew later covered the tools web developers can incorporate into their workflow to make the sites they develop more accessible:

  • WAVE Evaluation Tool is a great one to have, it produces a concise report on the structure of a web page. I find it particularly useful for the colour contrast report.
  • NoCoffee simulates what it is like to have some forms of colourblindness and blocked visual fields.
  • ChromeVox is not necessarily built for developers, but it can be quite handy to know what screen readers will say aloud.

Axess Lab has a great article with real world examples of issues experienced by users who rely on assistive technologies. It really illustrates how difficult the web can be to use for many people.

Finally, we were let loose to browse any website we wanted, but there was a catch, we could only use the keyboard and a screen reader to navigate. At first, this challenge was difficult, I found that I was focusing more on how to use the different hotkeys to navigate a page than I was on the content. It definitely brought attention to the sites that weren’t considering all options when building for accessibility, to name one, The Guardian has a focus state that is very difficult to see on the menu items - no doubt this would be more difficult for users who struggle with sight. On the whole, it was a great day of training led by Andrew, many of the techniques and tools mentioned will now be considered when building a site.

Josh W

Josh W

Support Technician

Add new comment

Share this article

Our thoughts

Let's work together

Get in touch and find out how we can empower your organisation.
Back to top