The aria-label attribute specifies a string value that serves as a label for an element.


The purpose of aria-label is the same as aria-labelledby. Both provide an accessible name for an element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name. If the label text is available in the DOM, and referencing the DOM content and acceptable user experience, prefer to use aria-labelledby. Don’t include both. If both are present on the same element, aria-labelledby will take precedence over aria-label.

Allowed value for aria-label

<string>: A string of text that will be the accessible name for the object.

Allowed roles for aria-label

Used in almost all roles except roles that can not be provided an accessible name by the author

Examples for aria-label

Example 1: button with decorative svg

					<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns=""><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/></svg>

Example 1: multiple navigations

					<nav aria-label="Primary Navigation"> ... </nav>
<nav aria-label="Secondary Navigation" > ... </nav>


Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

More articles