Are you ready for WCAG 2.1?

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

Contact us to find out more about how Jadu can help you with your website redesign and accessibility.

Jack Niland, User-Experience (UX) designer from Spacecraft, Jadu's partner for strategic digital design, 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.


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 3 levels to the guidelines; A, AA and AAA, with each level incorporating the rules of the last and adding some more.

WCAG is 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 US and the Disability Discrimination Act in Australia all adhere to AA.

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 User Interface (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 requires two fingers, must have an alternative that can be completed with one finger, such as double tapping.

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, 1 of the following 4 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.

For 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, they 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, such as screen readers.

4.1.3 Status Messages (Level AA)

This guideline states that any updates to a page must be communicated to users of assistive technologies without interrupting them. The sort of update to the guideline is referring to 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.

Contact us to find out more about how Jadu can help you with your website redesign and 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?”

  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