Doing Responsive Right: Accessibility Lessons from the Field
summary
Shows concrete accessibility failures and fixes: multi-column forms break context for magnified users so convert to a vertical stack; headings must surface the user‑chosen sort key; voiceover rotor and TalkBack gestures require testing; sliding off‑canvas panels steal focus unless offscreen elements use display:none when off-screen; keyboard focus trick with tabindex=-1 doesn't work on mobile, so design mobile modals to make modals full-screen; flexbox reordering isn’t reliably announced by screen readers; gesture‑first dialers can improve touch accessibility.
AI-written summary · about
chapters (14)
- 0:00Intro
- 1:24The web's greatest strength, I believe, is often seen as a limitation as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all
- 3:34Mobile First Design
- 3:56Using Web Standards
- 5:14Understand Proximity
- 10:06Embrace the Vertical Stack
- 14:32Design for Quick Consumption
- 16:56USE HEADINGS TO YOUR ADVANTAGE
- 18:51Redefine Easy
- 28:39LESSON Change layout? Change interaction
- 29:13A change in layout/display may require a change in: interaction, role (markup), source order, alt text, state or other property
- 34:54Change orientation? Beware of overlap
- 37:29LESSONS Sliding animations: lost focus.
- 43:46LESSON 10 Flexbox. Screen readers see the source.
related talks
39mHow to win at mobile accessibility
31mHow to Program with Accessibility in Mind
46mMobile accessibility - challenges and best practices
31mDeveloping for Everyone
41mTales of Accessibility Failures
59mAccessibility in UX: A panel discussion
44mCrafting Great Accessible Experiences
21mAccessibility 101: Getting started with assistive technology and product inclusion