Accessibility & Multi-Screen Design: Responsive & Accessible Future

A presentation at #cos19 in June 2020 in by Eric Eggert

Slide 1

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

Slide 2

Responsive Web Design

Slide 3

CSS Grids Some great examples: → Elliot Jay Stocks → 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 4

Great Support for Grid Can I Use: Grid Level 1

Slide 5

Grid “fallbacks” and overrides by Rachel Andrew

Slide 6

@supports Feature Queries

Slide 7

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 8

Subgrids are not well supported

Slide 9

How Subgrids Work by Rachel Andrew

Slide 10

Progressive Web Apps (PWA)

Slide 11

→ 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

Slide 12

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 13

Accessibility

Slide 14

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

Slide 15

Slide 16

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

Slide 17

Video Calls Face Time, Google Duo, Skype, Zoom…

Slide 18

Slide 19

Software TTY Teletypewriter

Slide 20

Augmented Reality Color detection, shapes/faces detection

Slide 21

A Peek Inside the Niantic Real World Platform – Niantic

Slide 22

Source: @tomemrich

Slide 23

Source: @CastIrony

Slide 24

Matt Moss: Control your iPhone with your eyes

Slide 25

Wearables Watches, Glasses

Slide 26

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

Slide 27

Slide 28

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

Slide 29

Apple Watch: Physical/Motor

Slide 30

Slide 31

Social Media Accessibility

Slide 32

Captions On YouTube, Facebook

Slide 33

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

Slide 34

Alternative Text On Twitter

Slide 35

Automatic alternative Text On Facebook

Slide 36

Slide 37