当前位置：文江博客知识库 en-US 文档 Web Accessibility ARIA ARIA_Techniques Using_the_aria-label_attribute

Using the aria-label attribute - Accessibility 编辑

Draft

This page is not complete.

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA role assigned.

Value

string

Possible effects on user agents and assistive technology

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1: Multiple Labels

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

<button aria-label="Close" onclick="myDialog.close()">X</button>

Notes

The most common accessibility API mapping for a label is the accessible name property.
Attributes, including aria-label declarations, are ignored by most automatic translation services.