How to read aria-label of div with large content (paragraph) using JAWS

How to read aria-label of div with large content (paragraph) using JAWS

aria-label overrides the content inside. Don’t use aria-label if you want content inside read out.

<button type="button" aria-label="foo">
Here is a bunch of text.
There's even an image! 
<img src="img.png" alt="Hi!">
And more text.
</button>

The only thing read out with that button is “foo.”

Don’t use aria-label unless there’s really no real content inside:

<button type="button" aria-label="add to cart">
<i class="font-awesome-shopping-cart-image"></i>
</button>

This is the way to use aria-label.

Also, not all elements will allow aria-label to be their “label.” Mostly elements with a role (like buttons who have a role of button, or articles who have a role of region). Divs and spans don’t have roles, because they have no meaning.

If you have text you want read out by a screen reader in addition to the visible text then add visually-hidden text to the element:

<div>
<p class="screen-reader-only">I'm some extra text for screen reader users.</p>
<p>I'm regular div text everyone can see.</p>
</div>

where p.screen-reader-only has

.screen-reader-only {
  position: absolute;
  left: -999em;
  top: 0;
  height: 0;
}
[dir=rtl] .screen-reader-only {
  left: auto;
  right: -999em;
}

(or similar, there’s also the super verbose clip method as well).

So long as you don’t use display: none or visibility: hidden, setting the text offscreen will make it invisible to sighted users but will be detected by screen readers.

Try not to make too much hidden text though. Lots of screen reader users can see, perhaps just not very well, or they can see but have reading problems. Hidden text being read out loud that the person can’t find can be a problem, so try to have as little hidden text as possible.

cheers.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.