Are you ready for WCAG 2.1 Accessibility Guidelines?

This summer the Web Content Accessibility Guidelines (WCAG) will be upgraded, helping to make the web more accessible than ever.

Jack Niland from Spacecraft, Jadu's web agency partner takes us through the new guidelines and how they may affect you and your website. Jack also runs accessibility training courses for up to 8 members of your team which will cover the new guidelines, get in touch if you want to find out more. 

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are a set of testable rules, that when followed, help remove barriers that otherwise could stop people with disabilities from using the web. There are three levels to the guidelines; A, AA and AAA, with each level incorporating the rules of the last and adding some more. 

WCAG are used internationally to help measure the accessibility of a site, for example the EN 301 549 Directive in the UK, the Section 508 Amendment in the USA and the Disability Discrimination Act in Australia all adhere to AA. As most of our clients adhere to AA we will primarily be looking at A and AA guidelines in this blog.

How 2.1 is different from 2.0?

The new 2.1 guidelines are an extension to the 2.0 rules we have always followed. None of the 2.0 rules have changed, they all still apply, we just have some new guidelines to make our sites more accessible. 

One area that 2.1 concentrates on more is mobile. Since 2.0 was published in 2008 mobile habits have changed and in 2016 mobile usage overtook desktop worldwide for the first time.  People want to use their mobile devices for more and more online transactions and 2.1 reflects this.

The new AA 2.1 Guidelines

Perceivable
Information and user interface components must be presentable to users in ways they can perceive.

1.3.4 Orientation (Level AA)
Content must not be restricted to a single orientation, such as portrait or landscape in mobile use.


1.3.5 Identify Input Purpose (Level AA)
This guideline refers to the purpose of a field input being identified by assistive technology. For example if the input purpose of a form can be identified then a browser's autofill options will allow a user to fill it out quickly.

A form being autofilled
 

1.4.10 Reflow (Level AA)
This guideline refers to users having to scroll horizontally to access content, which can be a pain for anyone, especially people that zoom in to view content. This guidelines also specifically states websites should be able to fit a 320-pixel wide screen and users should also be able to zoom-in up to 400% on desktop browsers.

It is worth noting that there are exceptions for sites that often require horizontal scrolling like maps.

A mobile device in landscape orientation showing a map

1.4.11 Non-Text Contrast (Level AA)
Similar to how we test text for contrast ratio this new guideline means we now will also check the contrast level for UI elements like buttons and graphical elements.

For example in this image the ‘Yes’ and ‘No’ text passes colour contrast, as does the blue button on the grey background. However the grey button on the grey background would fail colour contrast.

Example of two buttons

One of the tools we use here at Spacecraft is the Web aim contrast checker.

1.4.12 Text Spacing (Level AA)
When people use assistive technology to alter the view of a website sometimes elements can overlap. This guideline is in place to stop that, users must be able to change the space between text without losing any functionality.

1.4.13 Content on Hover or Focus (Level AA)

  • This guideline tackles some of the more annoying habits of modern modals and pop-ups: 
  • The content should not disappear when the user hovers away from it
  • The user should be able to dismiss the content when they want to
  • The content can be dismissed without moving the focus or mouse

So for example if a mouse icon covers a tooltip, the user can move their mouse and still see the tooltip information.

Example of a tooltip

Operable 
Users are able to interact with interface components, forms and navigation

2.1.4 Character Key Shortcuts (Level A)
If a website has any keyboard shortcuts this guideline states that they:

  • Can be turned off
  • Can be changed to require pressing additional keys such as Ctrl
  • Should only be active when the element that uses them has focus

2.5.1 Pointer Gestures (Level A)
This is another mobile based guideline, it states that gestures must be accessible to a single pointer. In the context of mobile the pointer is your finger, so gestures such as pinching to zoom that require two fingers must have an alternative that can be completed with one finger, such as double tapping for example.

2.5.2 Pointer Cancellation (Level A)
Another guideline on pointers, this time around cancelling. This one is slightly more complex and states that for any action that can be completed with a single pointer one of the following four conditions must be true:

  1. There is no down event - The down event is something that is triggered as soon as you press down or click on the input, so if you pressed down on your mouse and the event is triggered before you lift your finger.
  2. Abort or undo is possible - When you lift your finger off the mouse after pressing this is called the up event. The up event must trigger the action and the user must be able to undo it. One example of the up event executing a function is drag and drop, when you drop the content you are executing an up event. For the undo to be possible the user should be able to cancel the action by releasing the up event when it is not over the target drop zone.
  3. Up reversal is possible - Imagine you press down on a button on your touchscreen but decide you don’t want to activate it, so you slide your finger away from the button and release. When you release, the button action must not be activated. This is up reversal.
  4. It is essential to complete the function on the down event - For example it would be unnatural for a piano app if when you pressed the keys they did not make a sound.

2.5.3 Label in Name (Level A)
For any web element with a label it must match the accessible name. This guideline can benefit people using speech input software.

Take this example; if the labels stated only view then when a person using speech input software said “View Green bin” the software would not know which link to open.

Three images of bins titled green bin, black bin and blue bin, each with a view button

2.5.4 Motion Actuation (Level A)
Any functions that are done using motions, such as shaking your phone, must have an alternative accessible way of completing them. Users must also be able to turn off any motion functions.

Robust 
Content can be interpreted reliably by all software utilised to access and use websites (e.g. screen readers)

4.1.3 Status Messages (Level AA)
This guidelines states that any updates to a page must be communicated to users of assistive technologies without interrupting them. The sort of updates the guidelines are referring to are form errors such as ‘invalid postcode’. This is to assist low vision and screen reader users.

2.1 a more usable web for all
So there are all the A and AA guidelines in 2.1. Making our sites more accessible removes barriers and makes them more usable for everyone.

Let us know what you think of 2.1 in the comments and, as WCAG update the guidelines, please let us know if we need to update this post.

Read more on accessibility.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Make a comment



There is one response to “Are you ready for WCAG 2.1 Accessibility Guidelines? ”

  1. Neil Lawrence Says:

    This is a really clear, helpful article - thanks. A missing image where the text says "For example in this image the ‘Yes’ and ‘No’ text passes colour contrast, as does the blue button on the grey background. However the grey button on the grey background would fail colour contrast."

Share this post

About

The official Jadu Blog (a peek inside). The musings and magic of the Jadu team and log of new web apps, customer super hero stories and mobile web marvels.

Recent posts

Archives

Tags