2

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?

Baro
  • 43
  • 1
  • 6

1 Answers1

3

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")

slugolicious
  • 8,671
  • 1
  • 20
  • 30
  • Thanks a lot, both work in a way, but the first one creates a quite diffusing reading, while reading the label. It ready just "City" and "Town" when click on it, not the whole label. So I go with the second approach, that a click on the label moves the cursor into the input, but therefore always reads the text as expected. – Baro Aug 15 '18 at 08:31