HtmlConceptBeginner · 3 min read

What is aria-describedby attribute in HTML and How to Use It

The aria-describedby attribute in HTML links an element to another element that provides a description for it. This helps assistive technologies, like screen readers, give users more context about the element's purpose or content.

⚙️

How It Works

The aria-describedby attribute works like a label that points to extra information about an element. Imagine you have a form input and want to give users more details about what to enter. Instead of cluttering the page, you put that detail in a separate element and use aria-describedby to connect them.

When a screen reader encounters the element with aria-describedby, it reads the description from the linked element aloud. This is like having a helpful friend whisper extra info to you when you focus on something.

This attribute improves accessibility by making sure users who rely on assistive tools get all the necessary context to understand and use the web content effectively.

💻

Example

This example shows a text input with a description linked using aria-describedby. The description explains what the user should type.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aria-describedby Example</title>
</head>
<body>
  <label for="email">Email:</label>
  <input type="email" id="email" aria-describedby="emailHelp">
  <div id="emailHelp">Please enter your email address in the format user@example.com.</div>
</body>
</html>

Output

A webpage with a label 'Email:', an input box, and below it a description: 'Please enter your email address in the format user@example.com.'

🎯

When to Use

Use aria-describedby when you want to provide extra information about an element that is not obvious from the label alone. This is common in forms, buttons, or interactive widgets where additional instructions or explanations help users understand how to interact.

For example, if a form field needs a hint about the required format or a warning message, linking that text with aria-describedby ensures screen reader users hear it. It also helps keep the page visually clean by separating the description from the main label.

✅

Key Points

aria-describedby links an element to descriptive text elsewhere on the page.
It improves accessibility by providing extra context for screen reader users.
The attribute value is the ID of the element containing the description.
It is often used in forms, buttons, and widgets for hints or instructions.
Helps keep the interface clean while still offering detailed information.

✅

Key Takeaways

aria-describedby connects an element to extra descriptive text for accessibility.

It helps screen readers provide more context to users about the element's purpose.

Use it to add hints, instructions, or warnings without cluttering the main label.

The attribute value must match the ID of the description element on the page.

It improves user experience for people relying on assistive technologies.