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

  1. In some cases we can just remove them wholesale.
  2. 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 custom data-* attributes, but much legacy code may be in use.
  3. 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.
  4. 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

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Title: Discourage non-inclusive use of the HTML title attribute » [META] Discourage non-inclusive use of the HTML title attribute
andrewmacpherson’s picture

Issue summary: View changes

There are two versions of the Paciello Group's "Using the HTML title attribute".

andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
rivimey’s picture

Just 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]

andrewmacpherson’s picture

Issue summary: View changes

A 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.

it seems important to me not to just remove title="*" but find another way to access the information

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.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Chi’s picture

An example of misused titles in node links.

<ul class="links inline">
  <li class="node-readmore">
     <a href="/node/1" rel="tag" title="Example" hreflang="en">Read more<span class="visually-hidden"> about Example</span></a> 
   </li>
  <li class="comment-add">
    <a href="/node/1#comment-form" title="Share your thoughts and opinions." hreflang="en">Add new comment</a>
  </li>
</ul>
Chi’s picture

Another example from pagination.

<code><a href="?page=1" title="Go to last page">
 <span class="visually-hidden">Last page</span>
 <span aria-hidden="true">Last »</span>
</a>

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

I'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?

cboyden’s picture

I'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.

mgifford’s picture

Issue tags: +wcag253

Tagging for WCAG 2.5.3

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.