Accessible Design: A Process 🔗 **Source:** [Accessible Design: A Process](https://humanmade.com/accessibility/accessible-design-a-process-2/) > [!note]+ Document Notes > tags: [accessibility, web design, WCAG] > author: Gianna Legate > source: Human Made > reference: [https://humanmade.com/accessibility/accessible-design-a-process-2/] > date created: 2025-10-20 00:00 > > # 🏷️ Title: Accessible Design: A Process > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - What happened: Practical guide to designing for accessibility with WCAG 2.2 AA-aligned tips on color, type, structure, and testing. - Why it matters: “Accessible design helps deliver content to a wider audience,” improving robustness and future readiness. - Key stakeholders: Designers, developers, editors, content creators. - Risks and tradeoffs: Over-reliance on color; decorative fonts; motion that can’t be paused; insufficient contrast. - Bottom line: Treat accessibility as an ongoing process—keep learning, testing, iterating. ## 📖 Main Content - Core arguments: Use clear hierarchy, sufficient contrast, distinguishable links, predictable navigation, and readable typography (real text, ≥16px, comfortable line spacing). Don’t rely on color or font styling alone for meaning. Avoid all-caps and uncontrollable animation. Test contrast (4.5:1 normal text; 3:1 large text and non-text UI). - Context and terms: WCAG levels (A/AA/AAA) with WCAG 2.2 AA as common baseline; legal standards vary by country and sector. - Uncertainties: Exact typographic minima can vary by font; branding constraints may require iteration to meet contrast. ### 🗒️ Notes - Designers “hold the keys” to integrating accessibility early. - WCAG 2.2 AA as practical baseline; check regional laws. - Design: clarity, contrast, consistency; underline or clearly style links; unique H1 per page; predictable multi-path navigation (menu, search, sitemap). - Typography: real text (not images), simple readable fonts, ≥16px body, ~1.5 line-height; allow user spacing adjustments. - Contrast: 4.5:1 normal, 3:1 large and non-text UI; logos exempt but should remain legible. - Tools: WebAIM Contrast Checker, Contrast Grid, TPGi CCA, Stark, Sim Daltonism. - Keep improving: “Small, consistent improvements…can make a significant impact.” ## 📚 References - W3C’s overview of WCAG 2.2: https://www.w3.org/WAI/standards-guidelines/wcag/ - W3C Accessibility laws by country: https://www.w3.org/WAI/policies/ - Designing for Web Accessibility (W3C): https://www.w3.org/WAI/tips/designing/ - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ - Contrast Grid (Lea Verou’s): https://contrast-ratio.com/#grid - TPGi Color Contrast Analyzer: https://www.tpgi.com/color-contrast-checker/ - Stark (Figma/Sketch/XD): https://www.getstark.co/ - Sim Daltonism: https://michelf.ca/projects/sim-daltonism/ - Inclusive Components: https://inclusive-components.design/ - Inclusive Design Patterns (Heydon Pickering): https://inclusive-components.design/book/ - Inclusive Design Checklist: https://www.inclusivedesignchecklist.com/ - Microsoft Inclusive Design toolkit: https://inclusive.microsoft.design/ - 7 Things Every Designer Needs to Know About Accessibility (Hausler): https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0c3b9 - Writing Accessible Content (Sami Keijonen): https://samikeijonen.fi/blog/writing-accessible-content/ - 6 Principles of Visual Accessibility Design (Jenna Erickson): https://blog.levelaccess.com/visual-accessibility-design/ - Designing for Accessibility: Colour Contrast (Neil Shankar): https://uxdesign.cc/designing-for-accessibility-color-contrast-8c7c0904f8a2 - Designing For Neurodiversity (Vitaly Friedman): https://www.smashingmagazine.com/2021/03/designing-accessibility-neurodiversity/ - Accessibility for Everyone (Laura Kalbag): https://abookapart.com/products/accessibility-for-everyone - WebAIM: https://webaim.org/ - Penn State Accessibility: https://accessibility.psu.edu/ ## 🗣️ Paraphrase - A: Accessibility broadens reach and future-proofs sites; designers should embed best practices from the start. - B: Meet WCAG 2.2 AA with readable type, adequate contrast, clear structure, and continuous testing. ## 📰 Newsletter - This week: a crisp, actionable walkthrough on shipping accessible design in WordPress. Prioritize contrast, readable typography (≥16px, ~1.5 line-height), and predictable navigation. Validate with WebAIM’s Contrast Checker and Stark in Figma. Dive deeper with W3C’s “Designing for Web Accessibility” and Inclusive Components. Small, steady fixes compound into inclusive, resilient experiences. ## ✅ Action Items #### DevRel - Publish contrast/typography quickstarts; live demo of spacing reflow and focus states; track adoption via design review metrics. - Run office hours on WCAG 2.2 AA and color systems. - Ship example themes/components with accessible patterns and docs. #### OSPO - Establish accessibility review policy; schedule quarterly audits. - Add license-compatible accessibility testing tools to approved stack. - Define SBOM entry for a11y tooling; owners and SLOs. #### Community - Host roadmap clinics on accessible nav and forms. - Pair new contributors on “first a11y issue” rotations. - Share budgeted accessibility milestones and impact reports. #### WordPress - Core: enforce focus visibility and skip links; triage low-contrast issues. - Core Performance: perf budgets that preserve accessible UI states. - Core AI: ensure prompts/outputs meet plain-language guidelines. - Community/Training: publish a11y lesson plans and speaker mentorship. - Accessibility: WCAG 2.2 AA audits cadence; issues heatmap; tooling. - Themes/Plugins: review checklists for contrast, semantics, keyboard traps. #### The WPCC - Fund accessibility sprints and maintainer stipends. - Publish governance templates for inclusive contribution practices. ### FAIR - Require provenance/signature checks for a11y artifacts. - Public funding transparency; anti-capture covenants. - Ship reusable governance scorecards for a11y maturity. ## 🧪 Hypotheses - Standardizing contrast checks in design reviews reduces production a11y defects by ≥40%. - Mandating ≥16px body text with 1.5 line-height improves task completion by ≥10% for all users. - Providing at least two navigation paths reduces bounce rate by ≥8%. - Replacing image text with real text cuts screen-reader errors by ≥50%. ### 📊 Methodology - A/B test typography and contrast variants; measure task success, time, errors. - Pre/post introduction of contrast tooling; defect rate analysis. - Cohort study on navigation variants; bounce and search usage metrics. ### ❓ Questions - Where do teams most frequently regress on contrast in branded palettes? - Which components most often introduce keyboard traps? ### 🔮 Future Research - Motion sensitivity preferences mapping and defaults. - Automated spacing-reflow tests for WCAG 2.2 success criteria. ### 💡 Implications - Practice: bake contrast and spacing tokens into design systems. - Policy: require WCAG 2.2 AA sign-off before release. - Education: train on semantics, focus order, and content clarity. ### 🧠 Learning Styles Assessment - Reading level: Flesch-Kincaid Grade ≈ 8–9. #### 👀 Visual learners - Present: clear bullets, tool lists. - Improve: before/after contrast and spacing examples. #### 🔊 Aural learners - Improve: 3–5 minute narrated summary. #### 🗣️ Verbal learners - Present: definitions and guidelines. - Improve: glossary and term comparisons. #### 🧩 Kinesthetic learners - Present: tool suggestions. - Improve: step-by-step contrast and spacing labs. #### 🧠 Logical learners - Present: ratios and rules. - Improve: decision trees for component states. #### 🧑‍🤝‍🧑 Social learners - Improve: moderated Q&A and peer reviews. #### 🧘‍♀️ Solitary learners - Improve: self-check quizzes, reflection prompts. #### 🌿 Naturalistic learners - Improve: sustainability tie-ins (reduced cognitive load = energy savings). ### 📊 Accessibility Assessment #### Screen reader semantics - Present: unique H1, labels emphasis. - Improve: confirm landmarks, descriptive alt text, lang attributes. #### Keyboard navigation - Present: predictable nav, multiple paths. - Improve: eliminate traps; visible focus everywhere. #### Contrast and readability - Present: 4.5:1 (text), 3:1 (large/non-text). - Improve: test brand overlays and states. #### Text resizing and reflow - Present: spacing adjustments allowed. - Improve: prefers-reduced-motion support; avoid clipping at 200%. #### Media and captions - Improve: captions/transcripts defaults; no autoplay. #### Forms and interactions - Present: labels, borders. - Improve: inline validation, generous targets, accessible toasts. #### Standards reference - Map to WCAG 2.2 AA: 1.4.x, 2.1.x, 2.4.x, 3.3.x, 4.1.x. ### 🌍 DEIB Assessment - Cultural breadth: Improve multilingual options and global examples. - Inclusive language: Present neutral tone; improve plain-language summaries. - Neurodiversity: Present structure; improve icon+text labels and predictable patterns. - Representation: Improve inclusive imagery and balanced sources. - Psychological safety: Improve explicit guidelines and escalation paths. ### ✅ Logical Validity #### Strong reasoning - Inductive: contrast and readability ratios tied to legibility; aligns with WCAG. - Causal: replacing image text with real text → better SR compatibility. #### Fallacies - None apparent; claims are scoped as guidance, not absolutes. #### Tone of voice - Constructive, practical, encouraging continuous improvement. ### 🛡️ DARVO Analysis - No denial, attack, or role-reversal rhetoric present. ## 🎯 Conclusion - Bottom line: Accessibility is a continuous practice; prioritize contrast, readable type, semantic structure, and ongoing testing. - Next steps: Audit your palette and typography, add contrast checks to design reviews, and implement multi-path navigation with clear labels. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: H3. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Design teams embed accessibility early > “Accessible design helps deliver content to a wider audience.” Context: anchor principle for adoption; Use: onboarding slide. [view highlight](https://humanmade.com/accessibility/accessible-design-a-process-2/#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] WCAG 2.2 AA is a practical baseline > “Most organisations use WCAG 2.2 Level AA as their baseline.” Context: policy setting; Use: team standard. [view highlight](https://humanmade.com/accessibility/accessible-design-a-process-2/#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Contrast checks reduce production a11y defects - Holds when enforced in design reviews. - Pointer: WCAG ratios cited. - Links: [[Design-Systems]] [[Accessibility-Testing]] #### [Z2] Real text improves assistive tech compatibility - Holds when replacing text-in-images. - Pointer: Typography guidance. - Links: [[Semantic-HTML]] [[Screen-Readers]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Audit brand palette for 4.5:1 across states — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox - Add contrast checker to Figma pipeline — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox - Write spacing tokens to meet WCAG 2.2 — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox --- --- --- tags: [accessibility, web design, WCAG] author: Gianna Legate source: Human Made reference: [https://humanmade.com/accessibility/accessible-design-a-process-2/] date created: 2025-10-20 00:00 --- # 🏷️ Title: Accessible Design: A Process ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - What happened: Practical guide to designing for accessibility with WCAG 2.2 AA-aligned tips on color, type, structure, and testing. - Why it matters: “Accessible design helps deliver content to a wider audience,” improving robustness and future readiness. - Key stakeholders: Designers, developers, editors, content creators. - Risks and tradeoffs: Over-reliance on color; decorative fonts; motion that can’t be paused; insufficient contrast. - Bottom line: Treat accessibility as an ongoing process—keep learning, testing, iterating. ## 📖 Main Content - Core arguments: Use clear hierarchy, sufficient contrast, distinguishable links, predictable navigation, and readable typography (real text, ≥16px, comfortable line spacing). Don’t rely on color or font styling alone for meaning. Avoid all-caps and uncontrollable animation. Test contrast (4.5:1 normal text; 3:1 large text and non-text UI). - Context and terms: WCAG levels (A/AA/AAA) with WCAG 2.2 AA as common baseline; legal standards vary by country and sector. - Uncertainties: Exact typographic minima can vary by font; branding constraints may require iteration to meet contrast. ### 🗒️ Notes - Designers “hold the keys” to integrating accessibility early. - WCAG 2.2 AA as practical baseline; check regional laws. - Design: clarity, contrast, consistency; underline or clearly style links; unique H1 per page; predictable multi-path navigation (menu, search, sitemap). - Typography: real text (not images), simple readable fonts, ≥16px body, ~1.5 line-height; allow user spacing adjustments. - Contrast: 4.5:1 normal, 3:1 large and non-text UI; logos exempt but should remain legible. - Tools: WebAIM Contrast Checker, Contrast Grid, TPGi CCA, Stark, Sim Daltonism. - Keep improving: “Small, consistent improvements…can make a significant impact.” ## 📚 References - W3C’s overview of WCAG 2.2: https://www.w3.org/WAI/standards-guidelines/wcag/ - W3C Accessibility laws by country: https://www.w3.org/WAI/policies/ - Designing for Web Accessibility (W3C): https://www.w3.org/WAI/tips/designing/ - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ - Contrast Grid (Lea Verou’s): https://contrast-ratio.com/#grid - TPGi Color Contrast Analyzer: https://www.tpgi.com/color-contrast-checker/ - Stark (Figma/Sketch/XD): https://www.getstark.co/ - Sim Daltonism: https://michelf.ca/projects/sim-daltonism/ - Inclusive Components: https://inclusive-components.design/ - Inclusive Design Patterns (Heydon Pickering): https://inclusive-components.design/book/ - Inclusive Design Checklist: https://www.inclusivedesignchecklist.com/ - Microsoft Inclusive Design toolkit: https://inclusive.microsoft.design/ - 7 Things Every Designer Needs to Know About Accessibility (Hausler): https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0c3b9 - Writing Accessible Content (Sami Keijonen): https://samikeijonen.fi/blog/writing-accessible-content/ - 6 Principles of Visual Accessibility Design (Jenna Erickson): https://blog.levelaccess.com/visual-accessibility-design/ - Designing for Accessibility: Colour Contrast (Neil Shankar): https://uxdesign.cc/designing-for-accessibility-color-contrast-8c7c0904f8a2 - Designing For Neurodiversity (Vitaly Friedman): https://www.smashingmagazine.com/2021/03/designing-accessibility-neurodiversity/ - Accessibility for Everyone (Laura Kalbag): https://abookapart.com/products/accessibility-for-everyone - WebAIM: https://webaim.org/ - Penn State Accessibility: https://accessibility.psu.edu/ ## 🗣️ Paraphrase - A: Accessibility broadens reach and future-proofs sites; designers should embed best practices from the start. - B: Meet WCAG 2.2 AA with readable type, adequate contrast, clear structure, and continuous testing. ## 📰 Newsletter - This week: a crisp, actionable walkthrough on shipping accessible design in WordPress. Prioritize contrast, readable typography (≥16px, ~1.5 line-height), and predictable navigation. Validate with WebAIM’s Contrast Checker and Stark in Figma. Dive deeper with W3C’s “Designing for Web Accessibility” and Inclusive Components. Small, steady fixes compound into inclusive, resilient experiences. ## ✅ Action Items #### DevRel - Publish contrast/typography quickstarts; live demo of spacing reflow and focus states; track adoption via design review metrics. - Run office hours on WCAG 2.2 AA and color systems. - Ship example themes/components with accessible patterns and docs. #### OSPO - Establish accessibility review policy; schedule quarterly audits. - Add license-compatible accessibility testing tools to approved stack. - Define SBOM entry for a11y tooling; owners and SLOs. #### Community - Host roadmap clinics on accessible nav and forms. - Pair new contributors on “first a11y issue” rotations. - Share budgeted accessibility milestones and impact reports. #### WordPress - Core: enforce focus visibility and skip links; triage low-contrast issues. - Core Performance: perf budgets that preserve accessible UI states. - Core AI: ensure prompts/outputs meet plain-language guidelines. - Community/Training: publish a11y lesson plans and speaker mentorship. - Accessibility: WCAG 2.2 AA audits cadence; issues heatmap; tooling. - Themes/Plugins: review checklists for contrast, semantics, keyboard traps. #### The WPCC - Fund accessibility sprints and maintainer stipends. - Publish governance templates for inclusive contribution practices. ### FAIR - Require provenance/signature checks for a11y artifacts. - Public funding transparency; anti-capture covenants. - Ship reusable governance scorecards for a11y maturity. ## 🧪 Hypotheses - Standardizing contrast checks in design reviews reduces production a11y defects by ≥40%. - Mandating ≥16px body text with 1.5 line-height improves task completion by ≥10% for all users. - Providing at least two navigation paths reduces bounce rate by ≥8%. - Replacing image text with real text cuts screen-reader errors by ≥50%. ### 📊 Methodology - A/B test typography and contrast variants; measure task success, time, errors. - Pre/post introduction of contrast tooling; defect rate analysis. - Cohort study on navigation variants; bounce and search usage metrics. ### ❓ Questions - Where do teams most frequently regress on contrast in branded palettes? - Which components most often introduce keyboard traps? ### 🔮 Future Research - Motion sensitivity preferences mapping and defaults. - Automated spacing-reflow tests for WCAG 2.2 success criteria. ### 💡 Implications - Practice: bake contrast and spacing tokens into design systems. - Policy: require WCAG 2.2 AA sign-off before release. - Education: train on semantics, focus order, and content clarity. ### 🧠 Learning Styles Assessment - Reading level: Flesch-Kincaid Grade ≈ 8–9. #### 👀 Visual learners - Present: clear bullets, tool lists. - Improve: before/after contrast and spacing examples. #### 🔊 Aural learners - Improve: 3–5 minute narrated summary. #### 🗣️ Verbal learners - Present: definitions and guidelines. - Improve: glossary and term comparisons. #### 🧩 Kinesthetic learners - Present: tool suggestions. - Improve: step-by-step contrast and spacing labs. #### 🧠 Logical learners - Present: ratios and rules. - Improve: decision trees for component states. #### 🧑‍🤝‍🧑 Social learners - Improve: moderated Q&A and peer reviews. #### 🧘‍♀️ Solitary learners - Improve: self-check quizzes, reflection prompts. #### 🌿 Naturalistic learners - Improve: sustainability tie-ins (reduced cognitive load = energy savings). ### 📊 Accessibility Assessment #### Screen reader semantics - Present: unique H1, labels emphasis. - Improve: confirm landmarks, descriptive alt text, lang attributes. #### Keyboard navigation - Present: predictable nav, multiple paths. - Improve: eliminate traps; visible focus everywhere. #### Contrast and readability - Present: 4.5:1 (text), 3:1 (large/non-text). - Improve: test brand overlays and states. #### Text resizing and reflow - Present: spacing adjustments allowed. - Improve: prefers-reduced-motion support; avoid clipping at 200%. #### Media and captions - Improve: captions/transcripts defaults; no autoplay. #### Forms and interactions - Present: labels, borders. - Improve: inline validation, generous targets, accessible toasts. #### Standards reference - Map to WCAG 2.2 AA: 1.4.x, 2.1.x, 2.4.x, 3.3.x, 4.1.x. ### 🌍 DEIB Assessment - Cultural breadth: Improve multilingual options and global examples. - Inclusive language: Present neutral tone; improve plain-language summaries. - Neurodiversity: Present structure; improve icon+text labels and predictable patterns. - Representation: Improve inclusive imagery and balanced sources. - Psychological safety: Improve explicit guidelines and escalation paths. ### ✅ Logical Validity #### Strong reasoning - Inductive: contrast and readability ratios tied to legibility; aligns with WCAG. - Causal: replacing image text with real text → better SR compatibility. #### Fallacies - None apparent; claims are scoped as guidance, not absolutes. #### Tone of voice - Constructive, practical, encouraging continuous improvement. ### 🛡️ DARVO Analysis - No denial, attack, or role-reversal rhetoric present. ## 🎯 Conclusion - Bottom line: Accessibility is a continuous practice; prioritize contrast, readable type, semantic structure, and ongoing testing. - Next steps: Audit your palette and typography, add contrast checks to design reviews, and implement multi-path navigation with clear labels. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: H3. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Design teams embed accessibility early > “Accessible design helps deliver content to a wider audience.” Context: anchor principle for adoption; Use: onboarding slide. [view highlight](https://humanmade.com/accessibility/accessible-design-a-process-2/#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] WCAG 2.2 AA is a practical baseline > “Most organisations use WCAG 2.2 Level AA as their baseline.” Context: policy setting; Use: team standard. [view highlight](https://humanmade.com/accessibility/accessible-design-a-process-2/#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Contrast checks reduce production a11y defects - Holds when enforced in design reviews. - Pointer: WCAG ratios cited. - Links: [[Design-Systems]] [[Accessibility-Testing]] #### [Z2] Real text improves assistive tech compatibility - Holds when replacing text-in-images. - Pointer: Typography guidance. - Links: [[Semantic-HTML]] [[Screen-Readers]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Audit brand palette for 4.5:1 across states — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox - Add contrast checker to Figma pipeline — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox - Write spacing tokens to meet WCAG 2.2 — context/https://humanmade.com/accessibility/accessible-design-a-process-2/ #fleeting #inbox --- <!-- deep-read:sections end -->