BT

InfoQ Homepage News Remaining Accessibility Issues in HTML Controls

Remaining Accessibility Issues in HTML Controls

This item in japanese

Bookmarks

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"> :

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.