Aria-label makes nested content not visible for screen reader

Question

I'm displaying some numeric info to the user describing it by using graphic icon label. I want to make it readable by screen reader using the aria-label tag. However, when I add this attribute, it makes the nested content not visible for screen readers. Below is the structure how the html looks like.

<ul>
    <li tabindex="0" aria-label="Counter 1">
        <div>
            <i aria-hidden="true"></i>
            <span class="counter">{{properties.counter1}}</span>
        </div>
    </li>
    <li tabindex="0" aria-label="Counter 2">
        <div>
            <i aria-hidden="true"></i>
            <span>{{properties.counter2}}</span>
        </div>
    </li>
</ul>

I was trying to use aria-describedby attribute, but it didn't work with dynamically created id.

Below is the screenshot from the chrome dev tools accessibility tab. I wonder why labeling makes content value omitted. Screenshot

Answer 1

That's correct, specifying aria-label or aria-labelledby generates the accessible name for the element rather than having to nest through all the child elements and concatenating text from each child. All child elements will be ignored. You can see more details regarding child elements at https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label . In particular:

When applied to an element with one of the roles that supports naming from child content , aria-label hides descendant content from assistive technology users and replaces it with the value of aria-label.

aria-describedby specifies the accessible description of the element, which is different from the accessible name.

When a screen reader announces an element's name, it will announce the accessible name first, possibly any state information (such as a checked checkbox or an expanded accordion), and then the accessible description.

The accessible name and description calculation has a precedence list which can be seen at https://www.w3.org/TR/accname-1.1/#step2 . Essentially it looks in this order. Whichever one is found first is used:

1. aria-labelledby
2. aria-label
3. <label>
4. internal text (such as the text between <button> and </button> or between <a> and </a> )

Note that there are some limitations to aria-label and aria-labelledby. See https://www.w3.org/TR/using-aria/#label-support