The HTML standard has constantly made progress in accessibility over the years. Developers and designers have however reported some accessibility issues with common HTML controls such as <input/>, <select/>, <video/>.
Scott Vinkle, web accessibility consultant and front-end engineer, recently compared keyboard and screen reader accessibility of native video players and concluded that native video players should be used with caution. Vinkle explained:
I found most [native video players] to have poor keyboard and screen reader support, which may lead to frustrated users.
(…) Some lose focus when the video controls receive focus then fade away, forcing the user to re-position themselves to adjust playback. Others did not trap keyboard focus in full-screen mode, leading to a similar situation as an inaccessible modal window allowing content to be accessed “behind” the window.
As a result, Vinkle decided to use a third-party player (Plyr) for Shopify’s video features.
Hanna Laakso, front-end developer in the GOV.UK design system team, also reported changing the input type for numbers, moving from <input type="number"> to <input type="text" inputmode="numeric" pattern="[0-9]*"> and publishing new guidance on how to ask users for numbers. The team additionally proposed a change to the HTML spec guidance to cross-reference inputmode when using <input type="text"> with content that is only numbers.
The design team quoted some accessibility issues found:
We found that
<input type="number">:
- cannot be dictated or selected when using Dragon Naturally Speaking
- appears as unlabeled in NVDA’s element list
- appears as a spin button in NVDA’s object navigation, which has an edit field and two buttons inside - those buttons are unlabeled, but decrease/increase the value
- is reported as unlabeled edit field when using nvda+tab
Sarah Higley, web developer working on accessibility at Microsoft, recently studied in depth the <select> element. Higley realized an experiment with 12 participants with miscellaneous types of impairment (like vision or mobility). Higley concluded:
In short: design for your specific needs, always test with real people, and never, ever use
<select multiple>!
Dave Rupert, lead developer at Paravel, compiled a longlist of accessibility issues encountered, as they occurred over the years. Rupert deplored that the general advice of using native semantic HTML elements is sometimes not enough and that plain old HTML may in some instances cause accessibility problems.
Accessibility continues to be a focal point for design systems and browser vendors. Chrome 81 refreshes HTML controls, not only improving the look and feel of form controls, but also providing better accessibility and touch support. ING recently open-sourced its Lion design system, which provides controls focusing on functionality, performance, accessibility over styling.
