Make <input> more accessible with metadata

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

@RavenAlly I dislike filling in forms

@RavenAlly

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

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

@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”

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

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

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

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