Important: This article was written before the official publication of the WCAG 2.2 on the 5th october 2023. Therefore information in this article may be outdated. Please refer to our Dutch site about the WCAG here for up-to-date information. The English site will be update as soon as possible.
Not everyone navigates through a website using a mouse and keyboard. Some people are limited to using only the keyboard. One reason for this can be a mobility restriction, which makes accurate use of the mouse difficult.
This group, therefore, navigates through websites using the keyboard. The tab key is used to choose the next selectable option, shift + tab sends the user to the previous choice. There are numerous handy tricks available for web designers and developers. Think of offering a skip mechanism or skipping common items (2.4.1), offering content in the right order (2.4.3), and making the focus visible (2.4.7).
WCAG 2.2 helps keyboard users with success criteria 2.4.11 and 2.4.12 by further addressing the display of focus. This article explains the new criteria.
The context of success criteria 2.4.11 & 2.4.13
Version 2.1 of the WCAG has included criterion 2.4.7 (visible focus) in the list. According to this criterion, the focus of selected user elements must be visible. Super convenient for keyboard users. However, it does not specify how the focus should be made visible.
Thus, a website with a focus of 1 px in size can technically comply with this criterion, while it is not clear to users where they are on a website. In order to standardize the appearance of focus, WCAG 2.4.11 and 2.4.12 were created.
WCAG 2.4.11 belongs to level AA and is therefore immediately compulsory for (semi-)government websites when WCAG 2.2 takes effect. From 2025, level A and level AA will also be compulsory for commercial webshops, according to the European Accessibility Act. WCAG 2.4.12 can be seen as a more difficult/stringent version of 2.4.11 and therefore belongs to level AAA. Below you will find information on how your website can meet WCAG 2.4.11 and WCAG 2.4.12.
Meeting success criterion 2.4.11
According to success criterion 2.4.11, the focus of interactive elements shall comply with the following conditions:
- Contrast area: have at least a contrast ratio of 3.0:1 with the colour of the element when not receiving focus.
- Minimum area: the edge of the contrast area is at least 1 CSS pixel thick or the shortest side of the focus shape is at least 4 CSS pixels thick and generally not thinner than 2 CSS pixels.
- Adjacent contrast: the contrast area has a contrast ratio of 3.0:1 to adjacent colours, such as the background colour, or the contrast area has a thickness of at least 2 CSS pixels.
- Not completely hidden: The user interface item that gets the focus is not completely hidden by other content on the page.
Meeting the success criterion 2.4.12
According to success criterion 2.4.12, the focus of interactive elements shall comply with the following conditions:
- Contrast area: have at least a contrast ratio of 4.5:1 with the colour of the element when not receiving focus.
- Minimum area: the contrast area is at least twice the area of a 1 CSS pixel perimeter of the element that does not receive focus.
- Not completely hidden: the user interface item that receives focus is not completely hidden by other content on the page.
Publication of WCAG 2.2
For the time being, WCAG 2.2 is not yet in force. The deadline of June 2022 has not been met. Efforts are now being made to have the new version enter into force in December 2022. The draft version of WCAG 2.2 can be viewed on the W3C website.
