--- title: How to Build More Accessible Websites with WCAG 2.2 description: A practical walkthrough of WCAG 2.2 Level A and AA success criteria as they apply to everyday frontend decisions, covering semantic HTML, text alternatives,... canonical: https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Build More Accessible Websites with WCAG 2.2 | daily.dev og:description: A practical walkthrough of WCAG 2.2 Level A and AA success criteria as they apply to everyday frontend decisions, covering semantic HTML, text alternatives,... og:url: https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0 og:image: https://api.daily.dev/og/posts/IoNJqlod0.png og:image:alt: How to Build More Accessible Websites with WCAG 2.2 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Build More Accessible Websites with WCAG 2.2 **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 28 min read · 2 upvotes · 0 comments ## Summary A practical walkthrough of WCAG 2.2 Level A and AA success criteria as they apply to everyday frontend decisions, covering semantic HTML, text alternatives, color and contrast, keyboard operability, focus visibility, pointer target size and dragging, form labeling and error messages, redundant entry, consistent help, accessible authentication, correct ARIA usage, dynamic status messages, and a testing methodology combining automated tools, keyboard testing, zoom/reflow checks, and assistive technology testing. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What does WCAG 2.2's Focus Not Obscured (Minimum) success criterion require for sticky headers? Success Criterion 2.4.11 Focus Not Obscured (Minimum), added in WCAG 2.2 at Level AA, requires that when a component receives keyboard focus, author-created content such as a sticky header must not completely hide it; at least part of the focused component must remain visible. Using CSS scroll-padding-top can help with scroll positioning but is not by itself a guaranteed fix. _Developers building sticky headers can track WCAG changes like this one via daily.dev before shipping a layout that hides focus._ ### What minimum target size does WCAG 2.2 require for pointer controls like icon buttons? Success Criterion 2.5.8 Target Size (Minimum), a new WCAG 2.2 Level AA requirement, sets a minimum target size of 24 by 24 CSS pixels, or an equivalent spacing alternative, subject to several exceptions. The visible icon inside a button can stay smaller than the target as long as the clickable area meets this minimum, which matters for dense interfaces like icon buttons and toolbars. _Anyone auditing touch targets can weigh WCAG 2.2's sizing rule against real interface density using daily.dev._ ### Does WCAG 2.2 prohibit blocking paste in password fields? No, but Success Criterion 3.3.8 Accessible Authentication (Minimum) at Level AA restricts cognitive function tests like passwords unless an accepted alternative or assistance mechanism exists. The W3C specifically names password-manager support and copy-and-paste as mechanisms that reduce cognitive burden, so blocking paste on a password field works against this criterion even though passwords themselves remain permitted. _Teams deciding how to handle password fields can dig into accessible authentication guidance through daily.dev._ ## Similar posts on daily.dev - [Hidden Web Accessibility Issues Most Designers Miss in 2026](https://daily.dev/posts/hidden-web-accessibility-issues-most-designers-miss-in-2026-gm6w0zamx) · Netguru · 0 upvotes · 0 comments - [An Accessible Guide to WCAG 3.3.9: Going for Gold](https://daily.dev/posts/an-accessible-guide-to-wcag-3-3-9-going-for-gold-n3cbqqeio) · Auth0 · 0 upvotes · 0 comments - [WCAG Accessibility Requirements: A Guide for Project Managers](https://daily.dev/posts/wcag-accessibility-requirements-a-guide-for-project-managers-qposkesss) · RUBYLAND · 1 upvotes · 0 comments - [If It's Not Accessible, It's Not Design](https://daily.dev/posts/if-it-s-not-accessible-it-s-not-design-eyj1yetec) · DEV · 3 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Build More Accessible Websites with WCAG 2.2","url":"https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0"},"datePublished":"2026-08-18T20:13:36.742Z","dateModified":"2026-09-14T07:55:08.208Z","description":"A practical walkthrough of WCAG 2.2 Level A and AA success criteria as they apply to everyday frontend decisions, covering semantic HTML, text alternatives,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/830a64d11bd438da87e6c0feaeb96c80?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/830a64d11bd438da87e6c0feaeb96c80?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"freeCodeCamp","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html,accessibility","timeRequired":"PT28M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"How to Build More Accessible Websites with WCAG 2.2"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-build-more-accessible-websites-with-wcag-2-2-ionjqlod0#faq","mainEntity":[{"@type":"Question","name":"What does WCAG 2.2's Focus Not Obscured (Minimum) success criterion require for sticky headers?","acceptedAnswer":{"@type":"Answer","text":"Success Criterion 2.4.11 Focus Not Obscured (Minimum), added in WCAG 2.2 at Level AA, requires that when a component receives keyboard focus, author-created content such as a sticky header must not completely hide it; at least part of the focused component must remain visible. Using CSS scroll-padding-top can help with scroll positioning but is not by itself a guaranteed fix. Developers building sticky headers can track WCAG changes like this one via daily.dev before shipping a layout that hides focus."}},{"@type":"Question","name":"What minimum target size does WCAG 2.2 require for pointer controls like icon buttons?","acceptedAnswer":{"@type":"Answer","text":"Success Criterion 2.5.8 Target Size (Minimum), a new WCAG 2.2 Level AA requirement, sets a minimum target size of 24 by 24 CSS pixels, or an equivalent spacing alternative, subject to several exceptions. The visible icon inside a button can stay smaller than the target as long as the clickable area meets this minimum, which matters for dense interfaces like icon buttons and toolbars. Anyone auditing touch targets can weigh WCAG 2.2's sizing rule against real interface density using daily.dev."}},{"@type":"Question","name":"Does WCAG 2.2 prohibit blocking paste in password fields?","acceptedAnswer":{"@type":"Answer","text":"No, but Success Criterion 3.3.8 Accessible Authentication (Minimum) at Level AA restricts cognitive function tests like passwords unless an accepted alternative or assistance mechanism exists. The W3C specifically names password-manager support and copy-and-paste as mechanisms that reduce cognitive burden, so blocking paste on a password field works against this criterion even though passwords themselves remain permitted. Teams deciding how to handle password fields can dig into accessible authentication guidance through daily.dev."}}]} ```