ARIA屬性aria-label、aria-labelledby和aria-describedby各有不同用途，需根據(jù)場景選擇。1. 使用aria-label為無可見標(biāo)簽的元素提供直接的可訪問名稱，如按鈕“?”可通過aria-label="Close"被讀屏軟件識別為“關(guān)閉按鈕”。2. 使用aria-labelledby引用頁面上已有的可見標(biāo)簽，適用于已有視覺標(biāo)簽的元素，如表單輸入框可通過aria-labelledby關(guān)聯(lián)其對應(yīng)的<label>標(biāo)簽。3. 使用aria-describedby為元素添加額外描述信息，常用于提示、錯誤消息或操作說明，例如輸入框可通過aria-describedby關(guān)聯(lián)下方的提示文本“Must be at least 6 characters long”。正確選擇這三個屬性取決于是否存在可見標(biāo)簽以及需要提供的是名稱還是附加說明。

When building accessible web interfaces, ARIA (Accessible Rich Internet Applications) attributes play a crucial 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-labelledby="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.

以上是Aria-Label，Aria-Labelled和Aria描述的區(qū)別是什么？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！