DIV ARIA-LABEl not being read by JAWS
Your description lacks detail or a working example, so instead of trying to offer a solution all I can offer is this: aria-label
does not work on <div>
nor <span>
.
A <div>
and <span>
are neither landmarks nor interactive content. An aria-label
will not be read by a screen reader (and rightly so).
Without knowing the use, I have two suggestions which might help:
Put the
aria-label
directly on the control (knowing it will override the text of the control).Use some off-screen text if you want it to be encountered only by screen reader users.
Use an off-screen technique:
<div class="sr-only">
Here be redundant or extraneous content
</div>
The CSS might look like this (accounting for RTL languages too):
.SRonly {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
top: auto;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
html[dir=rtl] .SRonly {
left: inherit;
left: unset;
right: -9999px;
}
There are other techniques, but their value depends on your audience and its technology profile.
Your use of autofocus
on those <div>
makes me nervous. I hope you are not using them as interactive controls (like buttons). Ideally never use a div
as interactive content.
What was stated above is correct, BUT there is a proper solution:
A <div>
and <span>
are neither landmarks nor interactive content. An aria-label
will not be read by a screen reader (and rightly so).
The proper solution to having a reader such as JAWS or NVDA to read a <div>
is by adding a role
tag, along with an aria-label
.
<div role="navigation" aria-label="Main">
<!-- list of links to main website locations -->
</div>
Here are 2 links with the wide list of various roles which SHOULD be added:
- MDN - WAI-ARIA Roles
- We - ARIA in HTML: #allowed-aria-roles-states-and-properties