Improving Form Accessibility Past Present Future Marcos Caceres

Improving Form Accessibility Past … Present … Future

Marcos Caceres Mozilla

Filling out forms We’ve had some practice. . .

HTML Forms ● ● Type control Accessible Validation Annoying to fill out

Input types - email

Input types - tel

Input type limitations Can’t express: ● what data is expected. ● Overall intent of the form.

Combining type and autocomplete ● “text” ○ “given-name” ○ “Family-name” ● “password” ○ new-password ○ current-password ● “tel” ○ tel-country-code ○ tel-national ○ tel-area-code

Combining type and autocomplete (Demo with Voice. Over)

Autofill in action

We need more devs using autocomplete!

So, what about the intent of the form. . .

Buying and selling stuff We’ve had some practice. . .

Proprietary payment methods

Biometric - Apple Pay

Pay with your face ● Apple ● Microsoft, ● etc.

Haptic feedback on watch

Web Integration - Payment Request API

Payment Request API Firefox - concept demo

Payment Request API Chrome - demo

Payment Request API ● ● ● Methods: how to pay for things. Details: what is being bought. Options: things to complete transaction. Error handling: coarse-grained, fine-grained. Privacy preserving.

Payment methods - Ways to pay for things ● Card types ● Networks “Pay with my Visa Debit card”

Payment details ● List the things being purchased ● Total (and label) ● Currencies

Shipping options “We deliver by” ● Express ● Standard ● Drone…

Payment Modifiers “You have to pay 3% more if you pay with an Amex” “Use your visa card, and you get a free mug”

Payment options ● Things needed to complete payment

Error recovery - coarse and fine grained

The Future of Payments “. . . is already here, just not evenly distributed. ” William Gibson

New ways to pay for things

Payment Handlers Proprietary Web based

Native Applications as Payment Handlers

Web-based handlers - Progressive Web Apps Payment method identifiers ● URLs ● Standardized “tokenized” Web Manifest ● Application name ● Icons ● etc. . .

Payment Handler - Permission model

Payment Handlers - In Chrome today!* * behind a flag

Sometimes, centralization can be good. Risks… ● Won’t be adopted ● Won’t be as accessible as existing solutions. ● Closed systems could win (e. g. , Apple. Pay, Android Pay, only. ) Rewards… ● Input once, works everywhere ● Browser parts built on HTML. ● Leverage existing autofill infrastructure. ● Leverage HTML for validation ● Leverage underlying web platform

Look into the (accessible) future Web Authentication Inert Elements Focus Ring AOM (Accessibility object model)