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

Transcript

1. D&D
   !
   and Accessibility
   Steve Barnett, naga.co.za
   (FED who does) Accessibility at Xero
   

   View Slide

2. All of us who work with UI
   can probably do with levelling up
   a little bit in Accessibility
   (Search for "The WebAIM Million")
   

   View Slide

3. An adventurer doing web accessibility
   can up their Dexterity
   by testing with the keyboard
   (This will make (more) sense in
   about 7 minutes time)
   

   View Slide

4. View Slide

5. D&D has six Ability scores / stats:
   Strength, Dexterity, Constitution,
   Intelligence, Wisdom, Charisma
   

   View Slide

6. !
   

   View Slide

7. Strength
   is being able to crush a tomato
   ! "
   

   View Slide

8. Dexterity
   is being able to dodge a tomato
   ! "
   

   View Slide

9. Constitution
   is being able to eat a bad tomato
   (and not get sick)
   ! "
   

   View Slide

10. Intelligence
    is knowing that a tomato is a fruit
    ! "
    

    View Slide

11. Wisdom
    is not putting a tomato
    in a fruit salad
    ! "
    

    View Slide

12. Charisma
    is being able to sell
    a tomato-based fruit salad
    ! "
    

    View Slide

13. !
    

    View Slide

14. What do these six mean for an
    adventurer doing web accessibility?
    What are the skills that
    support each stat?
    

    View Slide

15. (Accessibility) Strength
    is about doing.
    Use standard controls.
    

    View Slide

16. (Accessibility) Dexterity
    is about flexibility.
    Test with just the keyboard.
    

    View Slide

17. (Accessibility) Constitution
    is about persistence.
    Offer feedback one step earlier.
    

    View Slide

18. (Accessibility) Intelligence
    is about wide knowledge.
    Understand the accessibility tree.
    Name, role, value (and state)
    

    View Slide

19. (Accessibility) Wisdom
    is about deep knowledge.
    Think non-binary.
    Abilities can change permanently,
    temporarily, or contextually.
    

    View Slide

20. (Accessibility) Charisma
    is about persuasion.
    Celebrate good accessibility.
    

    View Slide

21. An adventurer doing web accessibility
    can up their Dexterity
    by testing with the keyboard
    

    View Slide

22. Thank you!
    !
    Slide deck:
    !
    !
    with post-credits scene
    

    View Slide

23. Post-credits scene: the longer
    versions (of "What might these look
    like for an adventurer doing web
    accessibility?")
    

    View Slide

24. (Accessibility) Strength
    This is about doing.
    • Use standard controls
    • Write semantic HTML
    • Linting, Automated Tests
    

    View Slide

25. (Accessibility) Dexterity
    This is about flexibility.
    • Test with just the keyboard
    • Test with axe browser extension
    • Test with Screen Readers
    

    View Slide

26. (Accessibility) Constitution
    This is about persistence.
    • Shift Left
    • Offer feedback to design
    • Choose accessibility as a priority
    

    View Slide

27. (Accessibility) Intelligence
    This is about wide knowledge.
    • Understand the accessibility tree
    • Understand ARIA
    • Know the Standards
    

    View Slide

28. (Accessibility) Wisdom
    This is about deep knowledge.
    • Think non-binary
    • Go off The Happy Path
    • Avoid barriers to access
    

    View Slide

29. (Accessibility) Charisma
    This is about persuasion.
    • Offer good motivations
    • Be ready for objections
    • Celebrate good accessibility
    

    View Slide

30. Post-post-credits scene:
    The WebAIM Million
    My write-up on it: the bad news, the
    good news, and what-you-can-do(s)
    

    View Slide