Screenreader shall read aria-label and ignore label with for attribute

Question

I am currently working on an html form with proper disability access. I have inputs labelled by labels with the for-attribute. But now I want one input getting a different text for the screenreader than the label displays:

<div class="cc_form_w50 t5">
  <label id="lbl_city" for="input_city">City / Town</label>
</div>
<div class="cc_form_w50 t5">
  <input type="text" required name="city" title="City / Town" placeholder="Enter your city or town" class="w100" id="input_city">
</div>

The screenreader ready the "/" as symbol in the system language, so I want to make the screenreader "or" instead, like the title or placeholder. As long as I use the "for"-attribute or "aria-labelledby" the text of the label is read. Any "aria-label"-attribute is ignored by the reader.

Without the "for"-attribute the cursor doesn't enter the input by selecting the label.

Is it possible to tell the screenreader to read something else than the content of the label-tag?

Answer 1

There are two ways to fix it.

The first hides the '/' from screen readers (using aria-hidden ) then adds visually hidden text that is read by screen readers. You can do a google search on the sr-only class. It comes from bootstrap but lots of other frameworks define it too. You can copy the definition of the class from this stackoverflow answer .

<div>
  <label for="input_city">City <span aria-hidden="true">/</span> <span class="sr-only">or</span> Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city">
</div>

Another way to fix it (and this is a little simpler) is to hide the label completely (again, using aria-hidden ) from the screen reader then specify an aria-label on the <input> .

<div>
  <label for="input_city" aria-hidden="true">City / Town</label>
</div>
<div>
  <input type="text" required name="city" placeholder="Enter your city or town" id="input_city" aria-label="city or town">
</div>

Both solutions still allow the mouse user to click on the label and have it move the focus to the <input> field.

I also removed the title (tooltip) attribute because it seemed overkill having a label, a placeholder, and a tooltip. Plus, some screen readers incorrectly include the tooltip in the name of the label when it's read, so sometimes you still hear the '/' in the label if you have the tooltip. (The tooltip is the last attribute examined when determining the accessible name of an element. See step 2I in the " Accessible Name and Description Computation ")