Problem 1
The security shield icon is a link. It's often next to the actively-maintained icon, which is just an image. This fails Nielsen heuristic #4: Consistency and standards
Problem 2
The security shield icon link is not particularly useful to AT, as it does not describe the link destination well... and the rotor is full of multiple instances of the exact same link.
One reasonably fast solution would be to remove the link component from security shield icon. A single link to info on security coverage could be placed above the list, perhaps with additional information on what the icons mean -- especially since it's not that clear for the actively maintained one.
The alt text could probably be improved as well as "blue security shield" is accurate as far as describing, but doesn't convey the information the shield is intended to convey (they belong to the security advisory gang)
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | legend.png | 249.64 KB | bnjmnm |
| many-shields.jpg | 295.16 KB | bnjmnm | |
| security-shield-hmm.png | 138.5 KB | bnjmnm |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
chrisfromredfinI agree that the right solution here is removing it as a link; we have an open ticket to have a legend or some such, which describes what the icons mean.
Comment #4
bnjmnmLooks like #3282163: Improve iconography usability by adding a legend is the other issue, I must have missed it when I filed this. They're probably dupes, but I'll keep both open for the time being.
This is a rough mock of what a legend might look like. I think there's benefit in getting something like this in an MR even if it's not the final design as iterating on something that exists can get us to a solution faster.
On the cards themselves, the icons can have their alt text updated so they explain what the icons mean vs. what they look like.
Comment #5
leslieg commentedI agree with removing the link from the security icon. I would like input from the designers and UI/UX folks on the legend. where to place it and what information should be conveyed. Possibly link to more information about security and to what actively maintained means. That effort is being tracked on the related issue #3282163: Improve usability: iconography
Comment #7
srishtiiee commentedCreated an MR with initial implementation of legends for "security shield" and "actively maintained" icons.
Comment #8
drummI don’t think “actively maintained” is good to call out with an icon. It is often stale information, and “actively” is subjective anyway. I don't think it is useful to know when evaluating projects.
Some of the other values, like “Obsolete” and “Unsupported” are useful information. They are likely accurate, and are a definite reason to be cautious of a project. I think these should be shown as negative indicators.
This follows what we do on Drupal.org project pages like https://www.drupal.org/project/swiftmailer. Negative indicators are called out with an orange triangle with an exclamation point. “Minimally maintained” is not necessarily negative, it could be a straightforward project that only needs minimal maintenance, so it gets a more-neutral grey triangle. The implementation of that is at https://git.drupalcode.org/project/drupalorg/-/blob/e31465608d1380345834...
That said, we could change the options, labels, or descriptions any time on Drupal.org, and we can not be stuck waiting for a core upgrade cycle to make that sort of change. So this information should probably come directly from Drupal.org’s API with minimal processing.
Comment #10
bnjmnmCreated a new MR - sec_icon_a11y - that addresses the specific A11y concerns in the summary by removing the link around the security icon and changing both icons to have null alt text, but with title attributes that convey their respective statuses as if it were just text (it's not necessary to know they are images, just the information they represent). As an added benefit, the title attribute makes the information available on hover. Lets focus on this one vs the now-draft-status merge request 151, which I like but overlaps more with other issues.
Some good points seem to be made in #8, but that might be a conversation better had in a followup issue so the current accessibility bugs can be addressed quickly here, and the longer conversations/decisions regarding what information to even present can happen at whatever pace it requires.
Comment #11
narendrarspecialIdsget removed with latest code merge. Hence marking it as NW.Comment #12
bnjmnmComment #13
narendrarLink removed from security shield and title added. Marking as RTBC.
Comment #16
tim.plunkettMerged, thanks!