Accessibility & Multi-Screen Design: Responsive & Accessible Future
A presentation at #cos18 by Eric Eggert
Accessibility & Multi-Screen Design Responsive & Accessible Future Eric Eggert — Accessibility & Multi-Screen Design – #cos18
Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.
Responsive Web Design
CSS Grids Some great examples: ๏ Web Design Experiments by Jen Simmons ๏ Jazz Poster | Jen Simmons ๏ Demo | Jen Simmons Labs ๏ Header, as many as will fit, footer ๏ Header, as many as will fit, some tall, footer
Great Support Can I Use: Grid Level 1
Grid “fallbacks” and overrides by Rachel Andrew
@supports Feature Queries
Grids allow for… ๏ reliable 2-dimensional layouts. ๏ mixing fixed-width elements with flexible ones (fr unit). ๏ redefining layout from the container – a more straight forward responsive workflow. ๏ layering items on the grid.
Subgrids
How Subgrids Work by Rachel Andrew
Progressive Web Apps
PWA ๏ Loads over HTTPS ๏ Use Service Workers to provide a offline access ๏ Prompt users to add to home screen ๏ Have mobile friendly layout ๏ Uses progressive enhancement ๏ Optimizes assets ๏ Provide enhanced a11y features
Service Worker Basically a small proxy that handles URL requests and can act on them, for example serve a fallback page and caching assets.
Accessibility
The Accessible Smart Home ๏ Amazon Echo ๏ Google Home ๏ HomePod ๏ Nest Thermostats ๏ …
Smart Home Accessibility ๏ Voice Input ๏ Non-Voice Input ๏ Accessible configuration
Video Calls Face Time, Google Duo, …
Software TTY Teletypewriter
Augmented Reality Color detection, shapes/faces detection
A Peek Inside the Niantic Real World Platform – Niantic
Matt Moss: Control your iPhone with your eyes
Wearables Watches, Glasses
Apple Watch: Visual ๏ VoiceOver ๏ Zoom ๏ Font Adjustment ๏ Grayscale ๏ Extra Large Watch Face
Apple Watch: Hearing ๏ Taptic Feedback ๏ Scribble ๏ Mono Audio
Apple Watch: Physical/Motor
Social Media Accessibility
Captions On YouTube, Facebook
Automatic Captions On YouTube, usually insufficient, but a good start
Alternative Text On Twitter
Automatic alternative Text On Facebook
The End.
