Use aria-label to make a form accessible?

Question

I was looking for some solution to make a < form /> accessible and I have found the following:

A <label> element indicates which form field it labels by referencing its id attribute value:

<label for="fname"> It declares, "I am a label for this control".

With aria-labelledby, the form field indicates which element labels it by referencing its id attribute:

<input aria-labelledby="fnamelabel"> The form control declares, "I am a control labeled by this element".

So basically using a aria-labelledby or a label tag with the for attribute.

But,

rather than having a second HTML tag, for letting the screen reader 'read' the description to the user, could I not simply have an aria-label on the input? Is there any reason for not doing this?

Answer 1

A11y doesn't only mean that it's read in a screenreader. It also defines standards for users who can see.

You will have to display what the user wants to input anyhow. Note: placeholder is not a substitute for what should go into a field.

Example:

<input placeholder="name of contact person" value="Sam">
<input placeholder="name of co-worker" value="Tina">

If you run the snippet, can you tell from the rendered output alone which field contains which information? (No, you can't)

That's why you need to always show the label for an input, so there is no need to omit it.

You can also write the HTML like this:

<label> 
Name 
<input type="text">
</label>

Answer 2

This isn't actually as straight forward as you might think.

@cloned gave a great example of why you should have a visible label above an input, it makes it much easier to know what has been filled out.

This is especially important for people with anxiety disorders as they will often recheck everything.

Without a label their only option is delete each field and reenter it (several times) to confirm they have filled everything in correctly.

So the best option is to wrap it in a <label> (as @cloned suggested) or use <label for="idOfInput"> as an equally valid way of doing it (as you stated in your question).

So what about aria-labelledby - why would you use this on an <input>?

Well search boxes are one place where it is widely accepted you can not have a visible label. Using aria-labelledby is a great way of adding a label to those kind of inputs without having to change an accepted pattern.

But it has a better feature, you can add multiple id's for an input. This can be great for inputs that are part of a grouping or located in a table (if you have a valid reason to put them in a table) as you can use one label as the group name, one for the item name, making your HTML more DRY (Don't Repeat Yourself).

Why not use aria-label instead of a aria-labelledby?

Good question, the main reason is support for aria-label is still a bit flakey in some screen readers.

Support for aria-labelledby is better, but still just use a <label> wherever you can.

tl;dr

Use a <label> everywhere you can, change the design to accommodate labels if they aren't currently there, even if you have to argue with a graphic designer over the aesthetics of labels.

Use aria-labelledby everywhere else as it has slightly better support than aria-label.

Top Tip

'WAI-ARIA' is used to add additional information that cannot be achieved with HTML markup. Inputs have labels as part of semantic HTML, so use them!

aria-label and aria-describedby are only really needed for custom components or labelling things that don't have a native way of doing so (i.e. a clickable region on a page).

WAI-ARIA should be a last resort.

Answer 3

WCAG Success Criterion 2.5.3: Label in Name does require a visible label

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

This might be used to operate the interface through voice, for instance.

This has not to be mistaken with 4.1.2 Name, Role, Value (or others criteria) which concerns the accessible name, not the visible label.

Answer 4

You have a "for" attribute on the label element, that should contain the input's Id. That is how the association is made (no need for ARIA tags)

<label for="demo123">First Name</label>
<input id="demo123" />

IF for some reason you could not have a label then you would uses an aria-label

<input aria-label="First Name" />

Here is a working example to help.

<link href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/1.0.4/balloon.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
     <div class="form-group">
            <span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
            <label for="Textbox3836">First Name</label>
            <span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
            <input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
            <span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
        </div>
        
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

Take a look at this post it could help with the finer points. Accessibility Questions on best practices for aria-describedby and form fields