The purpose of web accessibility is ensuring that everyone can access the content, services and information they need on the internet, at the time that they need it. We’re here to update you on the latest guidelines and make sure your website is accessible as possible to the broadest possible audience.
W3C Guidelines 2.2
The W3C, The World Wide Web Consortium, is the main international source for web accessibility standards, and it’s used by digital designers, developers and marketers to stay up to date with best practices when it comes to digital accessibility.
In April 2023, W3C released Web Content Accessibility Guidelines (WCAG) version 2.2 which helpfully defines the criteria to meet in order to make web content accessible. These guidelines take into consideration the needs of all people including those with auditory, visual, physical, neurological, learning, speech and cognitive disabilities.
The WCAG writes the guidelines with three levels of compliance, these are A, AA and AAA. AA is the Minimum requirement you should always aim to meet when building, designing or marketing a website and the standard for any HdK website. AAA is the enhanced version of any guideline which we consider implementing at every stage.
The majority of the criteria have stayed the same, but there are some key additions that are important to implement in order to improve the navigation, functionality and exploration of your website. Let’s take a look…
Changes within Navigable Guidelines – Guidelines that help people to move through the digital space and find the information they need
Focus Appearance AAA
A focus indicator allows a keyboard user to see exactly where they are at any given moment—it’s to keyboard users what the mouse cursor is to mouse users. And just like you would never want to hide the mouse cursor, you never want to hide the focus indicator.
Example of a user experience issue:
‘I can’t tell where the keyboard focus is as I move around a webpage or app’.
How to fix this:
- Always make sure that the focus indicator highlights the element on the web page and remains static whilst the user completes the action.
- If the user is completing a form on your website, the form input elements should be completely enclosed with a colour contrast ratio of at least 3:1 for the focused and unfocused states. Some examples of these elements include Links, buttons, Form fields, Menu items, Widgets and Tooltips.
Focus not obscured (Minimum AA) & Focus not obscured (Enhanced AAA).
Example of a user experience issue:
‘The page has a big banner that’s always across the bottom. When I move to items, some are hidden behind the banner and I can’t see them or access them.’
Some examples of elements that could obscure the users access are:
Sticky banners – A sticky banner is a full width block of information that stays on the screen as you scroll down the web page. At a certain point in scrolling, the banner will hide content that is positioned where it stops.
Nested menus – Nested menus are typically menus that are hidden within main navigation items.
How to fix this:
- Avoid using components like this altogether on your website as you’re likely to lose users as they cannot reach the content they need.
Input Modality Guidelines – Guidelines that outline how users input data into the digital space.
Dragging movement
Example of a user experience issue:
‘I cannot hold down the mouse button and drag it accurately enough to move items in the list’.
How to fix this:
- The user needs to be able to complete an interaction with a single pointer without having to drag the mouse. This can be done by making sure the up and down arrows on the keyboard can re-order and move information in the way that a mouse pointer can.
- This should always be tested and compliant when building a website (AA).
Target Size
Example of a user experience issue:
‘The buttons are too close together, I click cancel when going to submit and then have to start all over again.’
How to fix:
- To resolve this problem we need to make sure that all CTA buttons have a minimum target size and padding of 24px or that there is an alternative option available such as sufficiently highlighting the hyperlink text (a bold and carefully written, short link which describes where the link will take the user.)
Predictability – Guidelines that ensure visitors can use the digital space easily and can access help if needed.
Consistent help
Example of a user experience issue:
‘Whenever I use the website to book an event, I can’t remember what to do at each step. I have seen a chat option in some places but I can’t find it now.’
How to fix:
- There should be at least one method for your website visitors to find support to finish a full user journey and it should be ‘consistent’ across the website. This could be a contact link in the header or footer, or a chat bot which can be found in the bottom right of the website on every page.
The support can be any of the following:
- Human contact details
- Documentation
- Live Chat bot
Input assistance – Guidelines that help users to correct mistakes made when inputting data to the digital space.
Redundant Entry
All data entered into a form or input field on a website should have an option to auto-fill the information or give an option for the user to select—unless re-entering the information is essential to ensure security of the content, or previously entered information is no longer valid.
Accessible Authentication AA & AAA
This relates to the authentication tests on websites most commonly known as reCAPTCHA, where the user has to do a cognitive comprehension test to ‘authenticate’ access to the website.
Version 2.2 of the guidelines advises that there does not need to be a reCAPTCHA unless the website has the following features:
Alternative – a method that does not need a cognitive function test
Mechanism – a mechanism or function available to help the user in completing the cognitive function test, like a password manager, copy and paste clipboard or auto-fill functionality.
Personal Content – may be represented by images, video, or audio. The cognitive function test is to identify non-text content that the user submitted to the website.
That’s all the changes you need to be aware of in the most recent Web Content Accessibility Guidelines to make your website as accessible as possible. And although you might ‘tick these boxes’ on paper, we believe that achieving accessibility best practices really comes with asking your audiences. Here at HdK we set up testing panels with users who have a range of accessibility requirements to ensure that we’re receiving valuable first-hand feedback from our users. User testing, combined with meeting up-to-date guidelines, will give you the confidence you need to launch an accessible digital space.
We know there’s a lot of research and information out there and it can feel overwhelming. What’s important to remember is that implementing accessibility is progress and not perfection, and we’re here to help. Just drop us a line at HdK if we can support you on your accessibility journey.
Victoria and the HdK Team