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.