WCAG 2.2 is the next version of the Web Content Accessibility Guidelines, published 5 October 2023. It includes all of WCAG 2.1, minus 4.1.1 Parsing, plus nine new criteria. Of those, six are in Level A + AA, the most commonly tested combination of levels.
Let's look at how you could meet the new Level A + AA criteria (note: this is just my summary and interpretation, for the official specification and wording, refer to WCAG 2.2):
- Focus Not Obscured (Minimum) (2.4.11, AA): don't obscure the element that has focus (eg with sticky headers/footers or modals)
- Dragging Movements (2.5.7, AA): when some action in your UI requires dragging, ensure the same action can also be performed without dragging (with a “single pointer”). Example: a map that can be dragged to move around, but also offers buttons to move up, down, left and right.
- Target Size (Minimum) (2.5.8, AA): ensure that things you can click (or otherwise “point”, eg using pen, touch etc), are more than the specified minimum size, unless there's enough distance, it's inline or the small size is “essential”
- Consistent Help (3.2.6, A): if your page/app contains help options, they are in the same order across pages (unless user zooms/turns device; these kinds of user-initiated changes are excepted)
- Redundant Entry (3.3.7, A): avoid that users have to enter the same information twice, instead auto-populate or allow previous input to be selected. Some exceptions apply.
- Accessible Authentication (Minimum) (3.3.8, AA): if your auth requires a “cognitive function test” (user has to remember, manipulate or transcribe), offer a way without such a test, or allow for assistance (eg support password managers, don't block copy/paste)
One SC was removed: Parsing (4.1.1). It existed because assistive technologies had to parse HTML, but they no longer do so directly.
Notably, the new SC Focus Appearance (2.4.13), that was initially put in Level AA, is going to be Level AAA. It has requirements for what focus styles look like, regarding contrast, size of the contrasting area and contrast of adjacent colors (this one may be the most tricky and “at risk”, but there's a lot of examples in Understanding Focus Appearance)
An overview of the new criteria, including examples of how they are useful to real people can be found on What's new in WCAG 2.2.
List of updates
- 5 October 2023: WCAG 2.2 comes out today, updated intro to match that.
- 18 September 2023: The post said “Accessible Authentication” was Level A, but it is AA. Updated this (thanks Jules!).
- 18 July 2023: Removed comment on Focus Visible level change (to A) as it was changed back (to AA); renamed and renumbered Accessible Authentication; renumbered Focus Not Obscured; added removal of Parsing.
Comments, likes & shares (217)
Ingo Steinke, creative web dev, Martin Jacobsen, Stefan, A11y Up, Sean Leahy, Thien Bui, Evren Kiefer, Jonathan Holden, Luz De León, Deelip, Pratyusha Jaitly, Marcus Lindblom, Filip Vabroušek, Finn Kuhn 🇪🇺, Agnes Szmat, Philippe Vayssière, Cynthia Teeters, anthony9, Anthony, Patrick Joannisse (he/him), Vernon Fowler, Nina Amato, Leigh Mortimer, JJ Cloutier, sꜩven 🌮 collector.tez, Matthias Ott, Lise LaTorre, Owen, Josh Harwood, Ranked Choice Andrew, Andrew Johnson, Allie Thu, razh, Caleb (he/him) #BlackLivesMatter, Patrick Smith, Beck Kramer, Sandra, Jens Grochtdreis, Raffaella Isidori 💛💙, Tristan Dubbeld, Active for Autism, Nicky McAllister, Scott de Jonge, Ofer Shaal, Denis Boudreau - he/him (y'all), David Dias, xmanilovechina, Meagan Eller, Mirthe Valentijn, Gaurav Gupta, Shankar, Sarah L. Fossheim (they/them), Lawal Hamzat Ademola, Cyril (he/him), Claire, John Samuel, ApisNecros, Jon Henshaw :coywolf:, Tim Chambers, Borghal, JHadley, Christopher, Elly Loel ✨🌱, James Edwards, Nick, Andy :aglaceon: :teapot_blush:, Martín Baldassarre, Thomas Bassetto, Jon McLaren, Ben Myers ????, Heather Buchel, Steven Hoefer, Ruby Quail, Bart van de Biezen, Fynn Becker, Florian Geierstanger, Skye :verified_trans:, Kieran McGuire, Lars Laade, John P. Green, Darek Kay, nev, Hugo Soucy (hs0ucy) ???? ???? ????, Lea Rosema, Alex Volkov, hatch, Sean Boots, Ana Rodrigues, Tyler Sticka, Ryosuke, Marcel, Canine, Jason Beaird, Reed Mideke, Johnny Taylor, Joachim, Nico F., Sunny :autumnleaf6:, Josiah, Elly Loel ✨????, Alistair Shepherd, Nick F, Andrew Hick and Carol ???? liked this
irgendwasmitcomputern, A11y Up, Wolf Hoelscher, Lizzie Bruce, Evren Kiefer, ɐpıɹɐ̗ɔsɐ, Pratyusha Jaitly, Marcus Lindblom, Anthony, anthony9, Grace Snow, Matthias Ott, Kai Röder, Owen, Nicky McAllister, David Dias, Michael Hastrich, Lawal Hamzat Ademola, Tim Chambers, Justin Poehnelt, Aram Zucker-Scharff, Eric Eggert, Sarah L. Fossheim :they_them:, Sylvain G., Robert Lender, Björn Uhlig, Jon McLaren, Heather Buchel, Paul van Buuren, Gustav Hansen, max frühschütz – нет войне, Ruby Quail, Fynn Becker, Lars Laade, Lene Saile, Rich Holman, Dan Phiffer, nev, Lea Rosema, Jens Grochtdreis, Marc Amos, Hugo Soucy (hs0ucy) ???? ???? ????, Canageek, Walter Ebert, Sean Boots, suchajazzyline, Joe Lanman, Stefan Grund :eay:, Tyler Sticka, Ana Rodrigues, Thomas, s:mon, Chris ???? Reinbothe, Chris Henrick, Josh “Yoshi” Vickerson, Douglas McMillan, Joachim, Maarten Stolte, Alistair Shepherd, Harald Atteneder, Andrew Hick, Carol ???? and Dan Pope reposted this
@hdv so, like trackbacks and pingbacks that WordPress stubbornly tried to make happen for many years?
@jaapstronks yes
Thanks to @sia I now know Webmentions can be used from Mastodon to your blog via https://brid.gy 🎉
Bridgy@hdv @sia I've added it as well, but nobody will like my toot of my last post...even though I mentioned them in the post, Hidde!
@hdv When does it come ou… oh, sorry! 😂
@yatil @hdv 😂 I fully expect waking up some weird morning and skimming Mastodon while having a coffee only to find excited-anxious “Now it is out" toots
@marcus
I could do with at least a couple more weeks personally, haven't finished writing my webinar slides. I'll be stressed if it's tomorrow lol.
@yatil @hdv
@siblingpastry @marcus @hdv It’s so bizarre that this is a guessing game. They could just say “if we have consensus by September 1, we will publish the update on September 30.”
(Also, technically WCAG 2.1 sticks around and with the changes I have refused learning anything more about 2.2 until it is finished. It’ll delay me using it for at least until early next year. 😮💨)
@yatil
This is why I'm not doing the webinar until it is finished, cos it could change again.
I've had to update my TPGi article half a dozen times at least.
@marcus @hdv
@yatil @siblingpastry @hdv Having watched the 2.1 process very superficially (or rather not at all) in 2018, it somehow shocks me that you with W3C WAI insight also judge it as “bizzare” and not “yeah, this is how the sausage gets made”
@marcus @yatil @hdv These observations are not mutually exclusive 😆
This post is my response to the March 2024 IndieWeb Carnival: Accessibility in the Small Web. I’m looking forward to reading more of the posts at the end of this month.
In spring of 2022 I added an accessibility statement to my personal website. I was motivated and inspired by a number of people I’ve learned from who had kept statements on their sites. Check out Eric Bailey, Carie Fisher, Ethan Marcotte, and Marcy Sutton (and their websites). Keeping a link labeled “accessibility” in my website footer has motivated me to be more thoughtful and deliberate about the choices I make running this website. I think it’s made me a better designer, too.
Rather than being a performative gesture, an accessibility statement can be a useful thing to feature on a personal website. At a minimum, an accessibility statement should do two things: state the level of conformance you are trying to achieve; and provide a way for people to contact you if they encounter accessibility barriers. For example, in my accessibility statement, I aim to conform to Level AA (there are three levels total) of the Web Content Accessibility Guidelines. By trying to meet Level AA, I am already meeting Level A, and in some cases might be meeting parts of the AAA spec.
A little more than a year after I published my accessibility statement, I decided to redesign my site and move to a different platform (Eleventy to WordPress). The WCAG spec was officially updated from version 2.1 to 2.2 a month later on Oct. 5, 2023. I tried to keep up with the changes and make some updates to both my site and my statement. This became a challenge for me, as with this migration I became more dependent on other people’s code, both with the “accessibility-ready” WordPress theme I installed, along with the handful of plugins I was using.
The WCAG update to 2.2 brought a number of significant changes to WCAG’s success criteria. Two key things that affected my new website were the Focus Not Obscured (Minimum) requirement (my site has a sticky header I haven’t figured out how to turn off) and the Minimum Target Size success criteria. I think I’m doing OK in regards to these two things now, but I’m keeping a note about the sticky header in the Known Issues section of my accessibility statement.
Known Issues
If you decide to publish an accessibility statement on your site, I recommend keeping a ‘Known Issues’ section. I add possible accessibility issues here as I become aware of them, and keeping these notes in public is a way to stay accountable to fixing them in a timely fashion.
One of the newer features I added in the last year was an interactive map of posts and notes with geographic information. I’ve tested the map and while I can use touch, mouse, and keyboard controls to navigate, there are plenty of improvements to make with both map controls and contrast. While it’s not a complete replacement for any inaccessibility in the map itself, the content can still be browsed with a link to the Places category.
Writing your accessibility statement
If you’re new to accessibility statements and want to add one to your website, there’s a helpful W3C guide with examples and a generator. I took a glance at this to get an understanding of the format, but borrowed liberally from other personal website examples when writing mine. If you go this route, make sure you are running checks on your pages so you realistically can make the commitment to the level of conformance you choose.
In addition to providing WCAG conformance, contact information, and known issues, I’m also providing features, standards, and testing information. I also considered ways my statement (and my website itself) can be a reflection of my personal and professional commitment to accessibility. At the bottom of my statement, I include some links that have personally helped me in my journey, or resources I continue to learn from.
If you’re looking for more examples, here are a few other accessibility statements I’ve seen since creating mine:
Once you publish an accessibility statement on your personal website, you can also add yourself to the IndieWeb wiki, like I did. There is a wiki page at indieweb.org/accessibility_statement.
I’m always open to feedback on my accessibility statement, this post, or my website in general. If you encounter an issue with my site or have any suggestions, I can be reached at nick@nicksimson.com.
Syndicated copies:This post is my response to the March 2024 IndieWeb Carnival: Accessibility in the Small Web. I’m looking forward to reading more of the posts at the end of this month.
In spring of 2022 I added an accessibility statement to my personal website. I was motivated and inspired by a number of people I’ve learned from who had kept statements on their sites. Check out Eric Bailey, Carie Fisher, Ethan Marcotte, and Marcy Sutton (and their websites). Keeping a link labeled “accessibility” in my website footer has motivated me to be more thoughtful and deliberate about the choices I make running this website. I think it’s made me a better designer, too.
Rather than being a performative gesture, an accessibility statement can be a useful thing to feature on a personal website. At a minimum, an accessibility statement should do two things: state the level of conformance you are trying to achieve; and provide a way for people to contact you if they encounter accessibility barriers. For example, in my accessibility statement, I aim to conform to Level AA (there are three levels total) of the Web Content Accessibility Guidelines. By trying to meet Level AA, I am already meeting Level A, and in some cases might be meeting parts of the AAA spec.
A little more than a year after I published my accessibility statement, I decided to redesign my site and move to a different platform (Eleventy to WordPress). The WCAG spec was officially updated from version 2.1 to 2.2 a month later on Oct. 5, 2023. I tried to keep up with the changes and make some updates to both my site and my statement. This became a challenge for me, as with this migration I became more dependent on other people’s code, both with the “accessibility-ready” WordPress theme I installed, along with the handful of plugins I was using.
The WCAG update to 2.2 brought a number of significant changes to WCAG’s success criteria. Two key things that affected my new website were the Focus Not Obscured (Minimum) requirement (my site has a sticky header I haven’t figured out how to turn off) and the Minimum Target Size success criteria. I think I’m doing OK in regards to these two things now, but I’m keeping a note about the sticky header in the Known Issues section of my accessibility statement.
Known Issues
If you decide to publish an accessibility statement on your site, I recommend keeping a ‘Known Issues’ section. I add possible accessibility issues here as I become aware of them, and keeping these notes in public is a way to stay accountable to fixing them in a timely fashion.
One of the newer features I added in the last year was an interactive map of posts and notes with geographic information. I’ve tested the map and while I can use touch, mouse, and keyboard controls to navigate, there are plenty of improvements to make with both map controls and contrast. While it’s not a complete replacement for any inaccessibility in the map itself, the content can still be browsed with a link to the Places category.
Writing your accessibility statement
If you’re new to accessibility statements and want to add one to your website, there’s a helpful W3C guide with examples and a generator. I took a glance at this to get an understanding of the format, but borrowed liberally from other personal website examples when writing mine. If you go this route, make sure you are running checks on your pages so you realistically can make the commitment to the level of conformance you choose.
In addition to providing WCAG conformance, contact information, and known issues, I’m also providing features, standards, and testing information. I also considered ways my statement (and my website itself) can be a reflection of my personal and professional commitment to accessibility. At the bottom of my statement, I include some links that have personally helped me in my journey, or resources I continue to learn from.
If you’re looking for more examples, here are a few other accessibility statements I’ve seen since creating mine:
Once you publish an accessibility statement on your personal website, you can also add yourself to the IndieWeb wiki, like I did. There is a wiki page at indieweb.org/accessibility_statement.
I’m always open to feedback on my accessibility statement, this post, or my website in general. If you encounter an issue with my site or have any suggestions, I can be reached at nick@nicksimson.com.
Syndicated copies: