The ARIA attributes aria-label, aria-labeledby and aria-describedby have different uses and need to be selected according to the scene. 1. Use aria-label to provide direct accessible names for elements with no visible labels. For example, the button "?" can be recognized by the screen reading software as a "close button" through aria-label="Close". 2. Use aria-labelledby to refer to existing visible tags on the page. It is suitable for elements with existing visual tags. For example, the form input box can be associated with its corresponding <label> tag through aria-labelledby. 3. Use aria-describedby to add additional description information to the element, which is often used for prompts, error messages or operation instructions. For example, the input box can be associated with the prompt text "Must be at least 6 characters long" below through aria-describedby. The correct selection of these three attributes depends on whether there is a visible tag and whether the name or additional description needs to be provided.

When building accessible web interfaces, ARIA (Accessible Rich Internet Applications) attributes play a cruel role in helping screen readers interpret and convey information to users. Among the most commonly confused ARIA properties are aria-label , aria-labelledby , and aria-describedby . Each serves a specific purpose for labeling or describing elements, but they're not interchangeable.

Here's how they differ and when to use each:

Use aria-label when you need a simple, hidden label

aria-label provides an accessible name to an element using plain text. It's useful when there isn't a visible label already present on the page.

For example:

 <button aria-label="Close">?</button>

In this case, the button shows only an "X" symbol. Screen readers will announce it as “Close button,” making its function clear without adding visible text.

Key points:

• Use it when no visible text label exists.
• Avoid duplicating visible text with the same label — that can cause repetition for screen reader users.
• Don't use if the label needs to be dynamic or pulled from another element.

Use aria-labelledby when you want to reference a visible label

aria-labelledby tells assistive technologies to use the text of another element as the label by referencing its id .

Example:

 <h2 id="title">User Settings</h2>
<div aria-labelledby="title">
  This section lets you adjust your account preferences.
</div>

Here, the div gets its label from the heading above it.

Why it's useful:

• Keeps labels consistent between visual and assistive tech users.
• Allows multiple elements to share the same label by referencing one ID.
• Great for custom widgets or regions where native HTML doesn't provide semantics.

You might also use it for form elements that already have a visible <label> :

 <label id="search-label" for="search">Search</label>
<input type="text" id="search" aria-labeledby="search-label">

Use aria-describedby when you need to add extra descriptive text

aria-describedby works like a helper message — it references one or more elements that provide additional context or instructions.

Example:

 <label for="username">Username</label>
<p id="username-info">Must be at least 6 characters long.</p>
<input type="text" id="username" aria-describedby="username-info">

Now, screen readers will read the input's label normally and may also announce the description depending on the user's settings and screen reader behavior.

Best practices:

• Use it for hints, error messages, or instructions.
• Don't overload it — too many descriptions can become noise.
• Make sure the described content is meaningful and not redundant.

All three attributes help make UIs more accessible, but they serve different roles:

• aria-label : gives an element an accessible name directly.
• aria-labelledby : links to a visible label elsewhere on the page.
• aria-describedby : adds descriptive text that supports understanding.

Choosing the right one depends on whether a visible label exists, and whether you're providing a name or extra explanation.

That's basically it — straightforward once you know what each is meant for.

The above is the detailed content of What is the difference between aria-label, aria-labelledby, and aria-describedby?. For more information, please follow other related articles on the PHP Chinese website!