πŸ‡ΊπŸ‡ΈUnited States @jewelclark

Account created on 30 November 2022, over 1 year ago
#

Recent comments

πŸ‡ΊπŸ‡ΈUnited States jewelclark

@artinruins, thank you! I had not thought of or found info about the button element for tooltips. After reading your comment (and link) I found additional info on accessible tooltips at https://accessibility.pearson.com/resources/developers-corner/reference-..., which also provides some helpful guidelines and code example.

πŸ‡ΊπŸ‡ΈUnited States jewelclark

I took a look at the screen shot and based on my research, the title attribute is being used correctly because it is designed to provide additional information and not to describe the image, but I would recommend a slight modification to the text such as, "This module is covered by the Drupal Security Team." Screen reader etiquette is to use correct grammar and punctuation whenever possible. See https://www.w3.org/WAI/tutorials/images/tips/

The title attribute may not be uniformly presented across all browsers and in general, is discouraged per: 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)."

This link may also be helpful: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html

So graphics with titles must be focusable via keyboard to expose the tooltip and not just via hover in order to provide equitable access. Otherwise, the information should be available as text with the image. The tooltip must also be dismissable via the ESC key to remove focus.

The alt attribute is meant to describe the image or the image's actions if it is a link so I again think the title is probably the more appropriate method for this additional information, but the alt attribute as shown is not correct. WCAG requires either a null attribute like: alt="", or a description. If the alt tag is left empty as in alt="", then a screen reader is likely to skip the element. In order to allow screen readers to definitely read out the tooltip, I would recommend adding an alt that describes the graphic such as, alt="Security note" and then the title can follow with the tooltip/title.

Example:

Additional information: https://www.a11y-collective.com/blog/tooltips-in-web-accessibility/

Production build 0.69.0 2024