Devon Persing: Accessible UX: Design For The Rest Of Us | SIC 2024

A lot of teams don't think about accessibility until right before launch, but most accessibility issues can be avoided in the design phase. In this workshop, Devon will talk about why accessible design matters, share best practices for making your designs work for people with a wide variety of disabilities, and give tips for integrating accessibility into your whole product development lifecycle.

1. Accessible UX:
Design for the rest of us
Devon Persingfor Seattle Interactive Conference 2024

2. Hi! I'm Devon(she/her)
●Digital accessibility specialist
since 2012
●Independent consultant with a
focus on ops and education
●Disabled, chronically ill, and
neurodivergent

3. Agenda
Agenda
(you are here)
Why
accessibility is a
UX problem
Examples
Tools and
practices
Q&A
Have a
good day!

4. Why accessibility is a
UX problem

5. Disability
is a body-mind condition
that makes it harder to
participate in society and
interact with the world.
According to the social
model of disability, this
is because our society
doesn't build places or
technologies with disabled
people in mind.

6. Statistics
At least
27%
of adults in the U.S.
have one or more
disabilities
Permanent,
temporary, or
dynamic
Visible or
invisible
Situational
CDC’s Disability Impacts All of US(2023)

7. Disability impacts
Hearing
and speech
VisionDexterity
and mobility
Cognition
and neurology
CDC’s Disability Impacts All of US(2023)
Over 12% of U.S.
adults
5.5%
6.2%

8. Cognitive and dexterity examples
●ADHD
●Chronic pain disorders
●Seizure disorders
●Alzheimer's and other dementia disorders
●Traumatic brain injuries (TBIs)
●Ehlers-Danlos Syndrome (EDS)
●Long Covid

9. An example: me!
Fibromyalgia
ADHD
American Migraine Foundation, The Lancet, University of Utah Health, National Library of Medicine, National
Cancer Institute, Pain Medicine
Migraine
chronic pain
More than 30% of
people have
neurodivergent
15-20% of people are

10. Results in issues with…
American Migraine Foundation, The Lancet, University of Utah Health, National Library of Medicine, National
Cancer Institute, Pain Medicine
"brain fog"
executive
function
memory
fine motor
skills
perception
attention

11. Accessibility
makes places and technologies more usable for
disabled people.
Image credit: Dana Chan for
Disabled and Here

12. Assistive technology
helps some disabled people use digital products more
easily.

13. Digital accessibility
depends on several factors.
Web, mobile, and
platform standards
You and your product
Assistive tech (maybe)
User needs
Every
layer is
critical!

14. Web Content Accessibility Guidelines
•Perceivable
•Operable
•Understandable
•Robust
Can users experience,
use, and understand
your product?
Does it work with their
technologies and
settings?

15. Examples

16. Wayfinding Language Controls
Media Forms

17. Wayfinding
"Where am I,
and how did I
get here?"
•Page title
•Navigation menu
•Headings

18. Wayfinding example

19. Wayfinding example with updates
Contact usPersonal formsBusiness formsMake an appointmentMessenger Video banking

20. Language
•Plain language (8-9
th
grade reading level) is best
for a general audience
•Define unusual terms or jargon
•Use active voice, shorter sentences, and simpler
phrasing

21. plainlanguage.gov

22. Plain language tools
Hemingway App Microsoft Editor

23. An example

24. Controls
•Make different states for controls easy to
perceive
•Use clear, concise, consistent text for buttons,
links, and other controls

25. Control states
default
Send
hover
Send
focusSend pressedSend

26. Button labels
•Use active verbs for
buttons to describe what
will happen
•Use simple icons and/or
text when appropriate
Send
Send

27. Control values
•Use clear, concise text for
control labels
•Use simple icons and/or text
for states or values
•Don't use color alone to
convey value or state
Autosave
Off On

28. Link text
•Underline inline linksto distinguish them from
text around them
•Warn users⬈before opening a new tab
•If the link doesn't go to another webpage,
include file format information (PDF)

29. What do these links do?
A. Open webpages
B. Open audio files
C.Open new tabs

30. Give users a heads up
PA CHC program
Program overview
Program overview audio (MP3)
Brochure download (PDF)
PA CHC program
Program overview
Program overview audio
Brochure download

31. Media and motion
•Provide captions for videos with dialog
•Provide transcripts for video and audio
•Avoid autoplayingmedia
•Honor user settings for reduced motion

32. Captions and transcripts
•Treat captions and transcripts as standard
•Let users determine caption settings for their
device
•Include a transcript that makes sense for the
content

33. Caption troubles

34. Transcript content in context

35. Motion
•Don't show flashing visuals
•Honor settings for reduced
motion in your CSS,
JavaScript, and mobile code
•Default to limiting motion and
animation in your designs

36. Auto-play example

37. Auto-play, button confusion, and parallax

38. Forms and workflows
•Let users offload information to tools like
password managers
•Don't use CAPTCHAs
•Put elements in a logical order for reading and
interacting

39. CAPTCHA hell

40. Using technology in
context
We use technology
across multiple devices,
sometimes at the same
time, while things are
happening around us.

41. context example
A bunch of text that slides off my
brain immediately
SMS Authentication

42. actually is
1
2
3
4?
5??
6
7
8

43. context example
Verify
To complete your login, we've texted a
code to you at phone number XXX-XXX-
XXXX.
SMS verification
Verification code
Verify another wayI didn't get a code

44. Tools and practices

45. The product development lifecycle
Ideation and
design Development
and test
Release and
maintenance

46. Potential accessibility touchpoints
I
d
e
a
tio
n
a n
d
design
Interviews with
disabled users
Accessibility is
made a
requirement
Accessibility
annotations
D
e
v
e
l
o
p
m
e
n
t
a
n
d
t
e
st
Automated
and assisted
testing
Manual
testing with
assistive tech
Usability testing
with disabled
users
Releas
e
andmainte
n
a
n
c
e
User feedback

47. Research resources

48. Accessibility annotation tools
•Indeed's Accessibility
Annotation Kit
for Figma
indeed.design/article/building-an-
accessibility-library/
•Stark
for Figmaand Sketch
getstark.co

49. Testing tools and resources
•Axe
deque.com/axe/
•Pa11y
pa11y.org
•WAVE
wave.webaim.org
•WebAIM
webaim.org/articles/

50. When you're ready, make a plan

51. Assume disabled people are
already using your product.

52. Collaborateacross roles.

53. Prioritize reducing harm.

54. Be kind.

55. Learning resources
•The A11y Project
a11yproject.com
•Smashing Magazine
smashingmagazine.com/category/
accessibility/
•Web Accessibility Initiative
w3.org/WAI/
•Accessibility Talks on YouTube
•Inclusive Design 24 on YouTube

56. Q&A(and thank you!)
linkedin.com/in/devonpersing
dpersing.com
Launching in fall 2024!