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為元素添加額外描述信息，常用於提示、錯(cuò)誤消息或操作說明，例如輸入框可通過aria-describedby關(guān)聯(lián)下方的提示文本“Must be at least 6 characters long”。正確選擇這三個(gè)屬性取決於是否存在可見標(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)文章！