WCAG 2.2 CSS Lint - Focus & Target Size
Fourteen findings, eleven success criteria, sixty-one lines of CSS. That is what came back from one stylesheet of the kind a frontend developer at an EU SaaS ships every week - a pricing card, a sticky header, a spinner, an .sr-only class. Three of those fourteen findings are the interesting ones, because they name criteria that did not exist in WCAG 2.1: 2.5.8 Target Size (Minimum), 2.4.11 Focus…
A recent stylesheet analysis of an EU SaaS system revealed three new criteria in WCAG 2.2 that were not present in the previous version, WCAG 2.1. These three criteria are 2.5.8 Target Size (Minimum), 2.4.11 Focus Not Obscured (Minimum) and 2.4.13 Focus Appearance, all of which are decided almost entirely in CSS. A linting tool that uses the WCAG 2.1 standard would not detect these new criteria, resulting in a failure of the criteria during the review process.
Three CSS rules stand out as problematic in the analyzed stylesheet. The first rule sets an icon button's width and height to 20px, which does not meet the minimum size requirement of 24x24 CSS pixels as per criterion 2.5.8. The second rule positions a sticky header at the top of the viewport using a height of 64px, causing it to be obscured from focus by users when scrolling down the page, violating criterion 2.4.11.
Lastly, the stylesheet includes a focus outline declaration that does not meet the minimum 2px requirement specified in criterion 2.4.13.
These three issues highlight the importance of utilizing a CSS linting tool that is specifically configured to detect issues according to the WCAG 2.2 standard. Running such a tool during the development process can save significant time and resources by identifying and addressing accessibility concerns before they become costly problems during later stages, such as through the involvement of an accessibility consultant or an expensive third-party audit.
The free CSS linting tool described in the source material can be accessed online and offers a comprehensive evaluation of a website's CSS code, ensuring compliance with accessibility guidelines.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
