The aria-label attribute specifies a string value that serves as a label for an element.
Details
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="http://www.w3.org/2000/svg"><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>
</button>
Example 1: multiple navigations
<nav aria-label="Primary Navigation"> ... </nav>
...
<nav aria-label="Secondary Navigation" > ... </nav>