-
Notifications
You must be signed in to change notification settings - Fork 3.4k
icon: Providing empty alt or aria-label attributes do not fully hide icon from assistive tech #10721
Comments
@katiehockman - do you have a reproducible issue/Plunkr ? |
@EladBezalel - can you fix this one also? |
Note that the codepen is testing against 1.1.0. Still, in master, there's no logic in |
Here is an updated CodePen using latest/HEAD from AngularJS Material: https://codepen.io/angular-flex-layout/pen/eRBVpX
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
The demo provided still has the issue where providing only an empty alt attribute still creates an aria-label with the inner HTML of the md-icon element. Since the documentation for alt says that "If an empty string is provided, icon will be hidden from accessibility layer", the current implementation will mislead users. For example: <md-icon alt="">something</md-icon>
creates
<md-icon alt="" aria-label="something">something</md-icon> A few other thoughts/issues:
|
…hem from a11y - change behavior around how `aria-label` and `aria-hidden` is applied to match documentation - clarify documentation around `alt` and `aria-label` behavior - fix/improve Closure types - remove unused variable and out of date comments - replace blacklist with block-list in comments Fixes #10721
…hem from a11y - change behavior around how `aria-label` and `aria-hidden` is applied to match documentation - clarify documentation around `alt` and `aria-label` behavior - fix/improve Closure types - remove unused variable and out of date comments - replace blacklist with block-list in comments Fixes #10721
Actual Behavior:
What is the issue? *
Defining alt="" and aria-label="" on md-icon elements do not fully hide the icon from assistive technology. The documentation states that defining those attributes as empty will put aria-hidden="true" on the element, but this doesn't happen.
What is the expected behavior? *
Defining either (or both) alt="" or aria-label="" should set aria-hidden="true" to the md-icon element. The icon name should not be used as an alternative aria-label if no aria-label is available. By defining aria-hidden="true" this element this will fully hide the element from assistive technology.
CodePen (or steps to reproduce the issue): *
Details:
Add aria-label="" to an md-icon with role="img" and/or add alt="" to an md-icon with role="img". Use a screen reader to navigate to the image element - It will be navigable by a screen reader but will have no label.AngularJS Versions: *
AngularJS Version:
AngularJS Material Version:
1.1.4Additional Information:
Browser Type: *
ChromeBrowser Version: *
Version 58.0.3029.110 (64-bit)OS: *
macOS Sieera Version 10.12.5Stack Traces:
Screen Reader:
Voiceover (likely others as well)The text was updated successfully, but these errors were encountered: