W3C are released new accessibility guidelines in October 2023 (What's New in WCAG 2.2 Working Draft (opens new window)). This article looks at the changes and their impact on our sites, themes and products.
Level A Changes
2.4.7 Focus Visible (A)
https://www.w3.org/TR/WCAG22/#focus-visible
What does it mean?
This success criterion is not new, but it is being promoted from AA to A.
You can always use the default browser focus state. Alternatively, you can create your own highly visible focus states (which are even better than the browser defaults which aren't always highly visible). Reversing the link colour and background on focus is a great way to maintain your branding in focus states. Adding a thick border can also work well. Or even combining the two approaches can work.
Review
As this was previously at level AA our sites already comply with this standard. We have reviewed all products to make sure there is feedback on focusable elements using a combination of borders and backgrounds.
3.2.6 Consistent Help (A)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#326-consistent-help-a
What does it mean?
If you provide contact information (forms, emails, phone, chatbots, etc), put it in the same place on every page of your website or app both visually and in the code.
Review
Due to the nature of our themes, the headers and footers remain in the same location for all templates. This creates a consistent layout and experience for the user, helping them to find elements. Related content (eg forms and articles) is also consistently in the same place and order.
You should review your own content to make sure any elements added into the body copy is consistent.
3.3.7 Accessible Authentication
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#337-accessible-authentication-a
What does it mean?
Don't force users to remember and manually type in their password for authentication. Allow users to copy and paste a password into form fields or use a password manager tool.
Alternately, allow users to authenticate using their device face scan, fingerprint, or PIN number. You can also allow users to authenticate using a third-party provider using OAuth.
The more ways users can authenticate, the more likely it becomes that all users will find a way that works best for them.
Review
The Authentication template and worker support a wide range of login providers, including social media, OAuth and other directory services.
All logins allow you paste in passwords and support password manager tools.
We'll continue to review our authentication methods to make sure we are helping users to login as easily as possible.
3.3.8 Redundant Entry (A)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#338-redundant-entry-a
What does it mean?
In a process with multiple steps, don't force users to re-enter the same information more than once. For example, allow users to specify that billing address is the same as shipping address instead of re-entering it. Auto-populate fields with data that the user has stored in their browser whenever possible.
Exceptions include essential re-entry such as validating a password for security purposes.
Review
Recent changes in the Forms Designer introduced the ability to add the
Level AA Changes
2.5.7 Dragging Movements (AA)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#257-dragging-movements-aa
What does it mean?
Supply alternatives to dragging in a user interface, unless dragging is essential. For example, ensure users can adjust the price range of a search filter using + and - buttons or entering a number in an input field instead of dragging a slider.
Review
Our products have always added an alternative to interactive elements, like enter buttons to open menus and disclosures and tabbing to close dialogs.
Any external embedded content, like maps or videos, will need to be reviewed to make sure they are compliant.
2.5.8 Target Size (AA)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#258-target-size-minimum-aa
What does it mean?
Leave room around focusable elements that aren't inline. This includes navigation links, buttons, form fields, but not links within paragraphs.
Small targets that are less than 24 pixels in width or height must have at least a 24-pixel high and wide selection area.
Review
We been reviewing this guidance since the creation of WCAG 2.2 and continue to check that our components are compliant.
We will continue to make sure all of our focusable elements are at least 44px by 44px.
You will need to review any of your own custom site skins to check that they are also compliant.
Level AAA Changes
2.4.11 Focus Appearance (Minimum) (AAA)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#2411-focus-appearance-minimum-aa
What does it mean?
To meet this new success criterion, all focus states must meet the following:
- 1 pixel or greater border around the entire focused element OR 8 pixel or greater border on the shortest side e.g., bottom border
- Colour change with 3 to 1 contrast difference from unfocused state
- 3 to 1 contrast with all background colours OR 2 pixel or greater border around the entire focused element
- The focus indicator (ie border) is not hidden or overlapping with other elements on the screen
Review
Our products currently support the border requirement as we surround our focusable elements in a solid border of 2px.
The focus colour is blue
You will need to review any of your own custom site skins to check that they are also compliant.
2.4.12 Focus Appearance (Enhanced) (AAA)
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#2412-focus-appearance-enhanced-aaa
What does it mean?
This is a set of stricter rules for focus appearance that all must be compliant against:
- Contrasting area: There is an area of the focus indicator that has a contrast ratio of at least 4.5:1 between the colours in the focused and unfocused states
- Minimum area: The contrasting area is at least double the area of a 1 CSS pixel perimeter of the unfocused component
- Not obscured: No part of the focus indicator is hidden by author-created content
Review
As part of the review of 2.4.11 Focus Appearance (Minimum) (AA) we will look to see if we can include these requirements too as they may become a AA requirement in the future.
Share this page
