icon: Providing empty alt or aria-label attributes do not fully hide icon from assistive tech #10721

Activity

1. ThomasBurleson commented on Jun 13, 2017

   

   ThomasBurleson

   on Jun 13, 2017

   Contributor

   More actions

   @katiehockman - do you have a reproducible issue/Plunkr ?
2. ThomasBurleson

   added

   needs: demoA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issueA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue

   a11yThis issue is related to accessibilityThis issue is related to accessibility

   on Jun 13, 2017
3. ThomasBurleson

   added this to the 1.1.5 milestone on Jun 13, 2017
4. katiehockman commented on Jun 13, 2017

   

   katiehockman

   on Jun 13, 2017

   Author

   More actions

   https://codepen.io/katiehockman/pen/GEjRKz
   Thanks!

   👍React with 👍1Reacted by Michael Prentice
5. ThomasBurleson

   assigned

   EladBezalel

   on Jun 13, 2017
6. ThomasBurleson commented on Jun 13, 2017

   

   ThomasBurleson

   on Jun 13, 2017

   Contributor

   More actions

   @EladBezalel - can you fix this one also?
7. clshortfuse commented on Jun 15, 2017

   

   clshortfuse

   on Jun 15, 2017

   Contributor

   More actions

   Note that the codepen is testing against 1.1.0.

   Still, in master, there's no logic in mdIcon that checks if the attribute exists, only if it is truthy (if (attr.alt)). Performing a hasAttribute check would fix it. Alternatively, a null-check (alt == null) could work as well, though that would include an implicit conversion.

   👍React with 👍2Reacted by Thomas Burleson and Michael Prentice
8. ThomasBurleson commented on Jun 15, 2017

   

   ThomasBurleson

   on Jun 15, 2017

   Last edited by ThomasBurleson

   Contributor

   More actions

   Here is an updated CodePen using latest/HEAD from AngularJS Material: https://codepen.io/angular-flex-layout/pen/eRBVpX

   

   Note the link to explicitly load the material-design icons:

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9. ThomasBurleson

   removed

   needs: demoA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issueA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue

   on Jun 15, 2017
10. katiehockman commented on Jun 26, 2017

    

    katiehockman

    on Jun 26, 2017

    Last edited by Splaktar

    Author

    More actions

    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:

    • Adding an alt attribute with some label text (and no aria-label) creates an element with both an aria-label and an alt attribute with identical text. This could cause unexpected results with assistive technology.
    • Why do both aria-label and alt need to be in the documentation? When I tested with Voiceover, the alt attribute isn't read by assistive technology, only the aria-label is. So it is perhaps okay to allow users to provide either an aria-label or an alt attribute, but it should always propogate to an aria-label on the rendered element.
    • The documentation should not say that empty alt/aria-label hides from the accessibility layer with aria-hidden="true". That's not what's happening here, and could be misleading for developers.

    👍React with 👍1Reacted by Michael Prentice
11. ThomasBurleson

    modified the milestones: 1.1.5, 1.1.6 on Sep 5, 2017
12. 25 remaining items

    Load more
13. Splaktar

    changed the title [-]mdIcon: Providing empty alt or aria-label attributes do not fully hide icon from assistive tech[/-] [+]icon: Providing empty alt or aria-label attributes do not fully hide icon from assistive tech[/+] on Jun 8, 2020
14. Splaktar

    added

    for: external contributor

    on Jun 8, 2020
15. Splaktar

    modified the milestones: 1.1.23, 1.2.0 on Jun 14, 2020
16. Splaktar

    modified the milestones: 1.2.0, 1.2.1 on Jul 6, 2020
17. Splaktar

    added

    g3: reportedThe issue was reported by an internal or external product team.The issue was reported by an internal or external product team.

    and removed

    for: external contributor

    needs: investigationThe cause of this issue is not well understood and needs to be investigated by the team or communityThe cause of this issue is not well understood and needs to be investigated by the team or community

    on Sep 21, 2020
18. Splaktar

    self-assigned this

    on Sep 21, 2020
19. Splaktar

    added

    has: Pull RequestA PR has been created to address this issueA PR has been created to address this issue

    on Sep 21, 2020
20. Splaktar

    added a commit that references this issue on Sep 21, 2020

    fix(icon): providing empty alt or aria-label attributes do not hide t…

    ...

    This issue will close once commit b685734 is merged into the 'master' branch.

    b685734
21. Splaktar

    removed

    needs: Pull Request

    on Sep 21, 2020
22. Splaktar

    closed this as completedin #12019on Sep 22, 2020
23. Splaktar

    added a commit that references this issue on Sep 22, 2020

    fix(icon): providing empty alt or aria-label attributes do not hide t…

    ...

    This issue will close once commit 37f1535 is merged into the 'master' branch.

    37f1535