code • HTML Forms accessibility - martindubenet/wed-dev-design GitHub Wiki

Accesskey 👍

Use accesskey attributes everywhere you can. This is a MUST DO practice for webapps or on any controls that are repetitives.

So far only Firefox browser requires a combination of 3 keys [Alt]+[Shift]+[accesskey]. All the other browsers requires only 2 keys [Alt]+[accesskey].

  • <input type="search" accesskey="f" title="F">
  • [Alt]+[f]

When using accesskeys it would be wise to add a footnote or a dedicated help page where you explain how to use this feature.

Link to a plain HTML page to test basic usages of different accesskeys attribute within the context of a webapp.

Github showes the it's search accesskey in the header

 

Tabindex 👎

Do NOT use tabindex (in regular websites). This is confusing with the natural DOM reading order of a document and results in more bad then good. But, maybe in specific contexts like a webapp, this feature can be useful.

If you really need it here is a Google Dev tutorial about controlling focus with tabindex attributeteaser

 

Field navigation UX

Interactive animations

  1. This custom radio button style (CSS only) generates a smooth animation over valid accessibility controls by Mana.
  2. The new (focus-ring) focus visible (:focus-visible) CSS pseudo-class selector, part of the level 4 specifications, that you can implement using either this polifill of the same name or What Input from Github until browsers supports it.
  3. Ripple effect used on buttons from Material Design.

Roving focus

The purpose is to restore the focus on selected radio buttons (boolean fields) to give an efficient UX for tab navigation users. This proposed “roving tabindex” custom technic from this Google Dev tutorial listen to click event to toggle the tabindex attribute values from "-1" to "0" on his custom defined HTML <radio-group> (list) and <radio-button> (items) elements.

 

Numeric input best practice

<input type="text" inputmode="numeric" pattern="[0-9]+" />
  • type="text" : Since only Google Chrome browser provide a UX benefit for the type="number" they is no real benefits.
  • inputmode="numeric" : This enable the mobile OS numeric keyboards.
  • pattern="[0-9]+" : The pattern attribute is supported on input types of text, tel, email, url, password, and search. The value "[0-9]+" is a regex that limits input patterns to numeric values FOR ALL BROWSERS (inluding Firefox).
  • Then add a JavaScript validation function to prevent users from filling-in any other type of characters then numbers.