CODEWITHSUNDEEP
htmlaccessibility
Shashith Darshana
Shashith Darshana

Reputation: 2795

Accessibility of an anchor tag with an icon inside with aria hiden = true

I need to use a font awesome icon inside an anchor element. The anchor element does not contain anything rather than the icon.

Ex:

<a href="#" aria-label="List">
    <i className="fa fa-list-ul"
        title="List View"
        aria-hidden="true"
        title="List View">
    </i>
</a>

What I want to know is is it wrong to put aria-hidden="true" to the icon since there is no other text or content inside the anchor tag(In this case tag becomes informational so I think it is ok to use aria-hidden="false" here).

Is there any rules related to this so we all can follow ?

Upvotes: 0

Views: 3327

Answers (1)

Adam
Adam

Reputation: 18807

You have two things to consider:

  1. people not using assistive technologies (=not relying on ARIA)

    What alternative text will have people not using assistive technologies? A title attribute should be added to the a[href] tag.

    This will help for instance, people with cognitive deficience, people with low vision, people with bad computer knowledge to understand the meaning of the icon. If you can show the tooltip on keyboard focus, it would also be nice.

  2. people using assistive technologies

    The Fourth rule of ARIA says:

    Do not use role="presentation" or aria-hidden="true" on a visible focusable element

    Perfect here, only the a[href] is focusable. This does not prevent you from adding the aria-hidden attribute on the i element as long as you keep an aria-label for valid alternative for assistive technologies.

Upvotes: 1

Related Questions