The Web Content Accessibility Guidelines (WCAG) 2.1 have officially been released, and addresses some much-needed features to keep up with the evolving digital world. These updates aim to ensure your digital products are both accessible to a broad user base and to enable you to provide the best possible user experience for anyone who interacts with your digital products.
Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. -WC3
So, what exactly does this mean, and what does it mean for your digital product?
For us, it means we’re already hard at work redesigning our accessibility testing template to make sure our clients digital products continue to meet these guidelines.
For most organisations, it means it’s time to ask yourself, is your website it meeting the accessibility needs of your users? And a great way to answer this is to assess the 17 New Criterion for Success.
(Level AA) Orientation: Users should have the option to view and operate the site in their preferred orientation (landscape or portrait) based on their preference. There is an exception for assets that are considered essential. Read more about orientation here.
(Level AA) Identify Input Purpose: This will assist users to better recognise and understand how you are using the information they add to your websites’ forms, meaning instead of using input[type="text"] all the time and everywhere, it’s time to use input[type="email"], input[type="tel"], input[type="date"] etc. By attaching additional information (metadata) to the input fields, automation and additional machine-processing for personalisation will be available. You will also need to add "autocomplete" properties to inputs now. Correct types alone isn't enough to pass. Read more about Identify Input Purpose here.
(Level AAA) Identify Purpose: This requires the content author to add the context, purpose, and meaning of symbols, regions, buttons, links and fields to allow all users, particularly those with a limited vocabulary, to understand them. This will support personalisation and preferences – ultimately allowing your user base to better interact with your digital product, and ultimately society. Read more about Identify Purpose here.
(Level AA) Reflow: Reflow will support users with impaired vision when they zoom in on your website. Essentially, it means that in 400% zoom and under – text will be presented on one column, eliminating the need for your user to scroll left to right as well as up and down. Read more about Reflow here.
(Level AA) Non-Text Contrast: Non-text contrast allows users with visual impairments to access active user interface components and meaningful graphics. Keeping in line with the previous Success Criterion, Contrast (Minimum), will minimise the need for users with visual impairments to use contrast-enhancing assistive technology when they interact with your site. Read more about Non-Text Contrast here.
(Level AA) Text Spacing: Increased text spacing between lines, words, letters and paragraphs supports accessibility for people with low vision or dyslexia, and allows readability or an increased reading speed. The new recommended spacing is:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Read more about Text Spacing here.
(Level AA) Content on Hover Focus: This criterion addresses your content that appears and disappears in coordination with keyboard focus or pointer hover, which often leads to accessibility issues. It is recommended that this content is now:
- Dismissible- A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable- If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent- The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Read more about Content on Hover Focus here.
(Level AA) Character Key Shortcuts: This criterion addresses the frustration that these shortcuts may cause for speech input users. Your users should now have the ability to:
- turn off these shortcuts or,
- remap the shortcut to use one or more non-printable keyboard characters.
Alternatively, the shortcut for a user interface component may be only active when that component has focus. Read more about Character Key Shortcuts here.
(Level AAA) Timeouts: It is suggested that your users should now be warned of any user inactivity that could lead to data loss. Along with your general users, this criterion will also support those with cognitive disabilities, who may take longer to read your content of complete your online forms. Read more about Timeouts here.
(Level AAA) Animation from Interactions: Any animation that is triggered by interaction should now have the ability to be disabled, with the exception of animation that is essential to the function or the information being conveyed. This is due to the nausea and distraction that some of your users face due to animated content. Read more about Animations from Interactions here.
(Level A) Pointer Gestures: Does your digital product utilise multipoint gestures; such as two-finger zoom, or path-based gestures; such as swiping, dragging, or the drawing of a complex path? It’s now time to consider how these operations can be performed with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. This will support your users who are unable to complete these gestures due to disability, and will generally provide a better user experience all round. Read more about Pointer Gestures here.
(Level A) Pointer Cancellation: This criterion will assist your users in the prevention of accidental or erroneous pointer input, which is something most users face but particularly experienced by users with disabilities. It suggests you implement at least one of the following:
The down-event of the pointer is not used to execute any part of the function;
Abort or Undo
Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
The up-event reverses any outcome of the preceding down-event;
Completing the function on the down-event is essential.
Read more about Pointer Cancellation here.
(Level A) Label in Name: Your user will have a much better experience with your website if the visible text labels of control match their accessible names. People with disabilities often rely on visual labels, therefore it is crucial for their accessibility that this label includes the name. Read more about Label in Name here.
(Level A) Motion Actuation: This criterion addresses functions that are triggered by moving devices (such as shaking or tilting), or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing). For these functions to be accessible to your entire user base, they also need to be operated by more conventional user interface components. This functionality should have the ability to be disabled in order to prevent accidental actuation, with the exception of when the motion is used to operate functionality through an accessibility supported interface or when the motion is essential for the function and disabling would invalidate the activity. Read more about Motion Actuation here.
(Level AAA) Target Size: This criterion is becoming increasingly important as your users’ touch screen sizes continue to shrink. It aims to ensure that target sizes are large enough for users to easily activate them, no matter the device, allowing all users a better user experience with your digital product. The recommended target size is at least 44 by 44 CSS Pixels. Read more about Target Size here.
(Level AAA) Concurrent Input Mechanisms: For users who access your digital product from multiple input mechanisms (touch screen, keyboard, voice) this criterion will provide a far smoother transition between their devices. Web content should not restrict the modalities available on a platform, except where the restriction is essential, required to ensure the security of the content, or required to respect user settings. Read more about Concurrent Input Mechanisms here.
(Level AA) Status Messages: This criterion will make your users aware of important changes in content that are not given focus, in a way that does not interrupt their work – primarily benefiting blind and low vision users of assistive technologies with screen reader capabilities. By implementing markup languages, status messages can be programmatically determined through role or properties, and can be presented to the user by assistive technologies without receiving focus. Read more about Status Messages here.
We know, it’s a lot to take in and you’re probably wondering where to start.
For content managers, some of these criterions can be implemented simply by tweaking your Digital Style Guide and updating your current content.
For other criterion, such as pointer gestures and motion actuation, it’s time to get a developer on-board and enhance these areas. Fortunately, with a little time and investment you will be able to meet these new accessibility guidelines—and for the months of June and July, we will be hosting a FREE WCAG 2.1 Workshop for clients who want to Road Map their future of accessibility.
Are you ready to get accessible?