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?