liveBook · Manning

Aria-describedby

As explained in Tiny CSS Projects

The aria-describedby attribute identifies elements that provide additional descriptive information for an interface element.

The aria-describedby attribute connects an interface element to another element containing additional descriptive information. For form fields, that relationship can point to an error message so screen readers and other assistive technologies receive the same guidance as sighted users. section 10.8

Connect a name field to its error

Give the error container an ID, then reference that ID from the input: <input id="name" required aria-describedby="nameError"> and <div id="nameError"><span role="alert">Please let us know who you are</span></div>. Keep the referenced div in the document even when the message is hidden; hide only its contents with CSS so the programmatic connection remains intact. section 10.8

Listing 10.20 Name-field HTML

<label for="name">Your Name</label>
<input type="text" id="name" name="name" maxlength="250" required
    aria-describedby="nameError">      ①
<div class="error" id="nameError">     ②
  <span role="alert">
    Please let us know who you are
  </span>
</div>

① Indicates which <div> provides extra information about the input (referenced by id)

② The ID referenced by the aria-describedby attribute

Inspect the complete name-field markup and see how the input’s aria-describedby value matches the error container’s id. section 10.8

How Tiny CSS Projects covers it

How deep it goes
Explains the ID relationship and the consequence of hiding the referenced element, but stops short of broader ARIA guidance.
Examples
Uses a required name input, a nameError container, and a role="alert" span for conditional validation feedback.
What you can do after
Apply it to preserve an accessible connection between a form field and its error message while hiding feedback conditionally.
How it connects
Links accessible descriptions with HTML forms, error messages, screen readers, and conditional field validation.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.