{"id":18659,"date":"2023-11-01T15:41:23","date_gmt":"2023-11-01T15:41:23","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=18659"},"modified":"2026-05-22T11:42:24","modified_gmt":"2026-05-22T11:42:24","slug":"wcag-2-2-new-success-criteria","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/wcag-2-2-new-success-criteria.html","title":{"rendered":"Taking Web Accessibility a Step Further: What&#8217;s New in WCAG 2.2?"},"content":{"rendered":"\n<p>In an increasingly digital world, web accessibility has become more important than ever. It&#8217;s not just about compliance with standards or avoiding legal ramifications; it&#8217;s about ensuring equal access to information and opportunities for all.<\/p>\n\n\n\n<p>Additionally, web accessibility <a href=\"https:\/\/getdevdone.com\/blog\/web-accessibility-is-more-relevant-than-you-think.html\" target=\"_blank\" rel=\"noopener\" title=\"\">brings tangible benefits to businesses<\/a>, such as enhancing the user experience, broadening audience reach, improving a business&#8217;s reputation, and boosting search engine optimization.<\/p>\n\n\n\n<p>As a web development company committed to making the web inclusive, we keep a close eye on updates to web accessibility guidelines. Our top priority is ensuring that everyone, regardless of their abilities, can easily access and interact with the websites we develop.<\/p>\n\n\n\n<p>In this respect, we have some exciting news to share with you. After five years in the works, the new version of <strong>Web Content Accessibility Guidelines (WCAG)<\/strong> &#8211; <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">WCAG 2.2 <\/a>&#8211; was finally released as a &#8220;W3C Recommendation&#8221; standard on October 5, 2023.<\/p>\n\n\n\n<p>In this post, we review <strong>nine additional Success Criteria (SC)<\/strong> introduced in the new guidelines aimed at improving accessibility for individuals with visual impairments, cognitive and learning disabilities, and motor limitations.<\/p>\n\n\n\n<p>Let\u2019s dive in!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-9-new-success-criteria-introduced-in-wcag-2-2-an-overviewnbsp-9a389f22-c4ee-438c-a266-04695e30980b\">The 9 New Success Criteria Introduced in WCAG 2.2: An Overview&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-success-criterion-2-4-11-focus-not-obscured-minimum-level-aa-2eac529b-a557-470f-9d0d-9f99a1cb8b2f\">#1: Success Criterion 2.4.11 Focus Not Obscured (Minimum) &#8211; Level AA&nbsp;<\/h3>\n\n\n\n\n    <blockquote>\n        <p>When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-78d4156a-07c4-4246-a84f-14da1f5f605a\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>Let&#8217;s break down this Success Criterion. It&#8217;s all about making sure that when you&#8217;re using your keyboard to navigate a webpage, the element you&#8217;re focusing on is at least <strong>partly visible. <\/strong>This is really important for people who rely on a keyboard or similar device, as it helps them see where they are on the page.<\/p>\n\n\n\n<p>Now, in today&#8217;s world of intricate web designs, it&#8217;s understood that sometimes the element you&#8217;re focusing on might be slightly hidden by other elements. But the more hidden it is, the harder it gets to see. So, web designers and developers should try to reduce how often and how much this happens. Ideally, the focused element should always be\u00a0fully<strong> visible.<\/strong><\/p>\n\n\n\n<p>Elements like sticky footers, headers, and non-modal dialogs <strong>can <\/strong>overlap with the focused element, making it harder to see. For example, a sticky notification like a <strong>cookie banner<\/strong> would fail the Success Criterion if <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">it<strong>\u00a0completely<\/strong><\/span><strong> hides a focused element.<\/strong>\u00a0<\/p>\n\n\n\n<p>To fix this, the banner could be made <strong>modal<\/strong>, meaning it has to be dismissed before you can navigate the page, or scroll padding could be used to stop it from overlapping.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">accessibility<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Our Approach<\/h3><p class=\"advgb-infobox-text\"><em>When we come across a popup, modal window, or burger menu that obscures the opening element, we employ JavaScript to move the cursor to the first focusable element in that block. <\/em><br><em><br>It helps the user understand where they\u2019re right now by visually highlighting the state of the focused item. We also use a screen reader that reads highlighted text out loud. <\/em><\/p><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-success-criterion-2-4-12-focus-not-obscured-enhanced-level-aaanbsp-52c71639-1d2b-4f31-ba50-4d51a931958b\">#2: Success Criterion 2.4.12 Focus Not Obscured (Enhanced) &#8211; Level AAA&nbsp;<\/h3>\n\n\n\n\n    <blockquote>\n        <p>When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-b91e00e4-2eb5-4e20-97e5-9ac0a697614e\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>The primary objective of this Success Criterion is to ensure the item that&#8217;s receiving keyboard focus remains <strong>visible at all times. <\/strong>Just like the previous SC, this one is integral for users who rely on a keyboard or similar input devices, providing them with a clear understanding of their current location on a webpage.<\/p>\n\n\n\n<p>Examples of how this criterion can be met include the use of the same methods as in the previous SC: <strong>scroll padding <\/strong>to keep the focused item visible, <strong>modal dialogs<\/strong> that don&#8217;t obscure the focused item, <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">and<strong>\u00a0notifications<\/strong><\/span><strong> that disappear when they lose focus<\/strong> without hiding other controls. This ensures a more accessible and user-friendly experience for all.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-success-criterion-2-4-13-focus-appearance-level-aaanbsp-82579913-237a-45d7-a474-229234e827de\">#3: Success Criterion 2.4.13 Focus Appearance &#8211; Level AAA&nbsp;<\/h3>\n\n\n\n\n    <blockquote>\n        <p>When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:rnrnis at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and rnhas a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-74ff29af-579f-4ef1-8fbe-84e6ab7fd7e7\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>This Success Criterion has one key purpose: to ensure that when you&#8217;re using a keyboard to navigate, the <strong>focus indicator is always clear and noticeable<\/strong>. This is closely tied to the <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-visible\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">2.4.7 Focus Visible<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#non-text-contrast\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">1.4.11 Non-text Contrast<\/a> rules.<\/p>\n\n\n\n<p>While Focus Visible makes sure there&#8217;s a visible sign when an item gets keyboard focus, Focus Appearance sets a minimum level for how visible that sign should be. Similarly, Non-text Contrast ensures that a component stands out from the background, and Focus Appearance requires the <strong>focus indicator<\/strong> <strong>itself <\/strong>to <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">have<strong>\u00a0enough<\/strong><\/span><strong> contrast<\/strong>.<\/p>\n\n\n\n<p>Again, this is really important for anyone using a keyboard or similar device, like a switch or voice input. It&#8217;s essential to know where you are on the page. And it&#8217;s also crucial for people with low vision who might be relying on the keyboard to navigate.<\/p>\n\n\n\n<p>The focus indicator can <strong>take different forms<\/strong>. Though a <strong>solid outline<\/strong> around the focused item is encouraged, other types of equally noticeable indicators are also acceptable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-success-criterion-2-5-7-dragging-movements-level-aa-0ff684d3-97b7-4abc-bb82-83fa7e6b7f31\">#4: Success Criterion 2.5.7 Dragging Movements &#8211; Level AA<\/h3>\n\n\n\n\n    <blockquote>\n        <p>All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-bff3b47f-f1a8-4f6a-be63-9644ae1a488a\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>This SC is about making sure that if something on a <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">website<strong>\u00a0involves<\/strong><\/span> dragging movement, there&#8217;s\u00a0another way to do it with\u00a0just<strong> one click<\/strong>. This is important because not everyone can make precise dragging movements. Some people use devices like <strong>trackballs <\/strong>or <strong>eye-gaze systems<\/strong>, which can make dragging <strong>difficult <\/strong>and <strong>prone to errors<\/strong>.<\/p>\n\n\n\n<p>When an interface uses dragging, it usually involves <strong>four steps:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clicking to set a starting point.<\/li>\n\n\n\n<li>Holding that click while&#8230;<\/li>\n\n\n\n<li>&#8230;moving the pointer to a new location, then&#8230;<\/li>\n\n\n\n<li>&#8230;releasing the click at the endpoint.<\/li>\n<\/ol>\n\n\n\n<p>However, not everyone can accurately do the &#8220;<strong>press-and-hold while moving<\/strong>&#8221; part. That&#8217;s why we need to provide an alternative for users who have mobility issues but use a pointer, like a <strong>mouse, pen, or touch input.<\/strong><\/p>\n\n\n\n<p>This is <strong>separate <\/strong>from making things accessible <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">for<strong>\u00a0keyboard<\/strong><\/span><strong> use<\/strong>. Why? Because those using a <strong>touchscreen may not use a physical keyboard<\/strong>. They can&#8217;t use typical keyboard actions like tabbing or arrow keys when faced with a drag-and-drop control.\u00a0<\/p>\n\n\n\n<p>However, having a <strong>text input<\/strong> could be a good single-pointer alternative to dragging. For instance, if there&#8217;s a <strong>slider<\/strong>, having an input box next to it could allow users to <strong>enter an exact value<\/strong>. The <strong>on-screen keyboard<\/strong> that appears for touchscreen users provides a way to enter alphanumeric values <strong>with just one pointer.<\/strong><\/p>\n\n\n\n<p>Lastly, this criterion doesn&#8217;t apply to user-agent-enabled scrolling. It\u00a0doesn&#8217;t cover scrolling a page or using techniques like\u00a0CSS<strong> overflow<\/strong> to make a section of content scrollable.<\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">accessibility<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Our Approach<\/h3><p class=\"advgb-infobox-text\"><em>Regarding this specific Success Criterion, our primary focus revolves around carousels, for which we leverage <a href=\"https:\/\/swiperjs.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Swiper.js<\/a> to achieve the necessary functionality.<\/em><br><br><em>If the features provided by this JavaScript library fall short of meeting the SC for drag-and-drop movement, we resort to implementing a custom coding solution.<\/em><\/p><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-success-criterion-2-5-8-target-size-minimum-level-aa-583faf97-d4b2-4f90-8017-993d975068f0\">#5: Success Criterion 2.5.8 Target Size (Minimum) &#8211; Level AA<\/h3>\n\n\n\n\n    <blockquote>\n        <p>The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:rnrnSpacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;rnEquivalent: The function can be achieved through a different control on the same page that meets this criterion;rnInline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;rnUser agent control: The size of the target is determined by the user agent and is not modified by the author;rnEssential: A particular presentation of the target is essential or is legally required for the information being conveyed.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-67ba59c0-28f5-4221-99e4-bfecfbe6486c\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>So, the whole idea behind this Success Criterion is to make sure that when you&#8217;re trying <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">to<strong>\u00a0click<\/strong><\/span> or tap on something, you don&#8217;t accidentally activate something else that&#8217;s too close. This can be a real pain for\u00a0people<strong> who have a tough time with precise movements<\/strong>.\u00a0<\/p>\n\n\n\n<p>Hitting a small target gets even trickier when there&#8217;s another one nearby. By making these targets <strong>big enough<\/strong>, or at <strong>least putting enough space between them<\/strong>, we can help avoid those accidental clicks or taps.<\/p>\n\n\n\n<p>This rule really helps those dealing with hand tremors, spasticity, quadriplegia, or other conditions that affect their dexterity. Some of these people might use <strong>special input devices that aren&#8217;t as pinpoint accurate as your typical mouse or trackpad.<\/strong> The bright side is that by meeting this requirement, we&#8217;re also making touchscreen interfaces easier to navigate.<\/p>\n\n\n\n<p>Just to clear things up, this Success Criterion <strong>sets a minimum size for targets<\/strong> and, if that&#8217;s not possible, a <strong>minimum amount of space between targets.<\/strong> So, technically, you could still have tiny, hard-to-hit targets and meet this requirement, <strong>as long as they&#8217;re not too close to any other targets<\/strong>.&nbsp;<\/p>\n\n\n\n<p>But let&#8217;s be real, bigger targets are going to be easier for a lot of people to use. So, the best practice is to at <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">least<strong>\u00a0hit<\/strong><\/span><strong> the minimum size requirement of the Success Criterion<\/strong>, no matter how much space you&#8217;ve got around your targets.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">accessibility<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Our Approach<\/h3><p class=\"advgb-infobox-text\"><em>In this context, the design plays a crucial role. If the element is very small, it should either be isolated from neighboring elements or positioned a bit farther away to allow for comfortable interaction.\u00a0<\/em><br><em><br>We frequently encounter this situation in mobile menus, especially when dealing with a small arrow as the nested menu opener. In such cases, we ensure that the button is appropriately sized to enable easy tapping for users.<\/em><\/p><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-success-criterion-3-2-6-consistent-help-level-anbsp-05da3ab2-ad6f-4f2e-8a0f-ff541cd98d57\">#6: Success Criterion 3.2.6 Consistent Help &#8211; Level A&nbsp;<\/h3>\n\n\n\n\n    <blockquote>\n        <p>If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:rnrnHuman contact details;rnHuman contact mechanism;rnSelf-help option;rnA fully automated contact mechanism.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-80a7abad-3b71-42aa-ac30-98c88d6bcaf1\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>Basically, the idea behind this SC is to make sure <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">people<strong>\u00a0can<\/strong><\/span> find help when they need it on a website. It&#8217;s all about consistency &#8211; if you put your help features in the same spot across different pages, users will have an easier time finding them. This isn&#8217;t about those little extras like spell checkers or form instructions, but more about the\u00a0big-picture<strong> help.<\/strong><\/p>\n\n\n\n<p>Making sure your help feature is in the same place on each page makes it a lot simpler for users to find. So, if you&#8217;ve got a link or some kind of help <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">button<strong>\u00a0in<\/strong><\/span><strong> the header of one page<\/strong>, it&#8217;s best to <strong>keep it in the header on other pages<\/strong> too.\u00a0<\/p>\n\n\n\n<p>It could be something like a contact phone number right there on the page, or even a link that takes you straight to a contact page. But whatever it is, it needs to <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">be<strong>\u00a0in<\/strong><\/span><strong> the same spot on each page.<\/strong><\/p>\n\n\n\n<p>When checking to see if this SC is met, you need to see where the help feature is in relation to the rest of the content on the page. If other content that&#8217;s on every page <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">comes<strong>\u00a0before<\/strong><\/span> the help feature, then it should be the same on this page. And anything that comes after the help feature on other pages should come after it on this page,<strong> <\/strong>too.<\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">create<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Note<\/h3><p class=\"advgb-infobox-text\"><em>If the help feature is visually in a different spot, but <strong>in the same order<\/strong>, it might <strong>not be as helpful <\/strong>from a user&#8217;s perspective, but<strong> it wouldn&#8217;t technically fail this criterion<\/strong>.<\/em><\/p><\/div><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>When someone&#8217;s having trouble doing something on a website (or part of a website, which we call a set of web pages), some people with certain types of disabilities might not be able to figure it out without some extra help. They might be struggling with filling out a form, finding a document, or locating a page with the info they need to finish a task.<\/p>\n\n\n\n<p>Without help, some users might just give up. They could also mess up a task, or end up needing help from someone who might not keep their private info safe.<\/p>\n\n\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">accessibility<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Our Approach<\/h3><p class=\"advgb-infobox-text\"><em>This issue should ideally be addressed while planning the website\u2019s structure. When we encounter inconsistencies in how user assistance is provided, we bring this to the client&#8217;s attention and recommend that they should reconsider the website&#8217;s structure, especially if accessibility is crucial for them.<\/em><\/p><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-success-criterion-3-3-7-redundant-entry-level-anbsp-c447381b-0b3a-4238-844b-7e02b6b198be\">#7: Success Criterion 3.3.7 Redundant Entry &#8211; Level A&nbsp;<\/h3>\n\n\n\n\n    <blockquote>\n        <p>Information previously entered by or provided to the user that is required to be entered again in the same process is either: rnrnauto-populated,rnor available for the user to select.rnrnExcept when:rnrnre-entering the information is essential,rnthe information is required to ensure the security of the content, or rnpreviously entered information is no longer valid.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-b342ca0b-34c4-4122-a153-801e042755f6\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>This SC&nbsp;is designed to simplify user experiences, particularly for <strong>multi-step processes<\/strong>. It&#8217;s about not asking you to input the <strong>same information twice <\/strong>within a single process.<\/p>\n\n\n\n<p>Remembering information can be a challenge, especially for users <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">with<strong>\u00a0co<\/strong><\/span><strong>gnitive or memory issues<\/strong>. It&#8217;s also tiresome for everyone else, as the effort to recall information can accelerate fatigue and lead to errors.<\/p>\n\n\n\n<p>While the browser&#8217;s <strong>autocomplete feature offers some help<\/strong>, <strong>it doesn&#8217;t fully address the problem<\/strong>. It&#8217;s <strong>up to the website <\/strong>to provide you with the information you&#8217;ve already entered during a process.<\/p>\n\n\n\n<p>This criterion doesn&#8217;t imply that websites should store your data between sessions. It <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">only<strong>\u00a0applies<\/strong><\/span><strong> within a single activity<\/strong>. However, if a process involves different domains, such as a transaction with a <strong>third-party payment provider<\/strong>, it&#8217;s <strong>included<\/strong> in this criterion.<\/p>\n\n\n\n<p>\u201cAvailable for the user to&nbsp;select&#8221; includes various methods of populating fields, whether it&#8217;s choosing an option from a dropdown, copying text into an input field, or using a checkbox to reuse information.<\/p>\n\n\n\n<p>The data that&#8217;s &#8220;available for the user to select&#8221; should ideally <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">be<strong>\u00a0visible<\/strong><\/span><strong> on the same page <\/strong>and closely associated with the input field. But it might also be elsewhere on the page, perhaps <strong>hidden behind a show\/hide component.<\/strong><\/p>\n\n\n\n<p>This criterion <strong>doesn&#8217;t apply<\/strong> if you&#8217;re providing data in a different way, like <strong>uploading a document<\/strong>. It <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">also<strong>\u00a0doesn&#8217;t<\/strong><\/span><strong> affect how passwords are auto-filled by your browser.<\/strong><\/p>\n\n\n\n<p>While this criterion doesn&#8217;t specifically discuss privacy, it&#8217;s important to ensure data protection when implementing features like auto-population. There&#8217;s a need to avoid exposing personal info while preventing redundant entry.<\/p>\n\n\n\n<p>Finally, there are <strong>exceptions <\/strong>to this rule. For example, if re-entering info is essential, for <strong>security measures<\/strong>, or if the previously entered information <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">is<strong>\u00a0no<\/strong><\/span><strong> longer valid.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-success-criterion-3-3-8-accessible-authentication-minimum-level-aa-2fa5f487-a6dc-4299-a66b-623334d0c023\">#8: Success Criterion 3.3.8 Accessible Authentication (Minimum) &#8211; Level AA<\/h3>\n\n\n\n\n    <blockquote>\n        <p>A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:rnrnAlternativernAnother authentication method that does not rely on a cognitive function test.rnrnMechanismrnA mechanism is available to assist the user in completing the cognitive function test.rnrnObject RecognitionrnThe cognitive function test is to recognize objects.rnrnPersonal ContentrnThe cognitive function test is to identify non-text content the user provided to the Web site.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-af36cfdf-487c-43d9-aac1-504fc7e34701\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>This rule is all about making sure there&#8217;s a simple, <strong>safe way to sign in<\/strong>. Most websites use <strong>usernames <\/strong>and <strong>passwords<\/strong>, but remembering or writing down all that info can be really <strong>tough<\/strong>, especially for people with certain <strong>cognitive disabilities<\/strong>.<\/p>\n\n\n\n<p>While some sites use things like recognizing objects or user-provided non-text content to help with this, it&#8217;s not the best solution for everyone.<br><br>So, instead of using a regular Captcha on your website, \u0441onsider some alternative methods. One of the safest approaches is to use the reCAPTCHA from Google. It can be hidden, and in most cases, the user doesn\u2019t even notice that it\u2019s there.&nbsp;<\/p>\n\n\n\n<p>As for other types of Captchas, make sure that they meet the accessibility requirements before incorporating them into your website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-success-criterion-3-3-9-accessible-authentication-enhanced-level-aaa-59bd5cc4-f2e2-4a9a-a2f1-594826b3ba18\">#9: Success Criterion 3.3.9 Accessible Authentication (Enhanced) &#8211; Level AAA<\/h3>\n\n\n\n\n    <blockquote>\n        <p>A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:rnrnAlternativernAnother authentication method that does not rely on a cognitive function test.rnrnMechanismrnA mechanism is available to assist the user in completing the cognitive function test.<\/p>\n        <footer class=\"author-block\">\n                        <div class=\"text-holder\">\n                                            <\/div>\n        <\/footer>\n    <\/blockquote>\n        \n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-reasoning-behind-this-sc-introductionnbsp-2a8dc1f7-12ed-4fa9-a06c-01f4382e070c\">The Reasoning Behind This SC Introduction&nbsp;<\/h4>\n\n\n\n<p>Let&#8217;s break it down. The idea here is to make sure everyone can easily and safely log in, access stuff, and get things done. It&#8217;s a lot like Accessible Authentication (the previous SC), but without <strong>any exceptions for objects <\/strong>or <strong>user-provided content.<\/strong><\/p>\n\n\n\n<p>When you&#8217;re going through the login process:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You won&#8217;t be shown a bunch of images, videos, or audio clips and asked to pick the one you provided;<\/li>\n\n\n\n<li>You won&#8217;t be shown a bunch of images and asked to pick out the ones with a specific object, like a car.<\/li>\n<\/ul>\n\n\n\n<p>What&#8217;s the payoff? Even if a user has problems with memory, reading (like dyslexia), numbers (like dyscalculia), or perception-processing limitations, they\u2019ll still be able to log in. Their cognitive abilities won&#8217;t be a barrier.<\/p>\n\n\n\n<p>Here are some <strong>examples <\/strong>of websites that meet this SC:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A website uses properly labeled username (or email) and password fields for login.<\/strong> Your <a href=\"https:\/\/www.astrosafe.co\/tools\/browser\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">browser<\/a> or a third-party <a href=\"https:\/\/nordpass.com\/password-manager\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">password manager extension<\/a> can figure out what the fields are for and automatically fill in your username and password.<\/li>\n\n\n\n<li><strong>A website lets you paste text. <\/strong>You can use a third-party password manager to store your login details, copy them, and paste them right into the login form.<\/li>\n\n\n\n<li><strong>A website uses WebAuthn <\/strong>so you can use your device instead of a username\/password to log in. Your device could use any method it has available. On laptops and phones, common methods are facial-scan, fingerprint, and PIN (Personal Identification Number). The website doesn&#8217;t enforce any particular method\u2014it assumes you&#8217;ll set up something that works for you.<\/li>\n\n\n\n<li><strong>A website lets you log in with a third-party provider using the OAuth method.<\/strong><\/li>\n\n\n\n<li><strong>A website that needs two-factor authentication gives you multiple options for the 2nd factor, <\/strong>including a USB-based method where you just press a button to enter a time-based token.<\/li>\n\n\n\n<li><strong>A website that needs two-factor authentication shows a QR code<\/strong> that you can scan with an app on your device to confirm who you are.<\/li>\n\n\n\n<li><strong>A website that needs two-factor authentication sends a notification to your device.<\/strong> You have to use your device&#8217;s authentication method (like a user-defined PIN, fingerprint, or facial recognition) to confirm who you are.<\/li>\n<\/ul>\n\n\n\n<p>That concludes our review. WCAG 2.2 is an important milestone in the evolution of web accessibility standards. It goes beyond the mere compliance checklist; it aims at creating a more inclusive web where everyone has equal access and opportunities.<\/p>\n\n\n\n<p>As technology continues to evolve, it&#8217;s paramount that accessibility remains at the forefront of web design and development, ensuring that no one is left behind in the digital world.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getdevdone-champions-full-compliance-with-wcag-2-2-success-criteria-7c47650a-2185-40e6-b029-9e38f64828f4\">GetDevDone Champions Full Compliance With WCAG 2.2 Success Criteria<\/h2>\n\n\n\n<p>Right after WCAG 2.2 was released, our developers dove headfirst into understanding its intricacies, focusing on the new success criteria we\u2019ve discussed in this post. And you know what? They discovered that we&#8217;ve been incorporating these requirements into our clients&#8217; web solutions for quite some time.<\/p>\n\n\n\n<p>From ensuring visible focus on elements and consistent help to providing varied authentication methods, we\u2019re committed to accommodating users of all abilities.&nbsp;<\/p>\n\n\n\r\n    <section class=\"banner-block image-full-height\" style=\"background-color: #0f2ab1; color: #fffff0;\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2024\/02\/20151935\/Banner-1.png\" alt=\"decor\" \/><\/div>\r\n                            <div class=\"text-holder\">\r\n                <h2>Is your front-end ready for accessibility requirements?<\/h2>                <p> WCAG-focused implementation with performance and quality built-in.<\/p>\n                                    <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/order-now\/frontend\/design-to-frontend\" target=\"_self\">Order now<\/a>\r\n                            <\/div>\r\n                    <\/section>    \r\n\r\n\n\n<section id=\"faq-section-block_825b4fb41e82852a805f9e9593f74bbd\" class=\"faq new-faq-design\" aria-labelledby=\"faq-title-1139082611\">\n\t<h2 id=\"faq-title-1139082611\">WCAG 2.2. and Web Accessibility FAQs<\/h2>\n\t\t\t<div class=\"accordion-filter accordion-faq\">\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhich WCAG 2.2 success criteria are most likely to affect existing websites?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The WCAG 2.2 criteria most likely to create real update work are the ones tied to common interface components: focus visibility, touch target size, dragging alternatives, repeated form entry, and authentication.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In practice, the first problems often appear around sticky headers and cookie banners that hide keyboard focus, mobile menu arrows that are too small to tap, carousels that depend on dragging, multi-step forms that ask users to re-enter the same data, and login flows that rely on memory tests, puzzles, or hard-to-use CAPTCHA patterns.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The AAA criteria may not be required for every project, but they can still expose design system weaknesses. If focus states are barely visible, inconsistent, or easily hidden by overlays, the site may pass a narrower requirement and still be frustrating to use.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tDo all nine new WCAG 2.2 success criteria apply to every website?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">No, all nine WCAG 2.2 success criteria do not apply equally to every website. Their relevance depends on the site&#8217;s features, target conformance level, and user flows.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For example, Dragging Movements matters when a site uses drag-and-drop controls, sliders, maps, sortable lists, or carousels. Accessible Authentication matters when users need to log in. Redundant Entry matters in multi-step processes where users are asked to provide the same information again. Consistent Help matters when help mechanisms repeat across multiple pages.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Focus and target-size criteria tend to be broader because most websites have buttons, links, menus, forms, banners, and overlays. Still, the right approach is not to assume every page has every issue. Review the actual components and flows, then map each issue to the relevant criterion.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat is the difference between WCAG 2.2 Level A, AA, and AAA criteria in practice?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Level A is the minimum conformance level, Level AA includes Level A plus additional requirements, and Level AAA includes A, AA, and AAA criteria.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In practical website work, Level AA is often the main target because it gives teams a stronger accessibility baseline without requiring every enhanced AAA criterion. That said, the correct target should come from the client&#8217;s legal obligations, procurement requirements, industry rules, or internal policy. It should not be guessed during development.<\/span><\/p>\n<p><span style=\"font-weight: 400\">AAA criteria are not useless, but they need judgment. Some are good design and QA goals, especially around focus clarity. Others may be difficult to apply across a full site. Treat AAA as a deliberate scope decision, not as something silently added at the end of a project.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tIs updating a website for WCAG 2.2 mostly a design task or a development task?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Updating a website for WCAG 2.2 is both a design and development task. Design affects target sizes, spacing, visible focus states, help placement, and how interactions are presented. Development affects keyboard behavior, focus management, form logic, authentication, component states, and whether the design actually works with assistive technologies.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The risky part is the handoff gap. A design may show a clean modal, menu, or carousel, but the accessibility behavior only becomes real when it is coded and tested. For example, a burger menu may look fine visually but still fail if focus moves behind the menu, the opening control is obscured, or the nested menu button is too small on mobile.<\/span><\/p>\n<p><span style=\"font-weight: 400\">So the work should not sit only with designers or only with developers. It needs design review, implementation rules, and accessibility QA on staging.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhich website elements should be checked first for WCAG 2.2 issues?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Start with components that users interact with repeatedly or that can block task completion. These are usually the places where WCAG 2.2 issues become visible fastest:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">sticky headers, sticky footers, cookie banners, and notification bars<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">popups, modal windows, burger menus, dropdowns, and mobile navigation<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">carousels, sliders, drag-and-drop areas, and sortable lists<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">small icon buttons, arrows, tabs, pagination, and close buttons<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">checkout flows, quote forms, lead forms, registration forms, and account flows<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">login, CAPTCHA, password reset, and two-factor authentication<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">contact links, chat widgets, help buttons, and support blocks repeated across pages<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">For agencies, the efficient route is to test reusable templates and components first, not random individual pages. If a mobile menu or modal pattern fails in one place, it may fail across every client page using that component.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow does WCAG 2.2 change accessibility QA for mobile menus, buttons, and touch targets?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">WCAG 2.2 makes mobile interaction QA more specific because Target Size (Minimum) adds a measurable requirement for pointer targets. Small controls can still be acceptable in some cases, but only if they meet the size rule, have enough spacing, or fall under a valid exception.<\/span><\/p>\n<p><span style=\"font-weight: 400\">This matters for mobile menus because nested menu arrows, close buttons, hamburger icons, pagination dots, carousel controls, and small filter toggles are often visually compact. They may look acceptable in a design mockup but become hard to tap on real devices, especially when adjacent controls sit too close together.<\/span><\/p>\n<p><span style=\"font-weight: 400\">QA should include more than checking whether the layout is responsive. Test whether touch targets are large enough, whether focus remains visible, whether menus can be opened and closed predictably, and whether users can complete the same action without relying on precise dragging.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat should agencies check before handing off a WCAG 2.2-sensitive design to developers?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Agencies should check whether the design gives developers enough accessibility information to implement the interaction correctly. A WCAG 2.2-sensitive handoff should not include only static screens.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Before<\/span><a href=\"https:\/\/getdevdone.com\/figma-to-html.html\"> <span style=\"font-weight: 400\">Figma-to-HTML handoff<\/span><\/a><span style=\"font-weight: 400\">, check:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">focus states for links, buttons, fields, menus, modals, and custom controls<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">mobile target sizes and spacing for small controls<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">modal, popup, dropdown, and burger menu behavior<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">alternatives for drag-only interactions<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">repeated help placement across templates<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">multi-step form behavior where previously entered data may reappear<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">login, CAPTCHA, password reset, and 2FA assumptions<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">This prevents accessibility from becoming guesswork during development. It also reduces rework because developers can build the intended behavior instead of reverse-engineering it from visual layouts.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tHow much work is usually involved in updating a WCAG 2.1-compliant site to WCAG 2.2?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Updating a well-built WCAG 2.1-compliant site to WCAG 2.2 can be a focused QA and component-fix task, but it is not safe to assume it will be small. The effort depends on how many interactive patterns the site uses and how cleanly they were built.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A simple marketing site with standard links, forms, and navigation may need a relatively narrow review: focus behavior, touch targets, repeated help, and a few forms or menus. A site with custom carousels, account areas, payment flows, multi-step forms, dashboards, or heavy JavaScript can require deeper development work.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agency projects, the practical way to estimate effort is to audit representative templates and shared components first. If the same modal, menu, or form pattern appears across many pages, fixing the component once may solve multiple issues. If every page has custom behavior, the cost rises quickly.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tCan plugins, libraries, or frameworks automatically solve WCAG 2.2 compliance issues?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">No, plugins, libraries, and frameworks can support WCAG 2.2 implementation, but they cannot automatically guarantee compliance. Accessibility depends on how the component is configured, styled, integrated, and tested in the actual website.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A carousel library may provide useful navigation controls, but it still needs to support keyboard operation, visible focus, alternatives to dragging where required, and usable controls on mobile. A form plugin may generate fields quickly, but it will not automatically solve repeated-entry logic, confusing validation, or a multi-step process that asks users to retype the same information.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The safer view is simple: use accessible libraries where they help, but test the final implementation. If a library falls short, the fix may require custom front-end logic, design adjustments, or replacing the component pattern entirely.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"ac\">\n\t\t\t\t\t<h3 class=\"ac-header\">\n\t\t\t\t\t\t<button class=\"ac-trigger\">\n\t\t\t\t\t\t\tWhat is the safest next step after reading about the new WCAG 2.2 criteria?\t\t\t\t\t\t\t<svg width=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\" focusable=\"false\"\n\t\t\t\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t\t<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div class=\"ac-panel\">\n\t\t\t\t\t\t<div class=\"ac-panel-inner custom-scroll\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The safest next step is a focused WCAG 2.2 gap review, not a full redesign by default. Start by checking the site&#8217;s shared components and key user flows against the new A and AA criteria, then treat AAA items as separate enhancement candidates unless the project explicitly targets Level AAA.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A useful review should produce a clear fix backlog, not just a list of failed checks. Each issue should identify the affected component, the relevant success criterion, the user impact, the likely owner, and how the fix should be retested on staging.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For agencies managing client sites, this is also the right moment to check scope and responsibility. If the client needs implementation help,<\/span><a href=\"https:\/\/getdevdone.com\/front-end-development-services.html\"> <span style=\"font-weight: 400\">front-end development support<\/span><\/a><span style=\"font-weight: 400\"> should be planned with QA and regression testing, not added casually after the build is almost finished.<\/span><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n<style class=\"advgb-styles-renderer\">#advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47, .advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 {background-color: #f2f3f9;padding: 64px 64px 64px 64px;border: 2px solid #000000;border-radius: 8px;}#advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-icon-container, .advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-icon-container {background-color: #f2f3f9;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-icon-container i, .advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-icon-container i {color: #333;font-size: 56px;display: block;}#advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;font-size: 34px;white-space: pre-wrap;}#advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-fbe31a3e-b952-406f-b337-8f4811956d47 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;font-size: 20px;white-space: pre-wrap;}#advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3, .advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 {background-color: #f2f3f9;padding: 64px 64px 64px 64px;border: 2px solid #000000;border-radius: 8px;}#advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-icon-container, .advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-icon-container {background-color: #f2f3f9;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-icon-container i, .advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-icon-container i {color: #333;font-size: 56px;display: block;}#advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;font-size: 34px;white-space: pre-wrap;}#advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-2b291df6-5084-4395-bc38-95aac4019bc3 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;font-size: 20px;white-space: pre-wrap;}#advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a, .advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a {background-color: #f2f3f9;padding: 64px 64px 64px 64px;border: 2px solid #000000;border-radius: 8px;}#advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-icon-container, .advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-icon-container {background-color: #f2f3f9;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-icon-container i, .advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-icon-container i {color: #333;font-size: 56px;display: block;}#advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;font-size: 34px;white-space: pre-wrap;}#advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-b15cb6ea-abd6-4c6a-a86b-9d9548ac295a .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;font-size: 20px;white-space: pre-wrap;}#advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233, .advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 {background-color: #f2f3f9;padding: 64px 64px 64px 64px;border: 2px solid #000000;border-radius: 8px;}#advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-icon-container, .advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-icon-container {background-color: #f2f3f9;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-icon-container i, .advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-icon-container i {color: #333;font-size: 56px;display: block;}#advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;font-size: 34px;white-space: pre-wrap;}#advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-cd98b9f8-f143-469d-931d-c5d6285b2233 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;font-size: 20px;white-space: pre-wrap;}#advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295, .advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 {background-color: #f2f3f9;padding: 64px 64px 64px 64px;border: 2px solid #000000;border-radius: 8px;}#advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-icon-container, .advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-icon-container {background-color: #f2f3f9;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-icon-container i, .advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-icon-container i {color: #333;font-size: 56px;display: block;}#advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;font-size: 34px;white-space: pre-wrap;}#advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-6b3e6ed2-a5b1-4d29-be76-eb6a4aa6a295 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;font-size: 20px;white-space: pre-wrap;}<\/style>","protected":false},"excerpt":{"rendered":"<p>The new WCAG 2.2 success criteria tried and tested, and how they impact web accessibility, compliance, usability, and inclusive design.<\/p>\n","protected":false},"author":4,"featured_media":18661,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[739,748],"tags":[767,852],"class_list":["post-18659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-website-development-services","tag-accessibility","tag-regulated-industries"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">Guide<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Website development services<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Guide<\/span>","<span class=\"advgb-post-tax-term\">Website development services<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Accessibility<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/website-development-services\" class=\"advgb-post-tax-term\">Regulated industries<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Accessibility<\/span>","<span class=\"advgb-post-tax-term\">Regulated industries<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 2 weeks ago"},"absolute_dates":{"created":"Posted on November 1, 2023","modified":"Updated on May 22, 2026"},"absolute_dates_time":{"created":"Posted on November 1, 2023 3:41 pm","modified":"Updated on May 22, 2026 11:42 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2023\/10\/31111623\/Intro-preview-1.png"},"featured_post_color":"#e88080","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"COO of GetDevDone","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 10<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"key-web-accessibility-laws-private-sector-uk-us-eu","name":"Key Web Accessibility Laws for the Private Sector in the USA, UK, and EU"},"next_post":{"slug":"consent-management-platforms","name":"Consent Management Platforms: The Best  Solution for Small Businesses to Control Cookie Permissions on Their Websites"},"related_posts":["how-to-optimize-your-website-for-ai-search-results","building-an-insurance-website-essential-pages-to-include","how-to-choose-a-store-name-dos-and-donts"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/18659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=18659"}],"version-history":[{"count":144,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/18659\/revisions"}],"predecessor-version":[{"id":26005,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/18659\/revisions\/26005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/18661"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=18659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=18659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=18659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}