Configurable title attribute strings for player controls to improve accessibility

[drewlee]

Description

The current means of configuring player control strings assigns the same string for both the button's name and its title attribute. While this behavior is well-intentioned, it is ultimately harmful for accessibility. As background, the general purpose of the title attribute is to provide supplementary information to help clarify or further describe the purpose of a control. Simply duplicating a control's existing string label is misuse, and results in redundant output when using screen reading software.

As noted in the HTML specification under https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

While it is common practice to utilize the title attribute to display native tooltips, this in itself is also problematic. For one, native browser tooltips only render while utilizing a pointer device and are thus completely inaccessible to keyboard-only users. Behavior is also inconsistent between various browser implementations. In this case, a custom accessible tooltip is a much better approach. There are several other points discussed under https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/ that dissuade its use.

For these stated reasons, I propose providing the ability to customize/override and prevent control strings from being automatically applied to their respective title attributes. This can likely be accomplished in backward compatible means so that existing implementations aren't affected.

Our organization discourages and is in the process of replacing similar patterns of redundant titles. However, this is something we are blocked on with our media players which utilize video.js and is also observed on BigPlayButton. We also leverage custom accessible tooltips which ultimately render the button titles unnecessary, but have no straight forward means of preventing them from rendering.

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[OwenEdwards]

@drewlee can you take a look at this quick prototype, and see if just providing an option to prevent the title attribute from being set by UI components does what you need?

https://github.com/OwenEdwards/video.js/tree/feat/add-noUITitleAttributes-option

Specifically, if you do npm start and then open http://localhost:9999/sandbox/noUITitleAttributes.html, you'll be able to see a demo with no title attributes on the UI components, by setting an option passed to the player.

Or do you need a more broad "ability to customize/override [...] control strings" as title attributes, as well as just to prevent them?

[drewlee]

@OwenEdwards thanks for setting this up. Looking at the demo, I think this would definitely meet our needs.