Building Forms
Mobile Users
Will Love

Accessibility

We’re all just temporarily abled.
Cindy Li

Complexity

desktop tablet phone console watch smart fridge mouse keyboard trackpad stylus assistive tech low vision tremors/transit injury distraction …

Use semantic markup.
(Worry less about ARIA.)
(Write less JavaScript.)
(Future-proof your apps.)

Foundation

<label>
  Username
  <input type="text" />
</label>

Foundation

<label for="username">Username</label>
<input id="username" type="text" />

Foundation

{{#let (unique-id) as |usernameId|}}
  <label for={{usernameId}}>Username</label>
  <input id={{usernameId}} type="text" />
{{/let}}

Ember unique-id helper RFC

Foundation

<label for="username">Username</label>
<input id="username" type="text"
  aria-describedby="username-hint">
<p id="username-hint">Username must be
at least 8 characters long and cannot
contain special characters.</p>

Attributes

type

Semantically identifies the type of content the input accepts.

Occasionally suggests more specific labels for screen readers.

input with type password

input[type="password"]
A11Y API Mappings (AAM)

autocomplete

Tells browsers what user data to offer as autocomplete options.

Mapped to accessibility state.

MDN

autocomplete

autocomplete
A11Y API Mappings (AAM)

inputmode

Suggests the ideal on-screen keyboard for mobile devices.

No accessibility mappings.

MDN

Use Cases

Username

<input
  type="text"
  autocomplete="username"
/>

Android keyboard: username

iOS keyboard: username

Username

<input
  type="text"
  autocomplete="username"
  autocorrect="off"
  autocapitalize="none"
  spellcheck="false"
/>

Email Address

<input
  type="email"
  autocomplete="email"
/>

Android keyboard: email

iOS keyboard: email

Telephone Number

<input
  type="tel"
  autocomplete="tel"
/>

Android keyboard: telephone

iOS keyboard: telephone

Address

<input
  type="text"
  autocomplete=
    "street-address"
/>

Android keyboard: address

iOS keyboard: address

Number

<input
  type="number"
/>

“inappropriate for credit card numbers or US postal codes”
(HTML Spec)

Number

<input
  type="text"
  inputmode="decimal"
  pattern="[0-9]*"
/>

Android keyboard: number

iOS keyboard: number

GOV.UK Number Inputs

Supercharged Number Inputs

Verification Code

<input
  type="text"
  inputmode="decimal"
  autocomplete="one-time-code"
/>

Date

<input
  type="date"
/>

Date

<input
  type="text"
  inputmode="decimal"
  minlength="1"
  maxlength="2"
/>

<input
  type="text"
  inputmode="decimal"
  minlength="1"
  maxlength="2"
/>

<input
  type="text"
  inputmode="decimal"
  minlength="4"
  maxlength="4"
/>

<fieldset>
  <legend>Start Date</legend>

  <label for="month">Month (MM)</label>
  <input id="month" type="text" inputmode="decimal" />

  <label for="day">Day (DD)</label>
  <input id="day" type="text" inputmode="decimal" />

  <label for="year">Year (YYYY)</label>
  <input id="year" type="text" inputmode="decimal" />
</fieldset>

And More

  • URLs
  • Credit Cards, Expiration Dates, CVV
  • Birthdays

CSS / Design

  • Prevent iOS zoom with minimum font-size of 16px
  • Use a single column layout

By solving a11y issues at the
semantic level, we…

  • improve UIs for existing technology
  • future-proof them for years to come

Resources

Thanks, Y’all!

James Steinbach

Senior Engineer
at auth0

jdsteinbach

Twitter | GitHub | Blog