Security and maintained icons need to communicate correct information

From my experience for 508 compliance, we need to use the alt tag. When a screen reader reads the site it's going to use the alt tag and if the image doesn't load it's going to display the alt information not the title information.

After looking at 📌 Replace Wrench icon on project views with Gear icon Needs work and talking with Chris at DrupalCon the question came up as to why the icons on the cards don't have tool tips (title text). I think adding title text to provide a tool tip for these is important for usability here. As a user I would expect to hover over the icon to see some help text / tool tip for what the icon means. A discussion is happening around a legend ✨ Improve iconography usability by adding a legend Needs work which I don't think will be useful to users as it can be overlooked or ignored. I would propose to add both alt text and a title to these.

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/

Thank you for this extensive research, @jewelclark! This gives me a clear path forward. Updating proposed resolution.

The code has since changed and there was a bug. Rebased and just fixed bug.

The current MR does not address the actual proposed resolution. Needs work (quite a bit). #3 in the proposed resolution is currently most important, as I cannot tab to the icons right now, so the title won't be read out if focusable.

ben.hamelin → made their first commit to this issue’s fork.

Working on these updates, including adding "title" as noted, as well as "tabindex" to enable tabbing. Is it appropriate to add "tabindex" here, or should we rather add an anchor tag which would support tabbing by default without the need for the tabindex. The links could go to relevant d.o docs.

@ben.hamelin I don't see anyone else mentioning this, but for an inclusive tooltip, it should use a button element which inherently can have focus. A button does not indicate a new destination, which an anchor link does, so avoid the anchor approach.

The markup I would suggest would be along these lines: https://inclusive-components.design/tooltips-toggletips/#tooltipasprimar... but I am certainly open to ways in which the Drupal interface already approaches tooltip markup.

@artinruins Thanks, does that imply we would need the legend as proposed in: https://www.drupal.org/project/project_browser/issues/3282163 ✨ Improve iconography usability by adding a legend Needs work
Is there an approach where we use a button without a labeldby attribute, and perhaps place the title attribute on the button tag?

<button class="pb-project__status-icon" title="This module is covered by the Drupal Security Team."><img src="/modules/contrib/project_browser/images/blue-security-shield-icon.svg" class="pb-icon pb-icon--false pb-icon--status false" alt="Security Advisory Coverage" ></button>

@bnjmnm do you have other expectations here, or can anyone point to an existing core UI that does something similar? I thought the "Status report" page might but I don't see title attributes on those icons.

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

ben.hamelin → changed the visibility of the branch 3293909-security-and-maintained to hidden.

Thanks @ben.hamelin @jewelclark. From your sample code, I believe the contents of the alt tag are redundant. The title tag content on the button is descriptive enough that I don't think we need to describe the visual, which adds no additional information. Small thing, but let's not be overly verbose for the out-loud experience if we dont have to. Open to a conflicting view here.

@ben.hamelin Looks like the changes to Svelte files in the build folder may have been preventing the patch from applying cleanly. I pulled your branch and tested it directly. A few notes for next steps

• The Title tag and alt text have been added to the image and look and work well. This resolves the root issue raised
• The tabindex was added, however it doesn't seem to work with the img tag and as @artinruins suggest I think we should convert it to a button tag. I made this change in my browser and it appears to apply tab order correctly.
• As for @artinruins comment above about either doing alt text or title text, I think we should change the Alt text to something closer to the original suggestion "Security Advisory Note". That way we leave a future path to have an icon for items not covered with title text "This module is NOT covered by the Drupal Security Team." or some other note if need be. To be clear we should change the alt text as stated here and keep the title text as is.

Once the two items above are addressed, this should be pretty close to being ready for RTBC. Thanks all!

I've rebased from 2.0.x and updated the markup to include the button tag with title attribute as suggested. This is ready for review.

After some testing it looks like the tests on the MR aren't passing. I checked in with @ben.hamelin and he said they are JS related and he would look into them.

Also found that the icon has a boarder and background around it now.

We should consider adding the following to remove that

background: none;
padding: 0;
border: 0;

Other than the above, the changes work as expected the tabindex is working great and the tool tip, title, and alt text all appear to be fine.

@johnpicozzi Ok updated styles and addressed the linting and FunctionalJavascript tests. This is ready for another look!

After review this looks and works the way I would expect and resolves this issues original point. Moving to RTBC! Thanks all!