When we talk about ‘focus’, we mean elements that a user is trying to interact with or ‘focus’ on, such as a call-to-action button or a drop-down menu on your website.
It’s important to include a visual indicator for any focused elements on your webpage – something as simple as the cursor style changing from a pointer to a hand when hovering over a link, or a button changing colour when you go to press ‘submit’. Consider how you let users know that something is clickable or actionable on the page to make navigation as simple as possible.
Focus not obscured
Seems simple enough, but if something is covering up the content on your website, then it’s not accessible to anyone! Make sure no ‘sticky’ or pop-up elements obscure the content ‘focus’ for your user. If your header covers the ‘submit’ button on your contact form or your cookie opt-in message conceals most of the page content, it makes your website difficult and unenjoyable to use. Not only is this important for accessibility, but it has a huge impact on the overall user experience.
If users can’t complete a form, navigate to another page, or read your content, they won’t stick around for long.
This kind of interaction usually comes up in surveys or feedback with sliding scales. If an element includes a requirement to ‘drag’ something (moving by holding down the cursor button), there should be an alternative way to do this, such as clicks, long presses or arrow keys.
This takes into consideration people’s different physical abilities and whether they use a keyboard to navigate the website as opposed to a mouse.
Target size (minimum)
This one’s really simple. If your buttons and links are too small to understand, you’re creating an unpleasant user experience that can be restrictive to people with visual and physical disabilities.
Any element you can click (i.e. a ‘target’) should be a minimum size of 24 by 24 CSS pixels. There are some exceptions to this, where the clickable elements are smaller, but have enough space between elements to still be clear enough to read, understand and click. To achieve a higher standard of accessibility (AAA) the target size should increase to a minimum of 44 by 44 CSS pixels
Anyone visiting your website should know where to find support details without having to hunt for them. Users need to be able to find the help they need, when they need it.
You can do this by making sure your ‘help mechanism’ – such as contact details, troubleshooting information, FAQs – is always in the same place. A commonly-used solution to this is having links to support resources in the header or footer, so it’s always in a consistent place.
Memorising a username and password can be difficult for people with certain cognitive abilities. If your website includes an account function where users can sign in, you can make the process more accessible by offering alternative, secure login methods.
Your login page should already include correctly labelled username and password fields, as part of WCAG 2.1 standards. This will allows auto-fill functions to recognise the right inputs. Other authentication methods, like allowing people to copy and paste passwords from third-party password managers, using a pin or fingerprint, and sending notifications to the user’s device, can help improve the user experience.
This really goes hand-in-hand with accessible authentication, in that any forms or fields that a user has used before, should allow for the auto-fill function. This means users aren’t inputting the same information unless they have to.
It reduces the need to memorise information or spend long periods of time typing – and it also minimises stress overall. This can be particularly important for people with certain cognitive abilities but it also allows for a better user experience for all users.
All the new criteria being considered for WCAG 2.2. is available to view on the World Wide Web Consortium’s website. You can find a detailed breakdown for all the guidance including examples.
Accessibility is never just a tick-box exercise, it’s all about making the user journey as simple and enjoyable as possible. For more information about why accessibility is important and what it means for your marketing, download our free e-book.
July 6, 2023
December 20, 2023