1"use strict";(self.webpackChunktheuxshop=self.webpackChunktheuxshop||[]).push([[266],{7791:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>u,contentTitle:()=>h,default:()=>g,frontMatter:()=>d,metadata:()=>t,toc:()=>b});const t=JSON.parse('{"id":"guides/accessibility-checklist","title":"Accessibility Checklist","description":"A practical accessibility checklist organized by WCAG principles with testing steps.","source":"@site/.tmp/docs-published/guides/accessibility-checklist.mdx","sourceDirName":"guides","slug":"/guides/accessibility-checklist","permalink":"/guides/accessibility-checklist","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"id":"accessibility-checklist","title":"Accessibility Checklist","description":"A practical accessibility checklist organized by WCAG principles with testing steps.","sidebar_position":5},"sidebar":"guidesSidebar","previous":{"title":"Usability Testing Quickstart","permalink":"/guides/usability-testing-quickstart"},"next":{"title":"CSS Sizing & Spacing","permalink":"/guides/css-sizing-spacing"}}');var n=s(4848),a=s(8453),l=s(9176),r=s(6964),o=s(5920),c=s(5388);const d={id:"accessibility-checklist",title:"Accessibility Checklist",description:"A practical accessibility checklist organized by WCAG principles with testing steps.",sidebar_position:5},h="Accessibility Checklist",u={},b=[{value:"Before you start",id:"before-you-start",level:2},{value:"Perceivable",id:"perceivable",level:2},{value:"Text alternatives",id:"text-alternatives",level:3},{value:"Time-based media",id:"time-based-media",level:3},{value:"Adaptable content",id:"adaptable-content",level:3},{value:"Distinguishable",id:"distinguishable",level:3},{value:"Operable",id:"operable",level:2},{value:"Keyboard accessible",id:"keyboard-accessible",level:3},{value:"Enough time",id:"enough-time",level:3},{value:"Seizures and physical reactions",id:"seizures-and-physical-reactions",level:3},{value:"Navigable",id:"navigable",level:3},{value:"Input modalities",id:"input-modalities",level:3},{value:"Understandable",id:"understandable",level:2},{value:"Readable",id:"readable",level:3},{value:"Predictable",id:"predictable",level:3},{value:"Input assistance",id:"input-assistance",level:3},{value:"Robust",id:"robust",level:2},{value:"Compatible",id:"compatible",level:3},{value:"Testing tools and techniques",id:"testing-tools-and-techniques",level:2},{value:"Automated testing",id:"automated-testing",level:3},{value:"Manual testing",id:"manual-testing",level:3},{value:"User testing",id:"user-testing",level:3},{value:"Common accessibility mistakes",id:"common-accessibility-mistakes",level:2}];function p(e){const i={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.header,{children:(0,n.jsx)(i.h1,{id:"accessibility-checklist",children:"Accessibility Checklist"})}),"\n",(0,n.jsx)(i.p,{children:"This checklist maps WCAG 2.1 Level AA requirements to practical testing steps. Use it during design reviews, development handoffs, or audits. Each section covers one of WCAG's four principles - Perceivable, Operable, Understandable, and Robust - with checklist items and a method for testing each."}),"\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.em,{children:"Last updated: January 2026"})}),"\n",(0,n.jsx)(i.h2,{id:"before-you-start",children:"Before you start"}),"\n",(0,n.jsx)(i.p,{children:"Accessibility is not a feature bolt-on. Issues found late cost significantly more to fix than issues caught in design or early development. Run through this checklist iteratively as you build, not just at the end."}),"\n",(0,n.jsx)(i.p,{children:"For people with permanent disabilities, situational limitations (bright sunlight, one hand occupied), or temporary impairments, accessible design often makes the difference between a usable product and an unusable one. Legal obligations aside, that's reason enough."}),"\n",(0,n.jsxs)(i.p,{children:["For comprehensive WCAG documentation, see the ",(0,n.jsx)(i.a,{href:"https://www.w3.org/WAI/fundamentals/accessibility-intro/",children:"W3C Web Acce
1ssibility Initiative (WAI)"})," resources."]}),"\n",(0,n.jsx)(i.h2,{id:"perceivable",children:"Perceivable"}),"\n",(0,n.jsx)(i.p,{children:"Users must be able to perceive the information presented."}),"\n",(0,n.jsx)(i.h3,{id:"text-alternatives",children:"Text alternatives"}),"\n",(0,n.jsx)(r.A,{items:[{id:"a1",label:"All images have appropriate alt text that conveys meaning (or empty alt for decorative images)"},{id:"a2",label:"Complex images (charts, diagrams) have extended descriptions"},{id:"a3",label:"Icons that convey meaning have text alternatives or labels"},{id:"a4",label:"Form inputs have visible labels (not just placeholders)"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Use a screen reader to navigate key pages. Can you understand the content without seeing the images?"]}),"\n",(0,n.jsx)(i.h3,{id:"time-based-media",children:"Time-based media"}),"\n",(0,n.jsx)(r.A,{items:[{id:"b1",label:"Videos have captions"},{id:"b2",label:"Audio content has transcripts"},{id:"b3",label:"Live audio has real-time captions where feasible"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Watch videos with sound off. Can you follow the content using captions alone?"]}),"\n",(0,n.jsx)(i.h3,{id:"adaptable-content",children:"Adaptable content"}),"\n",(0,n.jsx)(r.A,{items:[{id:"c1",label:"Content structure is conveyed through proper headings (H1, H2, H3)"},{id:"c2",label:"Lists use proper list markup"},{id:"c3",label:"Tables use proper header cells and structure"},{id:"c4",label:"Reading order makes sense when CSS is disabled"},{id:"c5",label:"Instructions don't rely solely on sensory characteristics (color, shape, position)"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Disable CSS and check if content order and structure still make sense."]}),"\n",(0,n.jsx)(i.h3,{id:"distinguishable",children:"Distinguishable"}),"\n",(0,n.jsx)(r.A,{items:[{id:"d1",label:"Color is not the only way information is conveyed"},{id:"d2",label:"Text has sufficient contrast ratio (4.5:1 for normal text, 3:1 for large text)"},{id:"d3",label:"Non-text elements have sufficient contrast (3:1 for UI components)"},{id:"d4",label:"Text can be resized to 200% without loss of functionality"},{id:"d5",label:"Content reflows at 320px width without horizontal scrolling"},{id:"d6",label:"Audio that plays automatically can be stopped or volume controlled"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Use a color contrast checker. Test at 200% zoom. Resize browser to 320px width."]}),"\n",(0,n.jsx)(i.h2,{id:"operable",children:"Operable"}),"\n",(0,n.jsx)(i.p,{children:"Users must be able to operate the interface."}),"\n",(0,n.jsx)(i.h3,{id:"keyboard-accessible",children:"Keyboard accessible"}),"\n",(0,n.jsx)(r.A,{items:[{id:"e1",label:"All functionality is available via keyboard"},{id:"e2",label:"Focus is visible on all interactive elements"},{id:"e3",label:"Focus order follows a logical sequence"},{id:"e4",label:"No keyboard traps (focus can always move away)"},{id:"e5",label:"Keyboard shortcuts don't conflict with assistive technology"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Navigate the entire interface using only Tab, Shift+Tab, Enter, Space, and arrow keys. Can you access everything?"]}),"\n",(0,n.jsx)(i.h3,{id:"enough-time",children:"Enough time"}),"\n",(0,n.jsx)(r.A,{items:[{id:"f1",label:"Time limits can be extended or turned off"},{id:"f2",label:"Users are warned before session timeouts with option to extend"},{id:"f3",label:"Auto-updating content can be paused, stopped, or hidden"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Identify any timed elements. Check that users have control over timing."]}),"\n",(0,n.jsx)(i.h3,{id:"seizures-and-physical-reactions",children:"Seizures and physical reactions"}),"\n",(0,n.jsx)(r.A,{items:[{id:"g1",label:"Nothing flashes more than 3 times per second"},{id:"g2",label:"Motion animation can be disabled (respects prefers-reduced-motion)"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}
1),": Review any animated content. Check if ",(0,n.jsx)(i.code,{children:"prefers-reduced-motion"})," media query is respected."]}),"\n",(0,n.jsx)(i.h3,{id:"navigable",children:"Navigable"}),"\n",(0,n.jsx)(r.A,{items:[{id:"h1",label:"Skip link allows bypassing repeated content"},{id:"h2",label:"Pages have descriptive titles"},{id:"h3",label:"Focus order is logical and intuitive"},{id:"h4",label:"Link purpose is clear from link text (or programmatically determinable)"},{id:"h5",label:"Multiple ways to find pages (navigation, search, site map)"},{id:"h6",label:"Headings and labels describe content or purpose"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Tab through the page. Is there a skip link? Does focus move logically?"]}),"\n",(0,n.jsx)(l.A,{variant:"tip",title:"Focus visibility",children:(0,n.jsx)(i.p,{children:"Default browser focus indicators are often hard to see. Consider enhancing focus styles with a clear, visible outline that has sufficient contrast."})}),"\n",(0,n.jsx)(i.h3,{id:"input-modalities",children:"Input modalities"}),"\n",(0,n.jsx)(r.A,{items:[{id:"i1",label:"Pointer gestures have single-pointer alternatives"},{id:"i2",label:"Pointer cancellation is supported (down event doesn't trigger action)"},{id:"i3",label:"Touch targets are at least 44\xd744 CSS pixels"},{id:"i4",label:"Dragging actions have non-dragging alternatives"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Test all interactions with mouse/trackpad, touch, and keyboard."]}),"\n",(0,n.jsx)(i.h2,{id:"understandable",children:"Understandable"}),"\n",(0,n.jsx)(i.p,{children:"Users must be able to understand the information and interface."}),"\n",(0,n.jsx)(i.h3,{id:"readable",children:"Readable"}),"\n",(0,n.jsx)(r.A,{items:[{id:"j1",label:"Language of page is programmatically identified"},{id:"j2",label:"Language changes within content are marked"},{id:"j3",label:"Unusual words or jargon are defined"},{id:"j4",label:"Abbreviations are expanded on first use"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Check that ",(0,n.jsx)(i.code,{children:'<html lang="...">'})," is set correctly. Use a screen reader to verify language pronunciation."]}),"\n",(0,n.jsx)(i.h3,{id:"predictable",children:"Predictable"}),"\n",(0,n.jsx)(r.A,{items:[{id:"k1",label:"Focus doesn't trigger unexpected context changes"},{id:"k2",label:"Input doesn't trigger unexpected context changes without warning"},{id:"k3",label:"Navigation is consistent across pages"},{id:"k4",label:"Components are identified consistently"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Tab through forms. Does anything unexpected happen when focusing fields?"]}),"\n",(0,n.jsx)(i.h3,{id:"input-assistance",children:"Input assistance"}),"\n",(0,n.jsx)(r.A,{items:[{id:"l1",label:"Input errors are clearly identified and described in text"},{id:"l2",label:"Labels and instructions are provided for user input"},{id:"l3",label:"Error suggestions are provided when possible"},{id:"l4",label:"Legal/financial submissions can be reviewed, confirmed, or reversed"},{id:"l5",label:"Context-sensitive help is available"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Submit forms with errors. Are errors clearly communicated and linked to the relevant field?"]}),"\n",(0,n.jsx)(i.h2,{id:"robust",children:"Robust"}),"\n",(0,n.jsx)(i.p,{children:"Content must be robust enough to work with current and future technologies."}),"\n",(0,n.jsx)(i.h3,{id:"compatible",children:"Compatible"}),"\n",(0,n.jsx)(r.A,{items:[{id:"m1",label:"HTML validates without significant errors"},{id:"m2",label:"Name, role, and value are programmatically determinable for all UI components"},{id:"m3",label:"Status messages are announced without receiving focus (using ARIA live regions)"}]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"How to test"}),": Use browser developer tools to inspect elements. Check ARIA attributes are used correctly."]}),"\n",(0,n.jsx)(i.h2,{id:"testing-tools-and-techniques",children:"Testing tools and techniques"}),"\n",(0,n.jsx)(i.h3,{id:"automated-testing",children:"Automated testing"}),"\n",(0,n.jsx)(i.p,{children:"Automated tools catch obvious issues but miss many problems. Use them as a starting point:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:"Browser extensions (axe, WAVE)"}),"\n",(0,n.jsx)(i.li,{children:"Linters in your build process"}),"\n",(0,n.jsx)(i.li,{children:"CI/CD integration for automated checks"}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"manual-testing",children:"Manual testing"}),"\n",(0,n.jsx)(i.p,{children:"Essential techniques:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Keyboard testing"}),": Navigate without mouse"]}
1),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Screen reader testing"}),": VoiceOver (Mac), NVDA (Windows), or browser extensions"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Zoom testing"}),": Test at 200% and 400%"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Color contrast checking"}),": Use tools to verify ratios"]}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"user-testing",children:"User testing"}),"\n",(0,n.jsx)(i.p,{children:"Include people with disabilities in your usability testing when possible. Automated and expert testing catches issues, but nothing replaces observing actual assistive technology users."}),"\n",(0,n.jsx)(i.h2,{id:"common-accessibility-mistakes",children:"Common accessibility mistakes"}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Missing form labels"}),": Using placeholder text instead of visible labels."]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Low contrast"}),": Light gray text on white backgrounds."]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Missing alt text"}),': Images with no alternatives, or unhelpful alt text like "image" or the filename.']}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Inaccessible custom controls"}),": Custom dropdowns, modals, and widgets that don't work with keyboards."]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Missing skip links"}),": Forcing keyboard users to tab through lengthy navigation repeatedly."]}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Unexpected changes"}),": Actions happening on focus or typing without user confirmation."]}),"\n",(0,n.jsx)(o.A,{items:[{question:"What level of WCAG should I target?",answer:"WCAG 2.1 Level AA is the most common target and is required by many regulations. Level A is the minimum; Level AAA is ideal but not always practical for all content."},{question:"Is accessibility just about screen readers?",answer:"No. Accessibility covers visual, auditory, motor, and cognitive considerations. Screen reader compatibility is one part. Keyboard access, color contrast, cognitive load, and motor accessibility are equally important."},{question:"How do I retrofit accessibility into an existing product?",answer:"Start with an audit to identify issues. Prioritize by severity and frequency of use. Fix critical keyboard and screen reader issues first. Add accessibility to your development process going forward."},{question:"What's the difference between accessibility and usability?",answer:"Accessibility ensures people with disabilities can use the product. Usability is about how easy the product is to use. They overlap significantly - accessible design is usually more usable for everyone."},{question:"Do ARIA attributes make things accessible?",answer:"ARIA can help when native HTML isn't sufficient, but misused ARIA often makes things worse. The first rule of ARIA: don't use ARIA if you can use native HTML elements instead."}]}),"\n",(0,n.jsx)(c.A,{title:"Related resources",links:[{label:"UX Basics",to:"/guides/ux-basics"},{label:"Forms Patterns",to:"/patterns/forms"},{label:"Error States Pattern",to:"/patterns/error-states"},{label:"Navigation Patterns",to:"/patterns/navigation"}]})]})}function g(e={}){const{wrapper:i}={...(0,a.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},9176:(e,i,s)=>{s.d(i,{A:()=>a});s(6540);var t=s(4164),n=s(4848);function a({variant:e="default",title:i,children:s}){return(0,n.jsxs)("div",{className:(0,t.A)("ux-callout","default"!==e&&`ux-callout--${e}`),children:[(0,n.jsx)("div",{className:"ux-callout__title",children:i||{default:"Note",tip:"Tip",warning:"Warning",note:"Field Note"}[e]}),(0,n.jsx)("div",{className:"ux-callout__content",children:s})]})}},6964:(e,i,s)=>{s.d(i,{A:()=>n});s(6540);var t=s(4848);function n({items:e}){return(0,t.jsx)("ul",{className:"ux-checklist",children:e.map(e=>(0,t.jsxs)("li",{className:"ux-checklist__item",children:[(0,t.jsx)("input",{type:"checkbox",id:e.id,className:"ux-checklist__checkbox"}),(0,t.jsx)("label",{htmlFor:e.id,className:"ux-checklist__label",children:e.label})]},e.id))})}},5920:(e,i,s)=>{s.d(i,{A:()=>n});s(6540);var t=s(4848);function n({items:e}){return(0,t.jsx)("div",{className:"ux-faq",children:e.map((e,i)=>(0,t.jsxs)("div",{className:"ux-faq__item",children:[(0,t.jsx)("div",{className:"ux-faq__question",children:e.question}),(0,t.jsx)("div",{className:"ux-faq__answer",children:(0,t.jsx)("p",{children:e.answer})})]},i))})}},5388:(e,i,s)=>{s.d(i,{A:()=>a});s(6540);var t=s(6289),n=s(4848);function a({title:e="Related Resources",links:i}){return(0,n.jsxs)("div",{className:"ux-related",children:[(0,n.jsx)("div",{className:"ux-related__title",children:e}),(0,n.jsx)("ul",{className:"ux-related__list",children:i.map((e,i)=>(0,n.jsx)("li",{children:(0,n.jsx)(t.A,{to:e.to,className:"ux-related__link",children:e.label})},i))})]})}},8453:(e,i,s)=>{s.d(i,{R:()=>l,x:()=>r});var t=s(6540);const n={},a=t.createContext(n);function l(e){const i=t.useContext(a);return t.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function r(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:l(e.components),t.createElement(a.Provider,{value:i},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.