New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug 1873331: Adds alt-text to masthead icons #6497
Bug 1873331: Adds alt-text to masthead icons #6497
Conversation
@sg00dwin: This pull request references Bugzilla bug 1873331, which is invalid:
Comment In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
/bugzilla refresh |
@sg00dwin: This pull request references Bugzilla bug 1873331, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker. 3 validation(s) were run on this bug
In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would leave "icon" off the end. I believe this should basically be the text we would display if we made these text buttons instead of using icons.
You should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img
/cc @jessiehuff
@@ -564,7 +564,7 @@ class MastheadToolbarContents_ extends React.Component { | |||
isRead | |||
count={notificationAlerts?.data?.length || 0} | |||
> | |||
<BellIcon /> | |||
<BellIcon alt-text="Notification Bell icon" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<BellIcon alt-text="Notification Bell icon" /> | |
<BellIcon alt-text="View Notifications" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
included alt-text=""
based on comments below
@spadgett: GitHub didn't allow me to request PR reviews from the following users: jessiehuff. Note that only openshift members and repo collaborators can review this PR, and authors cannot review their own PRs. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spadgett is correct, typically words like "image", "icon", etc. are left off in labeling. This WAI article talks about recommendations for labeling, the section discussing this kind of wording is under "Superfluous information in the text alternative". In terms of the user experience for screen readers, the alt text here actually won't be read to users as there's currently an aria-hidden
on the svg which tells screen readers to ignore it. It looks like when creating our icons, if you don't include a title, it adds the aria-hidden
to the svg. There are some options here, but I'm thinking that this falls under the category of functional images and perhaps we should consider making the alt=""
since we already have the button aria-label. Scott O'Hara is a thought leader in the a11y space, and he does an excellent job of laying out the options in this article covering our use case. In Option 2 the button already has an aria-label, they just add the empty alt text to avoid redundancy and repetition. We could add a title to the icon which would make the svg not hidden anymore, but then we run the risk of some screen readers reading "Help menu Help menu."
+1 if there is already a button with an aria-label, we should use |
@jessiehuff Any idea why this wasn't caught by Axe? Is there a rule we need to enable? cc @dtaylor113 |
Technically speaking, when there is an |
23f24b5
to
d438116
Compare
Hey @sg00dwin, I didn't catch it before and even wrote it incorrectly earlier myself, but I think it should be an alt attribute so |
d438116
to
47940b0
Compare
Updated changes to use |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/lgtm
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: sg00dwin, spadgett The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
/retest Please review the full test history for this PR and help us cut down flakes. |
1 similar comment
/retest Please review the full test history for this PR and help us cut down flakes. |
/retest Please review the full test history for this PR and help us cut down flakes. |
@sg00dwin: All pull requests linked via external trackers have merged: Bugzilla bug 1873331 has been moved to the MODIFIED state. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
@sg00dwin: Bugzilla bug 1873331 is in an unrecognized state (MODIFIED) and will not be moved to the MODIFIED state. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
Added
alt
tosvg
icons.Buttons have
aria-label
Bug https://bugzilla.redhat.com/show_bug.cgi?id=1873331