Devon Persing: Accessible UX: Design For The Rest Of Us | SIC 2024
0 likes192 views
Devon Persing's presentation at the Seattle Interactive Conference 2024 focuses on the critical importance of accessibility in user experience (UX) design, highlighting that over 27% of U.S. adults have disabilities that can impact their interaction with technology. The discussion includes various examples and best practices for creating accessible digital products, emphasizing the need for inclusive design that accommodates neurodivergent and disabled users. It also outlines practical tools and resources for implementing accessibility throughout the product development lifecycle.
Devon Persing: Accessible UX: Design For The Rest Of Us | SIC 2024
- 1. Accessible UX: Design for the rest of us Devon Persing for 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. 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 Vision Dexterity 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
- 19. Contact us Personal forms Business forms Make an appointment Messenger Video banking
- 20. Language • Plain language (8-9th grade reading level) is best for a general audience • Define unusual terms or jargon • Use active voice, shorter sentences, and simpler phrasing
- 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 focus Send pressed Send
- 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 links to 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 autoplaying media • 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
- 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. A bunch of text that slides off my brain immediately SMS Authentication
- 43. Verify To complete your login, we've texted a code to you at phone number XXX-XXX- XXXX. SMS verification Verification code Verify another way I didn't get a code
- 45. The product development lifecycle Ideation and design Development and test Release and maintenance
- 46. Potential accessibility touchpoints I d e a t i o n a n d design Interviews with disabled users Accessibility is made a requirement Accessibility annotations Dev e l o p m e n t a n d t e s t Automated and assisted testing Manual testing with assistive tech Usability testing with disabled users R e l e a s e a n d m a i n t e n a n c e User feedback
- 48. Accessibility annotation tools • Indeed's Accessibility Annotation Kit for Figma indeed.design/article/building-an- accessibility-library/ • Stark for Figma and 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.
- 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!