WCAG 2.2: What changes for websites and how does it impact users?<\/h1>\n
Estimated read time: 10 minutes, Updated: November 11, 2024<\/p>\n<\/div><\/div><\/div>
The <\/span>Web Content Accessibility Guidelines<\/a> (WCAG) are an international standard for making web content accessible to people with disabilities. An updated version of WCAG \u2013 version 2.2 with 9 new success criteria \u2013 was released in October 2023. One success criteria \u2013 4.1.1 Parsing \u2013 was removed from WCAG 2.2. More information is available in <\/span>WCAG 2 FAQ, 4.1.1 Parsing<\/a>.<\/span><\/p>\n WCAG 2.2 follows the same theme of WCAG 2.1 \u2013 improving accessibility for three groups:<\/p>\n I\u2019m Kate \u2013 an IAAP (International Association of Accessibility Professionals) certified Web Accessibility Specialist and I work with Sam \u2013 an expert screen reader user. We both work for Fable, a leading accessibility testing platform powered by people with disabilities. While the W3C is an extremely thorough technical document, we thought it might be helpful to create a plain language summary of these changes, focused on required actions and resulting impact.<\/p>\n At Fable, we believe organizations should go beyond accessibility guidelines to create exceptional and accessible user experiences. However, WCAG compliance is often embedded into accessibility legislation, so it\u2019s useful to understand what\u2019s needed to comply and what the outcome should be.<\/p>\n We\u2019re going to review WCAG 2.2 from two perspectives:<\/p>\n Note: we\u2019re only going to cover changes that impact A and AA compliance, not AAA. Level AA compliance is widely considered the globally accepted minimum standard, based on various accessibility laws. We\u2019ve done our best to ensure we\u2019re accurately interpreting 2.2, but please make sure you\u2019re also using the official <\/em>W3C WCAG 2.2 reference document<\/em><\/a>.<\/em><\/p>\n<\/div><\/div><\/div> Kate Kalcevich<\/span> 2.4.11 Focus Not Obscured (Minimum) (AA)<\/span><\/span><\/span><\/span><\/a><\/p>\n Users must be able to see what element has keyboard focus, at least partially.<\/span><\/p>\n For people who can see <\/span>and use<\/span> a keyboard (or a device that interacts through the keyboard interface, such as a switch or voice <\/span>inp<\/span>ut<\/span>), identifying the currently focused <\/span>element<\/span> is essential. This includes screen reader users who can see. If users don't know where their focus is, they may not know how to proceed or may mistakenly believe the site is unresponsive.<\/span>\u00a0<\/span><\/p>\n What types of alternative navigation benefits from visible focus<\/span>?<\/span>\u00a0<\/span><\/p>\n 2.5.7 Dragging Movements (AA)<\/a><\/p>\n 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.<\/p>\n From apps on a homepage, to items in a queue or list, dragging to reorder is a fundamental interaction. It can be used to design, show priority, or order of action. It\u2019s critical that people with disabilities who can\u2019t drag with a mouse are not left out of this method of interaction. Thanks to this guideline, people with disabilities will no longer be left out of interactions that, today, commonly require dragging with a mouse.<\/p>\n 2.5.8 Target Size (Minimum) (AA)<\/span><\/span><\/span><\/span><\/a><\/p>\n Leave room around focusable elements that aren\u2019t inline. This includes navigation links, buttons, form fields, but not links within paragraphs.<\/p>\n Small targets that are less than 24 pixels in width or height must have at least a 24-pixel high and wide selection area. For example, a 14-pixel square icon needs 5 pixels of padding on all sides (5 + 14 + 5 = 24).<\/p>\n Loss of dexterity is one of the most common symptoms of aging. This guideline helps make sure the interface you create today will work for you in 25 years and will work for everyone else right now. As well, this is critical for users on mobile devices, who may just have larger fingers, or slightly less hand-eye coordination, to ensure that everyone can touch what they intended to.<\/p>\n\n
\n
![](\"https:\/\/makeitfable.com\/wp-content\/uploads\/2024\/01\/KATE-KALCEVICH_2022-FABLE-HEADSHOT-1.png\" "\\"KATE")
<\/span><\/div>
Head of Accessibility Innovation<\/p>\n<\/div><\/div><\/div><\/div><\/div>Guideline 2.4 Navigable<\/h2>\n
Effect on people with disabilities: Where am I?<\/h3>\n<\/div><\/div><\/div>
\n
\n<\/span><\/li>\n![\"Picture](\"https:\/\/makeitfable.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-21-19-17-23-1024x597.png\")
<\/span><\/div><\/div><\/div><\/div><\/div>Guideline 2.5 Input Modalities<\/h2>\n
Effect on people with disabilities: Everyone wants to reorder things<\/h3>\n
Effect on people with disabilities: Make sure everyone can click<\/h3>\n
Pro tip:<\/h3>\n
\n
![\"Samuel](\"https:\/\/makeitfable.com\/wp-content\/uploads\/2020\/08\/2NX5WLSHZJBIXIHAVORUBUVBRI-1-1024x689.jpg\" "\\"2NX5WLSHZJBIXIHAVORUBUVBRI-1\\"")
<\/span><\/div><\/div><\/div><\/div><\/div>