Delete aria-describedby for form inputs

Feature Request
1

The aria-describedby attribute is used to provide an accessible description for an element.

<div class="form-group mb-3">  <label for="input1" class="form-label">Some text</label>
  <input type="text" class="form-control" id="input1" name="input2" aria-describedby="input1_help" placeholder="Enter some text">
  <small id="input1_help" class="form-text text-muted">Your input is very valuable.</small>
</div>

In this example, the aria-describedby="input1_help" attribute on the <input> element indicates that the element with the ID input1_help would be used to describe the input field.

However, the help text does nothing to describe the input field, it mereley adds a comment that will be read by screenreaders in any case, even without aria-describedby. In fact, there is a chance that the comment will be read twice due to aria-describedby.

The form is adequately described by the label element.

Also see:
Don't output aria-describedby attributes when Help Texts is disabled - Wappler General / Bugs - Wappler Community

2

What’s the issue here, i don’t understand why should we remove the aria-describedby attribute when it’s used according all the rules? It points to an element that is provides information about the field - i.e. the help text below it.

What do you mean by that? It’s a default placeholder text, not the real help text that would be used in your specific case. You change this to whatever you need.

3

The following <input> is labelled/described by <label>

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name">
    <label for="name" class="form-label">Full name</label>
</div>

When <label> is missing, then labelled/described by is required

<div mb-3">
    <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name" aria-labelledby="help_name">
    <div id="help_name">Full name</div>
</div>

If I am wrong in assuming this, why is it that Wappler only adds the aria attribute to <input>s and not to the other form inputs?

4

I believe aria-describedby attribute is correctly set, following what's described here:

Also the form elements added are just based on what Bootstrap docs show, same as the form in the Overview section:

5

MDN is correct! In the following, there is no <label> to describe <button>

<button aria-describedby="trash-desc">Move to trash</button>
…
<p id="trash-desc">
  Items in the trash will be permanently removed after 30 days.
</p>

Bootstrap is debatable. If I were to place this

<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>

anywhere in my document, screen readers would sound it out, loud and clear. Why would this be different just because it follows an <input>?

Mind you, I am not saying that Bootstrap is wrong. I am just saying that it is not necessary.

6

image

Alright, I give in!

After spending my Sunday morning diving through the web (instead of attending church), I've come to these conclusions:

  1. The <label> provides the primary description.
  2. The placeholder offers a visual hint.
  3. The aria-describedby attribute ensures that screen readers convey additional helpful information.
  4. Pointing the aria-describedby attribute to a non-existent ID won’t cause any major issues.

So, let's set aside the suggestion to delete aria-describedby.

1 Like