Labeling an Element using aria-label

The aria-label attribute is used to provide an accessible name for interactive elements, such as buttons and form inputs, when the default accessible name is missing or not appropriate. It is meant to be used in cases where there is no visible text in the DOM that could be used to label the element. If there is visible text available to label the element, the aria-labelledby attribute should be used instead. The aria-label attribute can be used with regular HTML elements and is not limited to elements with an ARIA role assigned. It is important not to overuse the aria-label attribute and to consider making important information visible to all users, not just assistive technologies. The aria-label attribute should not be used with non-interactive elements or roles whose semantics are not mapped to the accessibility API, such as presentation or none. The aria-label attribute takes precedence over the title, alt, and label attributes for providing an accessible name for iframe, image, and input elements, respectively.

Working Example

How is the following link announced by screen readers?

Google

Is this what you expected?

Code

<p>
  How is the following link announced by screen readers?
</p>
<a aria-label="No, Bing!" href="...">Google</a>
<p>
  Is this what you expected?
</p>
NIL
NIL