Problem/Motivation
Drupal core (and contrib) currently makes heavy use of the HTML title attribute.
It's a problem because the title attribute isn't very accessible. Many groups of users cannot perceive content in a title attribute at all. The HTML5 recommendation includes a warning discouraging it's use.
It cannot be relied upon to convey information which is needed by all users, which means:
- Pretty much all information in Drupal's admin UI.
- Nearly all uses in website content. There are a handful of useful cases, such as a title attribute on an iframe.
At best, the title attribute can only be considered as bonus content for sighted users with a hover-capable pointer. 15 years ago, you could claim that group was a majority, but since touch-screen devices became ubiquitous that's no longer a reliable claim. However, using title attributes to convey important information can be a disservice to mouse users too; if there's anything important in the title attributes, users won't know about it unless they hover on the right control. You shouldn't have to go hovering over all the things just in case you're missing something.
Wordpress and Joomla have both been removing a lot of uses (and support for) the title attribute.
Proposed resolution
Vastly reduce the number of places where the HTML title attribute is used in Drupal core. Discourage developers from using it in
- In some cases we can just remove them wholesale.
- In other cases, we may need to tread more carefully and consider the impact on existing sites. A deprecation period may be justified.
- For example, some JS image lightbox overlay plugins use the title attribute on an
<img>
tag as the source for a visible caption. Some sites might be using the title attribute on image fields for this. A better practice nowadays is to use customdata-*
attributes, but much legacy code may be in use.
- For example, some JS image lightbox overlay plugins use the title attribute on an
- Discourage the use of the title attribute in documentation and form descriptions. This is a way to address the author-guidance parts of ATAG (authoring tools accessibility guidelines).
- For example, add a warning to the Image Field type configuration form (and widget?) about accessibility problems with using the title attribute.
- Discourage use of the title attribute by developers, site builders, and authors. Look for handbook pages which can be updated.
Remaining tasks
Survey all places where we use the title attribute. For each one, assess it using the guide at Using the HTML title attribute.
Use child issues to remove title attributes which are not serving a good purpose.
TODO: how to organize this? It's a big survey!
User interface changes
Vastly reduce the number of places where the HTML title attribute is used in Drupal core.
API changes
Maybe? We might end up deprecating or removing some API methods/properties which support poor usage of the title attribute.
Background reading
- The Title attribute in the HTML 5.2 recommendation includes a warning discouraging it's use.
- Using the HTML title attribute – updated (2013). A few years old, but still highly relevant. This serves as a very useful guide to how to assess existing uses of the title attribute. (Also an earlier version, not sure exactly what's changed: Using the HTML title attribute – Updated Dec 2012.)
- HTML5 Accessibility Chops: title attribute use and abuse
- The Trials and Tribulations of the Title Attribute
- The Title Attribute and Why It’s Almost Useless
- How to Restore the Link Title Attribute Removed in WordPress 4.2. Includes the background story from when WordPress removed support for the title attribute on links.
- Tenon Research first glimpse: The best & worst of content management systems. This article specifically criticizes us for using unnecessary title attributes: "WordPress used to be rather well-known for putting unnecessary title attributes everywhere (Drupal still does)."
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #4
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #5
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #6
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #7
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedThere are two versions of the Paciello Group's "Using the HTML title attribute".
Comment #8
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #9
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #10
rivimeyJust browsing, thought about the way 'webform' 8.x includes a small (?) icon; could this be a way forward for titles when the info in them is indeed helpful but not accessible?
[it seems important to me not to just remove title="*" but find another way to access the information]
Comment #11
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedA help button like you suggest is something that can be made accessible. I just don't think it's necessary to replace all our uses of the title attribute with such a button. I was thinking that help buttons could be useful, but more as a route into the help system, rather than just tooltips.
There are also ways to make tooltips (without using the HTML title attribute) which are accessible to sighted keyboard users (on focus), and screen reader users. There is still a difficulty of making them accessible to touch screen and speech control users.
This should be considered on a case-by-case basis. In many instances the title attribute can just be removed because it doesn't provide any useful information. In cases where it does, you have to ask why it wasn't visible in the first place.
Comment #13
Chi CreditAttribution: Chi commentedAn example of misused titles in node links.
Comment #14
Chi CreditAttribution: Chi commentedAnother example from pagination.
Comment #21
mgiffordI'm all for getting rid of them on links. However, it is useful to have some sort of tooltip function. The title attribute is still a best practice on iframe (YouTube embeds, etc).
<abbr title="World Health Organization">
also have value (at least potentially).PopperJS is now in core - https://popper.js.org/docs/v2/modifiers/offset/
Shouldn't we be replacing all
<a title="Expanded version of link text">Link text</a>
with PopperJS?Comment #22
cboyden CreditAttribution: cboyden at UC Berkeley Web Platform Services commentedI'm seeing a number of issues in contrib referencing this issue to support wholesale, drop-in replacement of the title attribute with the aria-label attribute. This is likely to cause more problems than it solves, including creating new violations of WCAG 2.5.3 Label in Name.
Comment #23
mgiffordTagging for WCAG 2.5.3