Associating too much Content to Form Controls using ARIA

Screen reader interaction with forms usually happens in focus mode. So if there are any non-interactive elements (like a paragraph) in the form, they are prone to be missed. To prevent this, they need to be attached specifically to the form controls. There are several ways to achieve this goal.

While we usually do not favour solutions using ARIA over traditional HTML, regarding forms, in our experience ARIA is the most robust way to associate content to controls.

Take a look at the following example which clearly overdoes the usage of aria-describedby:

Working Example

A seemingly very important form

Please tell us your name.

A name typically consists of a first and a last name.

Some people also have a middle name. Or more than one.

Because of that, we offer a single input here, instead of one for each kind of name.

Some cultures even have habits of naming that are very different to ours, so it’s really hard (if not impossible) to define a offer an input mask that’s working for all. This is another reason why having a single input works fine here.

Please tell us something about your history.

If you don’t know what a “biography” is, please visit the Wikipedia page about “Biography”.

Terms and conditions

Definitions

Some definitions that nobody ever will read.

Scope of Our Service

More information that nobody ever will read.

  • Very important note
  • Another important note
  • Maybe less important note
  • Again, very important note

Correspondence and Communication

Still: nobody will ever read this information.

But at least let’s put a link to Google here: What are terms and conditions?

Disclaimer

Yeah, you know what I mean: never-ever-read-information here.

Etc.

Etc. etc. etc.

Explanation

Admittedly, this example feels a bit artificial. But you get the point: listening to too much information at a time is making tired quickly. To fully understand, the user will have to manually trigger the whole announcement again and again – a very tedious task, especially for people with mental disabilities.

In addition, a lot of semantic information about the referenced elements (that would be announced in browse mode) is not announced this way: while list items are still recognizable by the prefix “bullet”, other semantic information is not announced at all (for examples occurrences of headings and links).

Code

<h1>
  A seemingly very important form
</h1>
<form>
  <div class="control">
    <label for="full_name">Full name</label><input aria-describedby="full_name_description" id="full_name" type="text" />
    <div class="description" id="full_name_description">
      <p>
        Please tell us your name.
      </p>
      <p>
        A name typically consists of a first and a last name.
      </p>
      <p>
        Some people also have a middle name. Or more than one.
      </p>
      <p>
        Because of that, we offer a single input here, instead of one for each kind of name.
      </p>
      <p>
        Some cultures even have habits of naming that are very different to ours, so it's really hard (if not impossible) to define a offer an input mask that's working for all. This is another reason why having a single input works fine here.
      </p>
    </div>
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea aria-describedby="biography_description" id="biography"></textarea>
    <div class="description" id="biography_description">
      <p>
        Please tell us something about your history.
      </p>
      <p>
        If you don't know what a "biography" is, please visit the <a href="https://en.wikipedia.org/wiki/Biography">Wikipedia page about "Biography"</a>.
      </p>
    </div>
  </div>
  <div class="control">
    <input aria-describedby="accept_agbs_description" id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the terms and conditions</label>
  </div>
  <input type="submit" value="Submit" />
  <div id="accept_agbs_description">
    <h2>
      Terms and conditions
    </h2>
    <h3>
      Definitions
    </h3>
    <p>
      Some definitions that nobody ever will read.
    </p>
    <h3>
      Scope of Our Service
    </h3>
    <p>
      More information that nobody ever will read.
    </p>
    <ul>
      <li>
        Very important note
      </li>
      <li>
        Another important note
      </li>
      <li>
        Maybe less important note
      </li>
      <li>
        Again, very important note
      </li>
    </ul>
    <h3>
      Correspondence and Communication
    </h3>
    <p>
      Still: nobody will ever read this information.
    </p>
    <p>
      But at least let's put a link to Google here: <a href="https://www.google.ch/search?q=what+are+terms+and+conditions">What are terms and conditions?</a>
    </p>
    <h3>
      Disclaimer
    </h3>
    <p>
      Yeah, you know what I mean: never-ever-read-information here.
    </p>
    <h3>
      Etc.
    </h3>
    <p>
      Etc. etc. etc.
    </p>
  </div>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + label {
  width: auto;
}

.description {
  margin-top: 0;
  margin-left: 120px;
}

fieldset .description {
  margin-left: 22px;
}

ul {
  margin-top: 0;
}

p {
  margin: 0;
}
NIL