AccessibilityStandards: Difference between revisions

From Droid Reference Library
Jump to navigation Jump to search
Browse history interactively
Drl-admin (talk | contribs)
Bureaucrats, Administrators
692 edits
Created page with "==Accessibility Standards== DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible. ===Color Contrast=== All text must meet '''WCAG 2.1 AA''' minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA compliance. {..."
 
mNo edit summary
 
Line 1: Line 1:
==Accessibility Standards==
==Accessibility Standards==
 
DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible.
===Why This Matters===
 
DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible. For an education organization, accessibility ''is'' mission.
 
===Color Contrast===
===Color Contrast===
 
All text must meet '''WCAG 2.1 AA''' minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA compliance.
All text must meet '''WCAG 2.1 AA''' minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target '''AAA'''.
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Ratio
! style="background-color:#003468; color:#FFFFFF;" | Ratio
Line 22: Line 24:
| 7:1
| 7:1
| AAA -- Normal text
| AAA -- Normal text
| Target for high-impact and critical content
| Target for high-impact / critical content
|}
|}
 
====Pre-Verified Combinations (Dark Theme)====
'''Pre-verified combinations from the Dark Theme Palette:'''
 
{| class="wikitable" style="width:100%; text-align:center;"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Text Color
! style="background-color:#003468; color:#FFFFFF;" | Text Color
! style="background-color:#003468; color:#FFFFFF;" | Background Color
! style="background-color:#003468; color:#FFFFFF;" | Background Color
! style="background-color:#003468; color:#FFFFFF;" | Contrast Ratio
! style="background-color:#003468; color:#FFFFFF;" | Ratio
! style="background-color:#003468; color:#FFFFFF;" | Level
! style="background-color:#003468; color:#FFFFFF;" | Level
|-
|-
| style="background-color:#060D1A; color:#FFFFFF; padding:8px;" | White #FFFFFF
| White <code>#FFFFFF</code>
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| Deep Space <code>#060D1A</code>
| 19.5:1
| 19.5:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#0A1628; color:#FFFFFF; padding:8px;" | White #FFFFFF
| White <code>#FFFFFF</code>
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| Dark Surface <code>#0A1628</code>
| 16.3:1
| 16.3:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#0F2040; color:#FFFFFF; padding:8px;" | White #FFFFFF
| White <code>#FFFFFF</code>
| style="background-color:#0F2040; color:#FFFFFF;" | Card Surface #0F2040
| Card Surface <code>#0F2040</code>
| 12.4:1
| 12.4:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#0A1628; color:#FFC20E; padding:8px;" | Gold #FFC20E
| Gold <code>#FFC20E</code>
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| Dark Surface <code>#0A1628</code>
| 9.1:1
| 9.1:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#060D1A; color:#FFC20E; padding:8px;" | Gold #FFC20E
| Gold <code>#FFC20E</code>
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| Deep Space <code>#060D1A</code>
| 10.7:1
| 10.7:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#FFFFFF; color:#003468; padding:8px;" | Deep Navy #003468
| Deep Navy <code>#003468</code>
| style="background-color:#FFFFFF; color:#003468;" | White #FFFFFF
| White <code>#FFFFFF</code>
| 12.0:1
| 12.0:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|-
|-
| style="background-color:#FFC20E; color:#003468; padding:8px;" | Deep Navy #003468
| Deep Navy <code>#003468</code>
| style="background-color:#FFC20E; color:#003468;" | Gold #FFC20E
| Gold <code>#FFC20E</code>
| 4.8:1
| 4.8:1
| style="background-color:#FFFFAA; color:#003468;" | AA
| AA ✓
|-
|-
| style="background-color:#0A1628; color:#BABCBE; padding:8px;" | Cool Gray #BABCBE
| Cool Gray <code>#BABCBE</code>
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| Dark Surface <code>#0A1628</code>
| 7.9:1
| 7.9:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
| AAA ✓
|}
|}
 
