HTML-ARIA describedby tag for association-CodePudding

How to make a label hide in the webpage but it must be readable for screen readers

<label for="phone" aria-describedby="input">
<p id="input"> message </p>
</label>

this one works for one field I am trying the same for the Separate fields .

there is 3 fields for phone number local code , prefix last one is suffix which is in the same row but different Column , under these fields i have provided an example for the input so whenever the people uses screen reader it must read the example along with the field name .

imagine this as my fields , the example as 123-456-7890

any inputs would be appreciable !!

CodePudding user response：

A typical way to handle this is by using a screen reader only class, and applying that to the element, such as the label. Here's an example of a such a class:

.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    border: 0;
    width: 1px;
    height: 1px;
}

This will throw the label, or other screen reader only element, off screen, but still allow a screen reader to interact with it.

CodePudding user response：

aria-label serves exactly this purpose: to provide a label for assistive technology, but not visually.

Keep in mind, though, that you still need a visual label. Since you are grouping several inputs for one piece of information, you should use the <fieldset> element to do so. Screen readers usually announce the legend when focus enters the group.

<fieldset>
  <legend>Phone number</legend>
  
  <input aria-label="Area code" autocomplete="tel-area-code" inputmode="numeric" size="3"> -
  <input aria-label="Local prefix" autocomplete="tel-local-prefix" inputmode="numeric" size="3"> -
  <input aria-label="Local suffix" autocomplete="tel-local-suffix" inputmode="numeric" size="4">
</fieldset>

You could also use classic <label> elements and hide them visually, but that seems over-engineered, there is way more code involved.

<label for="tel-ac" >Area code</label>
<input id="tel-ac" autocomplete="tel-area-code" inputmode="numeric" size="3"> -

Scott O'Hara explains well how to visually hide elements

Avoid separate inputs

Allowing different formats, handling errors, copy & paste and autocomplete are all important for usability, and even more for accessibility. Navigating within the number by means of arrow keys to correct parts should be possible as well. So it is in general advisable to not separate inputs for one piece of information, even if they consist of groups.

Separate inputs are how input masks work, and the GOV.UK team, who are leading in their accessible design system, have to say this on phone numbers:

Avoid input masking because it makes it harder for users to:

type a number in their preferred way

transcribe a number from another place and check that they’ve got it right