Accessibility in Responsive Web Design (with Jim Drury) | Some Antics

The ways we implement responsive web design can have a major impact on accessibility for anyone who needs to zoom the page or scale up their font size. Join us as Jim Drury shows us some practical tips to ensure that our responsive web design is accessible for all!

Broadcasted live on Twitch on March 4, 2022. Watch future streams live at https://www.twitch.tv/SomeAnticsDev.

Transcript and links at: https://someantics.dev/accessibility-in-responsive-design/
Jim's Twitter: https://twitter.com/jim_drury
Jim's Twitch streams: https://twitch.tv/GeometricJim

#CSS #ResponsiveWebDesign #A11Y #WebDev


Mentioned Links:
• Understanding Success Criterion 1.4.10: Reflow: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
• MDN docs on CSS values and units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
• MDN docs on line height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• MDN docs on the viewport meta tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
• How I Experience Web Today: https://how-i-experience-web-today.com/
• KeyCastr: https://github.com/keycastr/keycastr


00:00 Introductions
03:25 How Do Responsive Design and Accessibility Intersect?
06:47 Highlighting a Few Problems with Responsiveness
11:37 Media Queries with Responsive Units
20:14 Padding, Border Radii, and Squircletude
26:51 Font Sizes and Line Heights
33:50 The Viewport Meta Tag
38:32 The Trouble with Modals
52:16 Wrapping Up
Web design
Be the first to comment