$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Steve Barnett

Other Decks in Technology

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