Screenreader Shall Read Aria-label And Ignore Label With For Attribute

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

Solution 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><labelfor="input_city">City <spanaria-hidden="true">/</span><spanclass="sr-only">or</span> Town</label></div><div><inputtype="text"requiredname="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><labelfor="input_city"aria-hidden="true">City / Town</label></div><div><inputtype="text"requiredname="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")