Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D&D and Accessibility

D&D and Accessibility

Hullo, adventurer! All of us who work with UI can probably do with levelling up a little in Accessibility. We'll apply Strength, Dexterity, Constitution, Intelligence, Wisdom, and Charisma to the front-end and check out what skills support each stat.

Please note: no existing knowledge of dungeons, dragons, or the combination of the two, is required for this talk.


Talk given at https://www.codecampwellington.nz/ on Saturday 15th April 2023

Steve Barnett

April 11, 2023

More Decks by Steve Barnett

Other Decks in Technology


  1. All of us who work with UI can probably do

    with levelling up a little bit in Accessibility (Search for "The WebAIM Million")
  2. An adventurer doing web accessibility can up their Dexterity by

    testing with the keyboard (This will make (more) sense in about 7 minutes time)
  3. !

  4. !

  5. What do these six mean for an adventurer doing web

    accessibility? What are the skills that support each stat?
  6. Post-credits scene: the longer versions (of "What might these look

    like for an adventurer doing web accessibility?")
  7. (Accessibility) Strength This is about doing. • Use standard controls

    • Write semantic HTML • Linting, Automated Tests
  8. (Accessibility) Dexterity This is about flexibility. • Test with just

    the keyboard • Test with axe browser extension • Test with Screen Readers
  9. (Accessibility) Constitution This is about persistence. • Shift Left •

    Offer feedback to design • Choose accessibility as a priority
  10. (Accessibility) Intelligence This is about wide knowledge. • Understand the

    accessibility tree • Understand ARIA • Know the Standards
  11. (Accessibility) Wisdom This is about deep knowledge. • Think non-binary

    • Go off The Happy Path • Avoid barriers to access
  12. (Accessibility) Charisma This is about persuasion. • Offer good motivations

    • Be ready for objections • Celebrate good accessibility
  13. Post-post-credits scene: The WebAIM Million My write-up on it: the

    bad news, the good news, and what-you-can-do(s)