[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-site-config":3,"$ffDifsrWUYMK23haOb1M5xx7gAUcGjHxiovZDkkWnsOk":6,"mdc--i07d57-key":67},{"gaMeasurementId":4,"bookingUrl":5},"G-7BYTDCVDDR","https:\u002F\u002Ftidycal.com\u002Fcmdcntr\u002F30-minute-meeting",{"tool":7},{"id":8,"slug":9,"name":10,"kind":11,"summary":12,"version":13,"coverImageUrl":14,"description":15,"githubUrl":14,"downloadUrl":14,"promptBody":14,"fileSize":14,"downloadCount":16,"relatedArticles":17,"updatedAt":66,"publishedAt":66},"1cce05ea-d220-42c4-a608-256d0bfb6a78","wcag-22-aa-checklist","WCAG 2.2 AA Quick Reference and Component Checklist","file","A component-level WCAG 2.2 AA checklist for teams building in a CMS. The working bar we ship components against.","1.0",null,"## What this is\n\nA component-level checklist for Web Content Accessibility Guidelines (WCAG) 2.2 Level AA, written for teams building and maintaining components in a content management system (CMS) rather than for auditors. It is the working bar we hold components to before they ship, and it is deliberately short enough to run on every component instead of once a year.\n\nWCAG 2.2 is additive over 2.1: everything in 2.1 still applies, and 2.2 adds the criteria in the first section below. The Americans with Disabilities Act (ADA) Title II rule names WCAG 2.1 AA as the technical standard, with compliance dates of April 26, 2027 for public entities serving 50,000 or more people and April 26, 2028 for smaller entities. Building to 2.2 clears that bar with margin.\n\n## The WCAG 2.2 additions that hit components\n\n- **Focus not obscured.** A focused element is never fully hidden behind sticky headers, cookie banners, or other fixed chrome. Use scroll margin and reserve space; verify with the keyboard.\n- **Dragging movements.** Every drag interaction (sliders, carousels, reordering) has a single-pointer or keyboard alternative, usually a button.\n- **Target size (minimum).** Interactive targets are at least 44 by 44 CSS pixels, with spacing between adjacent hit areas. Watch footer link farms and icon-only controls.\n- **Consistent help.** Help and contact patterns stay in the same relative location across templates. Put them in shared chrome.\n- **Accessible authentication.** Login does not require a cognitive test (like transcribing a code) with no accessible alternative such as a password manager or copy and paste.\n\n## Per-component checklist\n\nRun this before a component merges. A component is done when every line is true or the exception is documented in the component folder.\n\n**Keyboard**\n- [ ] Every interactive element is reachable and operable by keyboard alone.\n- [ ] Focus order matches visual order. No positive `tabindex`.\n- [ ] A visible focus indicator is present on every focusable element (`:focus-visible`, tokenized, not removed globally).\n- [ ] Modals and drawers trap focus while open and restore focus to the trigger on close.\n- [ ] Focus never lands under fixed or sticky chrome.\n\n**Semantics and names**\n- [ ] Interactive elements use real semantic elements (`\u003Cbutton>`, `\u003Ca>`), not styled generics.\n- [ ] Every control has an accessible name, including icon-only buttons and inputs.\n- [ ] Headings are in order and describe the structure, not the styling.\n- [ ] Images have alt text; informative images require it, decorative images use empty alt.\n\n**Reach and motion**\n- [ ] Touch targets are at least 44 by 44 CSS pixels with adequate spacing.\n- [ ] Drag interactions have a non-drag alternative.\n- [ ] Auto-advancing content (carousels) has a pause control and respects reduced-motion.\n\n**Content and contrast**\n- [ ] Text contrast meets AA against the design tokens, not a one-off hex value.\n- [ ] Link text describes its destination. No \"click here\".\n- [ ] Error messages are programmatically associated with their fields.\n\n**CMS enforcement (the durable part)**\n- [ ] The most likely author mistake for this component is prevented by a field constraint (required alt, max length, allowed link types, droplink instead of free text).\n- [ ] Front-end accessibility that an author could override is instead enforced at the field, rendering-default, or render-time layer.\n\n## Tooling honesty\n\nAutomated scans (Axe, Lighthouse) are the floor of this checklist, not the ceiling. A Lighthouse accessibility score of 100 means the automated subset found nothing, not that the component meets AA. Keyboard flow, screen reader announcements, and whether the content makes sense are human checks that no scanner replaces. Overlay widgets do not make a site compliant. Use the scanners to keep a passing component from regressing, and use a keyboard and a screen reader to decide whether it passed in the first place.\n\n## Companion reading\n\nThis checklist is the component-level bar behind [WCAG 2.2 vs 2.1 for Sitecore Teams](\u002Fblog\u002Fenterprise-cms\u002Fwcag-2-2-vs-2-1-sitecore-teams) and the review pass in [AI-Generated UI Components Fail WCAG 2.2](\u002Fblog\u002Fai-best-practices\u002Fai-generated-ui-components-fail-wcag-2-2-review-checklist).",0,[18,44],{"id":19,"slug":20,"title":21,"description":22,"coverImageUrl":23,"coverImageAlt":24,"tags":25,"featured":31,"tool":14,"publishedAt":32,"author":33,"cluster":40},"12e12c27-422a-415a-8dcd-08ad886a6f91","ai-generated-ui-components-fail-wcag-2-2-review-checklist","AI-Generated UI Components Fail WCAG 2.2: The Review Checklist That Catches It","AI tools generate UI components that look right and fail WCAG 2.2 at scale, for the same reason they skip security. Here is the fast review checklist that catches it before merge.","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Fai-components.png","A chrome user-interface element shattering with purple energy and streaming code spilling out",[26,27,28,29,30],"ai code","accessibility","wcag","code review","best practices",false,"2026-06-10T14:00:00.000Z",{"slug":34,"name":35,"avatarUrl":36,"role":37,"bio":38,"isPublic":39},"michael-graham","Michael Graham","\u002Fapi\u002Fpublic\u002Favatar\u002F7452d3cc-b0aa-46e4-96e6-da9c0225c471","Founder & Software Engineer","Obsessed with building top-tier web software and crafting unique, polished user experiences.",true,{"slug":41,"name":42,"color":43},"ai-best-practices","AI Best Practices","#EC4899",{"id":45,"slug":46,"title":47,"description":48,"coverImageUrl":49,"coverImageAlt":50,"tags":51,"featured":31,"tool":14,"publishedAt":55,"author":56,"cluster":62},"02e9949a-430d-4e35-b65e-71918e3caf9b","wcag-2-2-vs-2-1-sitecore-teams","WCAG 2.2 vs 2.1 for Sitecore Teams: What Changed and What Authors Actually Break","WCAG 2.2 is additive over 2.1, and most accessibility regressions on a Sitecore site come from authoring, not code. Here is what changed and what authors break after launch.","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Fwcag-2-2.png","A polished chrome shield bearing a glowing purple accessibility symbol",[28,27,52,53,54],"sitecore","ada","compliance","2026-06-03T14:00:00.000Z",{"slug":57,"name":58,"avatarUrl":59,"role":60,"bio":61,"isPublic":39},"mohd-naeem","Mohd Naeem","\u002Fapi\u002Fpublic\u002Favatar\u002F443302bc-2d77-4202-8688-1968f2354b37","Sitecore Lead Developer and Solution Architect (XM\u002FXP, headless, practical AI)","Mohd Naeem is a Sitecore lead developer and solution architect with 15+ years across XM, XP, and composable headless delivery with JSS. He has led platform upgrades, content modeling, search and personalization, and CI\u002FCD for multi-site digital experience programs, usually as the technical lead bridging developers, content teams, and stakeholders. His recent work applies practical AI where it actually earns its keep: smarter search and content discovery, draft and review workflows for editors, and API-based assistants wired into existing Sitecore and line-of-business systems. He is AWS, Microsoft, and Sitecore certified, and his delivery record includes public sites for regulated pharma brands. Through Command Center he takes on greenfield architecture, rescue and refactor work, platform upgrades, and hands-on delivery leadership.",{"slug":63,"name":64,"color":65},"enterprise-cms","Enterprise CMS Delivery","#0EA5E9","2026-07-11T13:00:43.291Z",{"data":68,"body":69},{},{"type":70,"children":71},"root",[72,81,87,92,98,154,160,165,173,243,251,307,315,346,354,385,393,415,421,426,432],{"type":73,"tag":74,"props":75,"children":77},"element","h2",{"id":76},"what-this-is",[78],{"type":79,"value":80},"text","What this is",{"type":73,"tag":82,"props":83,"children":84},"p",{},[85],{"type":79,"value":86},"A component-level checklist for Web Content Accessibility Guidelines (WCAG) 2.2 Level AA, written for teams building and maintaining components in a content management system (CMS) rather than for auditors. It is the working bar we hold components to before they ship, and it is deliberately short enough to run on every component instead of once a year.",{"type":73,"tag":82,"props":88,"children":89},{},[90],{"type":79,"value":91},"WCAG 2.2 is additive over 2.1: everything in 2.1 still applies, and 2.2 adds the criteria in the first section below. The Americans with Disabilities Act (ADA) Title II rule names WCAG 2.1 AA as the technical standard, with compliance dates of April 26, 2027 for public entities serving 50,000 or more people and April 26, 2028 for smaller entities. Building to 2.2 clears that bar with margin.",{"type":73,"tag":74,"props":93,"children":95},{"id":94},"the-wcag-22-additions-that-hit-components",[96],{"type":79,"value":97},"The WCAG 2.2 additions that hit components",{"type":73,"tag":99,"props":100,"children":101},"ul",{},[102,114,124,134,144],{"type":73,"tag":103,"props":104,"children":105},"li",{},[106,112],{"type":73,"tag":107,"props":108,"children":109},"strong",{},[110],{"type":79,"value":111},"Focus not obscured.",{"type":79,"value":113}," A focused element is never fully hidden behind sticky headers, cookie banners, or other fixed chrome. Use scroll margin and reserve space; verify with the keyboard.",{"type":73,"tag":103,"props":115,"children":116},{},[117,122],{"type":73,"tag":107,"props":118,"children":119},{},[120],{"type":79,"value":121},"Dragging movements.",{"type":79,"value":123}," Every drag interaction (sliders, carousels, reordering) has a single-pointer or keyboard alternative, usually a button.",{"type":73,"tag":103,"props":125,"children":126},{},[127,132],{"type":73,"tag":107,"props":128,"children":129},{},[130],{"type":79,"value":131},"Target size (minimum).",{"type":79,"value":133}," Interactive targets are at least 44 by 44 CSS pixels, with spacing between adjacent hit areas. Watch footer link farms and icon-only controls.",{"type":73,"tag":103,"props":135,"children":136},{},[137,142],{"type":73,"tag":107,"props":138,"children":139},{},[140],{"type":79,"value":141},"Consistent help.",{"type":79,"value":143}," Help and contact patterns stay in the same relative location across templates. Put them in shared chrome.",{"type":73,"tag":103,"props":145,"children":146},{},[147,152],{"type":73,"tag":107,"props":148,"children":149},{},[150],{"type":79,"value":151},"Accessible authentication.",{"type":79,"value":153}," Login does not require a cognitive test (like transcribing a code) with no accessible alternative such as a password manager or copy and paste.",{"type":73,"tag":74,"props":155,"children":157},{"id":156},"per-component-checklist",[158],{"type":79,"value":159},"Per-component checklist",{"type":73,"tag":82,"props":161,"children":162},{},[163],{"type":79,"value":164},"Run this before a component merges. A component is done when every line is true or the exception is documented in the component folder.",{"type":73,"tag":82,"props":166,"children":167},{},[168],{"type":73,"tag":107,"props":169,"children":170},{},[171],{"type":79,"value":172},"Keyboard",{"type":73,"tag":99,"props":174,"children":177},{"className":175},[176],"contains-task-list",[178,190,208,225,234],{"type":73,"tag":103,"props":179,"children":182},{"className":180},[181],"task-list-item",[183,188],{"type":73,"tag":184,"props":185,"children":187},"input",{"disabled":39,"type":186},"checkbox",[],{"type":79,"value":189}," Every interactive element is reachable and operable by keyboard alone.",{"type":73,"tag":103,"props":191,"children":193},{"className":192},[181],[194,197,199,206],{"type":73,"tag":184,"props":195,"children":196},{"disabled":39,"type":186},[],{"type":79,"value":198}," Focus order matches visual order. No positive ",{"type":73,"tag":200,"props":201,"children":203},"code",{"className":202},[],[204],{"type":79,"value":205},"tabindex",{"type":79,"value":207},".",{"type":73,"tag":103,"props":209,"children":211},{"className":210},[181],[212,215,217,223],{"type":73,"tag":184,"props":213,"children":214},{"disabled":39,"type":186},[],{"type":79,"value":216}," A visible focus indicator is present on every focusable element (",{"type":73,"tag":200,"props":218,"children":220},{"className":219},[],[221],{"type":79,"value":222},":focus-visible",{"type":79,"value":224},", tokenized, not removed globally).",{"type":73,"tag":103,"props":226,"children":228},{"className":227},[181],[229,232],{"type":73,"tag":184,"props":230,"children":231},{"disabled":39,"type":186},[],{"type":79,"value":233}," Modals and drawers trap focus while open and restore focus to the trigger on close.",{"type":73,"tag":103,"props":235,"children":237},{"className":236},[181],[238,241],{"type":73,"tag":184,"props":239,"children":240},{"disabled":39,"type":186},[],{"type":79,"value":242}," Focus never lands under fixed or sticky chrome.",{"type":73,"tag":82,"props":244,"children":245},{},[246],{"type":73,"tag":107,"props":247,"children":248},{},[249],{"type":79,"value":250},"Semantics and names",{"type":73,"tag":99,"props":252,"children":254},{"className":253},[176],[255,280,289,298],{"type":73,"tag":103,"props":256,"children":258},{"className":257},[181],[259,262,264,270,272,278],{"type":73,"tag":184,"props":260,"children":261},{"disabled":39,"type":186},[],{"type":79,"value":263}," Interactive elements use real semantic elements (",{"type":73,"tag":200,"props":265,"children":267},{"className":266},[],[268],{"type":79,"value":269},"\u003Cbutton>",{"type":79,"value":271},", ",{"type":73,"tag":200,"props":273,"children":275},{"className":274},[],[276],{"type":79,"value":277},"\u003Ca>",{"type":79,"value":279},"), not styled generics.",{"type":73,"tag":103,"props":281,"children":283},{"className":282},[181],[284,287],{"type":73,"tag":184,"props":285,"children":286},{"disabled":39,"type":186},[],{"type":79,"value":288}," Every control has an accessible name, including icon-only buttons and inputs.",{"type":73,"tag":103,"props":290,"children":292},{"className":291},[181],[293,296],{"type":73,"tag":184,"props":294,"children":295},{"disabled":39,"type":186},[],{"type":79,"value":297}," Headings are in order and describe the structure, not the styling.",{"type":73,"tag":103,"props":299,"children":301},{"className":300},[181],[302,305],{"type":73,"tag":184,"props":303,"children":304},{"disabled":39,"type":186},[],{"type":79,"value":306}," Images have alt text; informative images require it, decorative images use empty alt.",{"type":73,"tag":82,"props":308,"children":309},{},[310],{"type":73,"tag":107,"props":311,"children":312},{},[313],{"type":79,"value":314},"Reach and motion",{"type":73,"tag":99,"props":316,"children":318},{"className":317},[176],[319,328,337],{"type":73,"tag":103,"props":320,"children":322},{"className":321},[181],[323,326],{"type":73,"tag":184,"props":324,"children":325},{"disabled":39,"type":186},[],{"type":79,"value":327}," Touch targets are at least 44 by 44 CSS pixels with adequate spacing.",{"type":73,"tag":103,"props":329,"children":331},{"className":330},[181],[332,335],{"type":73,"tag":184,"props":333,"children":334},{"disabled":39,"type":186},[],{"type":79,"value":336}," Drag interactions have a non-drag alternative.",{"type":73,"tag":103,"props":338,"children":340},{"className":339},[181],[341,344],{"type":73,"tag":184,"props":342,"children":343},{"disabled":39,"type":186},[],{"type":79,"value":345}," Auto-advancing content (carousels) has a pause control and respects reduced-motion.",{"type":73,"tag":82,"props":347,"children":348},{},[349],{"type":73,"tag":107,"props":350,"children":351},{},[352],{"type":79,"value":353},"Content and contrast",{"type":73,"tag":99,"props":355,"children":357},{"className":356},[176],[358,367,376],{"type":73,"tag":103,"props":359,"children":361},{"className":360},[181],[362,365],{"type":73,"tag":184,"props":363,"children":364},{"disabled":39,"type":186},[],{"type":79,"value":366}," Text contrast meets AA against the design tokens, not a one-off hex value.",{"type":73,"tag":103,"props":368,"children":370},{"className":369},[181],[371,374],{"type":73,"tag":184,"props":372,"children":373},{"disabled":39,"type":186},[],{"type":79,"value":375}," Link text describes its destination. No \"click here\".",{"type":73,"tag":103,"props":377,"children":379},{"className":378},[181],[380,383],{"type":73,"tag":184,"props":381,"children":382},{"disabled":39,"type":186},[],{"type":79,"value":384}," Error messages are programmatically associated with their fields.",{"type":73,"tag":82,"props":386,"children":387},{},[388],{"type":73,"tag":107,"props":389,"children":390},{},[391],{"type":79,"value":392},"CMS enforcement (the durable part)",{"type":73,"tag":99,"props":394,"children":396},{"className":395},[176],[397,406],{"type":73,"tag":103,"props":398,"children":400},{"className":399},[181],[401,404],{"type":73,"tag":184,"props":402,"children":403},{"disabled":39,"type":186},[],{"type":79,"value":405}," The most likely author mistake for this component is prevented by a field constraint (required alt, max length, allowed link types, droplink instead of free text).",{"type":73,"tag":103,"props":407,"children":409},{"className":408},[181],[410,413],{"type":73,"tag":184,"props":411,"children":412},{"disabled":39,"type":186},[],{"type":79,"value":414}," Front-end accessibility that an author could override is instead enforced at the field, rendering-default, or render-time layer.",{"type":73,"tag":74,"props":416,"children":418},{"id":417},"tooling-honesty",[419],{"type":79,"value":420},"Tooling honesty",{"type":73,"tag":82,"props":422,"children":423},{},[424],{"type":79,"value":425},"Automated scans (Axe, Lighthouse) are the floor of this checklist, not the ceiling. A Lighthouse accessibility score of 100 means the automated subset found nothing, not that the component meets AA. Keyboard flow, screen reader announcements, and whether the content makes sense are human checks that no scanner replaces. Overlay widgets do not make a site compliant. Use the scanners to keep a passing component from regressing, and use a keyboard and a screen reader to decide whether it passed in the first place.",{"type":73,"tag":74,"props":427,"children":429},{"id":428},"companion-reading",[430],{"type":79,"value":431},"Companion reading",{"type":73,"tag":82,"props":433,"children":434},{},[435,437,444,446,452],{"type":79,"value":436},"This checklist is the component-level bar behind ",{"type":73,"tag":438,"props":439,"children":441},"a",{"href":440},"\u002Fblog\u002Fenterprise-cms\u002Fwcag-2-2-vs-2-1-sitecore-teams",[442],{"type":79,"value":443},"WCAG 2.2 vs 2.1 for Sitecore Teams",{"type":79,"value":445}," and the review pass in ",{"type":73,"tag":438,"props":447,"children":449},{"href":448},"\u002Fblog\u002Fai-best-practices\u002Fai-generated-ui-components-fail-wcag-2-2-review-checklist",[450],{"type":79,"value":451},"AI-Generated UI Components Fail WCAG 2.2",{"type":79,"value":207}]