2021 is an exciting year and not just because we will hopefully see the back of Covid!
W3C will be publishing the latest iteration of the Web Content Accessibility Guidelines aka WCAG. WCAG 2.2 builds on the previous two versions of the guidelines (2.0 and 2.1), adding 9 new success criteria and reclassifying one from Level AA to Level A. First published in December 2020, it is now open for comments until March with the final recommendations expected to be published in July.
Let’s explore the new success criteria (SC) in a bit more detail….
Until now, focus (the line that appears around the active element on the page) has been a requirement (see SC 2.4.3 Focus Visible) but the appearance of the focus has not been specified. SC 2.4.11 resolves that issue by requiring the focus indicator to conform to specific size and colour criteria:
- Minimum area: the focus indicator should be as big and bold as you can possibly make it. WCAG have provided some wonderfully complex calculations to help you work out the minimum area of the focus indicator, if you are that way inclined. We would recommend striving for a lot more than the minimum and providing a solid outline around the whole page element.
- Colour contrast: any focus indicator needs to have a colour contrast of at least 3:1 when compared to both the surrounding background colour and the original colour of the button or link.
The element on the page that has focus should also not be obscured by any other content, such as sticky headers and footers.
The AAA version of focus appearance takes the previous SC one step further, specifying a larger focus area and a 4:1 minimum colour contrast.
SC 2.4.13 is a fairly niche one that is likely to apply primarily in academic and learning environments. References within online documents often refer to specific page numbers. When viewed at high magnification levels, the content referenced may no longer appear on the same page as it adapts and responds to the new style of presentation i.e. what was on page 37 may now sit on page 53. This SC requires the references to also adapt so that clicking on it will take users to the correct content, even if it is not on a different page.
This new SC is straightforward enough – an action that requires dragging, such as a drag and drop file upload or the sorting of a list, should also be achievable with a single click. In our examples, this would mean a single ‘upload file’ button should be available and up/down arrows are present to allow a list to be sorted.
Links, buttons or interactive elements that are close together can be a pain for many users, especially on small, touchscreen devices. SC 2.5.8 aims to mitigate that problem by increasing the spacing between interactive elements and protecting a square of “at least 44 CSS pixels” around them. This will reduce the chances of users hitting the wrong link or button by mistake.
There are a few exceptions, including links within a block of text, where the presentation is essential and if the user has the ability to control and increase the size of the target themselves.
Providing help on your website is good for all users, whether or not they have a disability, so this SC feels like a no brainer. If support is offered, either via a human, a chatbot or up to date FAQs, users need to be able to access this support quickly and easily on every page of a website. This means it should be consistently located so users always know where to look.
Common examples include a chat feature in the bottom right-hand corner of the page or a phone number that is consistently visible in the header.
Hiding interactive page elements that users may need to progress through a site is never a good idea and this SC is here to put a stop to it. If users are required to hover over a page element before they are shown a menu, for example, many are unlikely to find it. For those with a cognitive disability this might leave them “without a path forward”. SC 3.2.7 requires controls to be persistently visible at the time they are needed – that means no hiding them behind sexy but meaningless graphics!
SC 3.3.7 is all about making online account logins as easy and accessible as possible. Remembering and entering a password is considered to be a “cognitive function test” and may be almost impossible for some users. More broadly, for those of us trying to maintain good data security, remembering hundreds of unique, difficult to guess passwords is a tall order that even the brainiest of us would struggle with.
To overcome this issue, website logins should not limit users from using password managers or copying and pasting passwords into the relevant fields. Two factor authentications, if required, should also be accessible and not reliant of cognitive function tests i.e. remembering key information.
Making it easy for users to complete forms is key to a good user experience for everyone. One of the easiest ways to smooth this process and save users time and effort is to auto-fill fields when the information has already been provided. For example, auto-populating the shipping address fields with the details you have already provided at the billing address stage saves re-entering this information and halves the chance of errors occurring.
Like v 2.0 and 2.1, WCAG 2.2, continues to push us in the right direction towards a more accessible online world. The focus this topic now receives is testament to the shift in attitude we have witnessed over the last couple of years. With the public sector leading the way, we hope more organisations will continue to add accessibility to their list of 2021 priorities and make their digital services open to all.
Reference: What’s New in WCAG 2.2 Working Draft