0

Screen reader not reading this div:

<div tabindex="7" aria-label="Here be redundant or extraneous content" >

It should read "Here be redundant or extraneous content"

Any help how to solve this problem with HTML?

unor
  • 92,415
  • 26
  • 211
  • 360
allo
  • 83
  • 3
  • 9
  • To give you a great answer, it might help us if you have a glance at [ask] if you haven't already. It might be also useful if you could provide a [mcve]. – Mat Nov 04 '16 at 14:27
  • 1
    Use of positive values for `tabindex` is discouraged. – Aurelio De Rosa Nov 05 '16 at 14:36

1 Answers1

0

A div is neither landmark nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

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.

Further, never use a positive tabindex value. And never use a div as interactive content (which the tab-stop implies is your intent).

In the future, your question might get more attention if you provide an example and description of the challenge you are trying to solve.

aardrian
  • 8,581
  • 30
  • 40