Accessibility & Multi-Screen Design: Responsive & Accessible Future

A presentation at #cos18 in June 2019 in by Eric Eggert

Slide 1

Slide 1

Accessibility & Multi-Screen Design Responsive & Accessible Future Eric Eggert — Accessibility & Multi-Screen Design – #cos18

Slide 2

Slide 2

Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.

Slide 3

Slide 3

Responsive Web Design

Slide 4

Slide 4

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

Slide 5

Slide 5

Great Support Can I Use: Grid Level 1

Slide 6

Slide 6

Grid “fallbacks” and overrides by Rachel Andrew

Slide 7

Slide 7

@supports Feature Queries

Slide 8

Slide 8

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.

Slide 9

Slide 9

Subgrids

Slide 10

Slide 10

How Subgrids Work by Rachel Andrew

Slide 11

Slide 11

Progressive Web Apps

Slide 12

Slide 12

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

Slide 13

Slide 13

Service Worker Basically a small proxy that handles URL requests and can act on them, for example serve a fallback page and caching assets.

Slide 14

Slide 14

Accessibility

Slide 15

Slide 15

The Accessible Smart Home ๏ Amazon Echo ๏ Google Home ๏ HomePod ๏ Nest Thermostats ๏ …

Slide 16

Slide 16

Slide 17

Slide 17

Smart Home Accessibility ๏ Voice Input ๏ Non-Voice Input ๏ Accessible configuration

Slide 18

Slide 18

Video Calls Face Time, Google Duo, …

Slide 19

Slide 19

Slide 20

Slide 20

Software TTY Teletypewriter

Slide 21

Slide 21

Augmented Reality Color detection, shapes/faces detection

Slide 22

Slide 22

A Peek Inside the Niantic Real World Platform – Niantic

Slide 23

Slide 23

Matt Moss: Control your iPhone with your eyes

Slide 24

Slide 24

Wearables Watches, Glasses

Slide 25

Slide 25

Apple Watch: Visual ๏ VoiceOver ๏ Zoom ๏ Font Adjustment ๏ Grayscale ๏ Extra Large Watch Face

Slide 26

Slide 26

Slide 27

Slide 27

Apple Watch: Hearing ๏ Taptic Feedback ๏ Scribble ๏ Mono Audio

Slide 28

Slide 28

Apple Watch: Physical/Motor

Slide 29

Slide 29

Slide 30

Slide 30

Social Media Accessibility

Slide 31

Slide 31

Captions On YouTube, Facebook

Slide 32

Slide 32

Automatic Captions On YouTube, usually insufficient, but a good start

Slide 33

Slide 33

Alternative Text On Twitter

Slide 34

Slide 34

Automatic alternative Text On Facebook

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

The End.