mozilla
Your Search Results

    Using the aria-label attribute

    This technique demonstrates how to use the aria-label attribute.

    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 

    Edit section

    Note: Opinons 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>
    

    Working Examples:

     

    Notes 

    The most common accessibility API mapping for a label is the accessible name property.

    Used by ARIA roles

    all elements of the base markup

    Compatibility

    TBD: Add support information for common UA and AT product combinations

    Additional resources

    Document Tags and Contributors

    Contributors to this page: icaaq, kscarfone, anastasia, Sheppy
    Last updated by: Sheppy,