Security and maintained icons need to communicate correct information

Created on 2 July 2022, over 2 years ago
Updated 11 July 2024, 5 months ago

Problem/Motivation

There is much disagreement in the community about use of alt versus title. How should we use alt and title for icons indicating information on the project cards?

Steps to reproduce

Proposed resolution

  1. Change the alt attribute to "Security note" for the security icon, and "Maintenance note" for the maintenance icon.
  2. Change the title attribute to "This module is covered by the Drupal Security Team." for security and "This module is considered well-maintained." for the maintenance status. Note the change away from "actively" since that's an actual status on Drupal.org and our icon shows for more than just that status.
  3. Ensure that each icon element is focusable and appears in the tab order, so that this information is conveyable.

Note: this will have impact for ✨ Communicated the status/state of a module in one of the upper corners of a module card Needs review . If we communicatew that using icons also, I believe it would use a similar alt+title pattern.

πŸ› Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States chrisfromredfin Portland, Maine
  • πŸ‡ΊπŸ‡ΈUnited States MrMason

    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.

  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

    After looking at πŸ“Œ Replace Wrench icon on project views with Gear icon Postponed 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.

  • πŸ‡ΊπŸ‡Έ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/

  • πŸ‡ΊπŸ‡ΈUnited States chrisfromredfin Portland, Maine

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

  • πŸ‡¦πŸ‡ΊAustralia sime Melbourne

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

  • Status changed to Needs review 7 months ago
  • πŸ‡¦πŸ‡ΊAustralia sime Melbourne
  • Pipeline finished with Success
    7 months ago
    Total: 408s
    #180001
  • Status changed to Needs work 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States chrisfromredfin Portland, Maine

    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.

  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

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

  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

    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.

  • πŸ‡ΊπŸ‡ΈUnited States artinruins

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

  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

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

  • Pipeline finished with Success
    6 months ago
    Total: 511s
    #195579
  • Pipeline finished with Success
    6 months ago
    Total: 459s
    #198345
  • Pipeline finished with Success
    6 months ago
    Total: 546s
    #198945
  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI
  • πŸ‡ΊπŸ‡Έ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 ben.hamelin Adirondack Mountains, NY
  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

    ben.hamelin β†’ changed the visibility of the branch 3293909-security-and-maintained to hidden.

  • πŸ‡ΊπŸ‡ΈUnited States artinruins

    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.

  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

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

  • Pipeline finished with Failed
    6 months ago
    Total: 485s
    #204825
  • Status changed to Needs review 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

    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.

  • Pipeline finished with Failed
    6 months ago
    Total: 403s
    #204873
  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

    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.

  • Pipeline finished with Failed
    6 months ago
    Total: 10568s
    #204986
  • Pipeline finished with Success
    6 months ago
    Total: 511s
    #205097
  • Pipeline finished with Failed
    6 months ago
    Total: 398s
    #205104
  • Pipeline finished with Success
    6 months ago
    Total: 1251s
    #205126
  • πŸ‡ΊπŸ‡ΈUnited States ben.hamelin Adirondack Mountains, NY

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

  • Status changed to RTBC 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

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

  • Pipeline finished with Success
    6 months ago
    Total: 430s
    #208686
  • Status changed to Needs work 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

    @ben.hamelin Talked with @chrisfromredfin about this and the last update we would like to see is changing the alt to "Security note" for the img. Once this is done it should be good to go! Thanks for all the help here!

  • Pipeline finished with Failed
    6 months ago
    Total: 490s
    #208974
  • Pipeline finished with Success
    6 months ago
    #208990
  • Pipeline finished with Success
    6 months ago
    Total: 380s
    #210092
  • Status changed to RTBC 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States johnpicozzi Providence, RI

    @chrisfromredfin This has the changes we talked about and it passes all tests with no merge conflicts. Ready to go!

  • Pipeline finished with Success
    6 months ago
    Total: 415s
    #210106
  • Pipeline finished with Skipped
    6 months ago
    #210120
  • Status changed to Fixed 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States chrisfromredfin Portland, Maine

    Sometimes little things are such big victories. Thanks, everyone!

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024