Role tooltip vs screen reader icons and text

I got a demo for this how to use:

<a href="example.com" aria-describedby="mytooltip">you really should read me</a>
...
<div id="mytooltip" role="tooltip">
  more info here
</div>

Is can be used like:

So I have a span around the icon from fontawesome but is not contain text? then what to do? and still aria-hidden="true"? So icon also not display. Then how add text if icon not display what tooltip is for??

<span href="example.com" aria-describedby="mytooltip"><i aria-hidden="true" class="fas fa-glass" id="mytooltip" role="tooltip">about the example.com but in screen readers not display icon?</i></span>

Thanks!

Hello!

I didn’t understand much of what you wrote, so if this is not what you’re asking for, please try to explain further :sweat_smile:.

Basically, if it’s not important, ignore it and, even better, hide it, so users can skip content, otherwise notify the screen reader about the information.

For elements that don’t add information relevant to the content of the page or the actions a user can take, then hide it.

For example, if you have an image on the background, then you could set aria-hidden="true" to hide that element if it doesn’t have important information (a decoration, for instance). On the other hand, if that image says something like 30% discount on the purchase of X product, then you should allow the screen reader to read it, since it notifies the users about a sale on your site.

I hope to have understood your question :stuck_out_tongue:,

Regards!