<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
<blockquote>'''Check your combinations:''' WebAIM Contrast Checker at [https://webaim.org/resources/contrastchecker/ webaim.org/resources/contrastchecker]</blockquote>
Check additional combinations using the WebAIM Contrast Checker:
 
https://webaim.org/resources/contrastchecker/
</div>
===Image Alt Text===
===Image Alt Text===
 
Every image published online must include descriptive alt text.
Every image published online must include descriptive alt text communicating the content and context.
 
'''Formula:''' [Subject] [action or state] [context or setting]
'''Formula:''' <code>[Subject] [action or state] [context or setting]</code>
 
{| class="wikitable" style="width:100%"
'''Examples:'''
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
* ❌ <code>alt="droid.jpg"</code>
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
* ✅ <code>alt="An R2-D2 replica with its dome open as a volunteer shows the motors to a child at a school STEM event"</code>
|-
 
| alt="droid.jpg"
'''For decorative images''' (backgrounds, dividers, purely aesthetic elements): use <code>alt=""</code> so screen readers skip them.
| alt="An R2-D2 replica interacting with a child in a hospital corridor
 
during a DroidBuilders volunteer visit"
|-
| alt="event photo"
| alt="DroidBuilders volunteers posing with BB-8 and R2-D2 at a school
visit in Phoenix"
|}
For '''decorative images''' (backgrounds, dividers, purely aesthetic
elements): use <code>alt=""</code> -- an empty alt attribute tells screen
readers to skip the image entirely.
===Typography Accessibility===
===Typography Accessibility===
 
* Minimum body text size: '''16px''' on all digital surfaces
* Minimum body text size: '''16px''' on all digital surfaces
* Do not rely on color alone to communicate meaning -- pair color with text labels, icons, or patterns
* Do not rely on color alone to convey meaning -- pair it with text labels, icons, or patterns
* Minimum line spacing: 1.5 times the font size for body text
* Ensure adequate line spacing (minimum 1.5x the font size for body text)
* Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia
* Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia
 
===Interactive Element Requirements===
===Interactive Elements===
 
{| class="wikitable" style="width:100%"
* All clickable elements must have a minimum touch target of '''44x44 pixels''' on mobile
! style="background-color:#003468; color:#FFFFFF;" | Element
* Focus states must be visible for keyboard navigation (do not use <code>outline: none</code> without a custom focus style)
! style="background-color:#003468; color:#FFFFFF;" | Requirement
* Form inputs must have associated text labels (not just placeholder text)
|-
| Buttons, links, navigation
| Minimum touch target of 44x44 pixels on mobile
|-
| Focus states (keyboard navigation)
| Must be visible -- do not use outline:none without a custom focus style
|-
| Form inputs
| Must have associated text labels -- placeholder text alone is not
sufficient
|-
| Images
| Descriptive alt text required (see above)
|-
| Color-coded information
| Must also use text labels or patterns -- do not rely on color alone
|}
[[Category:Branding]]

Latest revision as of 19:15, 16 June 2026

Accessibility Standards

Why This Matters

DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible. For an education organization, accessibility is mission.

Color Contrast

All text must meet WCAG 2.1 AA minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA.

Ratio Standard Where to Apply
4.5:1 AA -- Normal text Minimum for all body text
3:1 AA -- Large text Minimum for text 18pt+ or bold 14pt+
7:1 AAA -- Normal text Target for high-impact / critical content

Pre-verified combinations from the Dark Theme Palette:

Text Color Background Color Ratio Level
White #FFFFFF Deep Space #060D1A 19.5:1 AAA ✓
White #FFFFFF Dark Surface #0A1628 16.3:1 AAA ✓
White #FFFFFF Card Surface #0F2040 12.4:1 AAA ✓
Gold #FFC20E Dark Surface #0A1628 9.1:1 AAA ✓
Gold #FFC20E Deep Space #060D1A 10.7:1 AAA ✓
Deep Navy #003468 White #FFFFFF 12.0:1 AAA ✓
Deep Navy #003468 Gold #FFC20E 4.8:1 AA ✓
Cool Gray #BABCBE Dark Surface #0A1628 7.9:1 AAA ✓

Check your combinations: WebAIM Contrast Checker at webaim.org/resources/contrastchecker

Image Alt Text

Every image published online must include descriptive alt text communicating the content and context.

Formula: [Subject] [action or state] [context or setting]

Examples:

  • ❌ alt="droid.jpg"
  • ✅ alt="An R2-D2 replica with its dome open as a volunteer shows the motors to a child at a school STEM event"

For decorative images (backgrounds, dividers, purely aesthetic elements): use alt="" so screen readers skip them.

Typography Accessibility

  • Minimum body text size: 16px on all digital surfaces
  • Do not rely on color alone to convey meaning -- pair it with text labels, icons, or patterns
  • Ensure adequate line spacing (minimum 1.5x the font size for body text)
  • Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia

Interactive Elements

  • All clickable elements must have a minimum touch target of 44x44 pixels on mobile
  • Focus states must be visible for keyboard navigation (do not use outline: none without a custom focus style)
  • Form inputs must have associated text labels (not just placeholder text)
Retrieved from "https://drl.droidbuilders.net/index.php?title=AccessibilityStandards&oldid=5543"