Make <input> more accessible with metadata

A presentation at Web Directions: What Do You Know? in June 2018 in Melbourne VIC, Australia by Allison Ravenhall

Slide 1

Make <input> more accessible with metadata Allison Ravenhall @RavenAlly @Intopiadigital Digital Accessibility Sensei

Slide 2

@RavenAlly I dislike filling in forms

Slide 3

@RavenAlly

Slide 4

@RavenAlly

Slide 5

@RavenAlly Autofill: 2 keys vs Manual fill: 78 keys #winning

Slide 6

@RavenAlly autocomplete=”home email” autocomplete=”off” autocomplete=”given-name” autocomplete=”family-name” autocomplete=”billing country-name” autocomplete=”billing address-line1” autocomplete=”billing address-line2”

Slide 7

@RavenAlly autocomplete=”billing address-level2” autocomplete=”billing postal-code” autocomplete=”billing address-level1” autocomplete=”mobile tel-national” autocomplete=”off” autocomplete=”bday-day” autocomplete=”bday-month” autocomplete=”bday-year”

Slide 8

@RavenAlly Metadata isn’t just “nice to have” anymore 1.3.5 Identify Input Purpose (WCAG 2.1, AA)

Slide 9

@RavenAlly Mobility: Keystrokes Cognitive: Recall dependence Everyone: Errors , time

Slide 10

@RavenAlly Beware: autofill isn’t always helpful e.g. Call centre staff entering customer info

Slide 11

Get accessible! WCAG 2.1: https://www.w3.org/TR/WCAG21/ Allison Ravenhall @RavenAlly @Intopiadigital Digital Accessibility Sensei