'After Adding Aria Tag , Screen Reader not able to read

I have Added aria-label but still Screen Reader not able to read Warning for which is 1st div . focus goes on 1st div but not reading anything. How to tell screen reader to read warining icon ?

<div aria-label="Warning for" class="col-xs-1 color-red-1 hbmi-warning m-t-2"></div>
<div class="col-xs-10 p-l-1x p-r-unset">Deductible Amount</div>
htmljquerywai-ariajaws-screen-reader


Solution 1:[1]

aria-label is mainly to be used on interactive elements, although the doc for aria-label doesn't specifically say that.

This doc talks about elements you can reliably use it on, https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby. The third last bullet point says:

  • Don't use aria-label or aria-labelledby on a span or div unless its given a role.

I would not randomly throw a role on the <div>, especially something like alert.

What behavior are you trying to achieve?
Is the div an error icon?
Do you want screen reader users to find this div? It's not an interactive element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions