link-name-present
Links have an accessible name
Checks that links expose a non-empty accessible name.
Applies to. Applies to <a href>, <area href> and elements whose role attribute resolves to link (its first token naming a known role, matched in any case) that are included in the accessibility tree. An <a> without an href is not a link and is not matched. An <a href>/<area href> whose explicit role is a known role other than link, a DPUB role inheriting from link, none or presentation is not a link and is not matched (ACT c487ae, Inapplicable Example 1). A custom element whose ElementInternals give it the link role (this.attachInternals().role), with no role attribute naming another, counts as a native element with that role does.
Expectation. The element has a non-empty accessible name. A programmatic name is taken first (aria-labelledby, aria-label, an associated <label>, title), and failing that the element falls back to its own subtree text, counting each descendant's own name (an <img alt>, aria-label or title), the shape behind the common <a><img alt="..."></a> logo link. The content fallback is suppressed when an explicit, known role that is not name-from-content is present (the first known token of the role fallback list); a role attribute with no known token falls back to the implicit role.
What a finding reports.
refs.accessibleName: what the programmatic name lookup found:present,value,mechanism(the attribute or element the name would come from,nonewhen there is none) andflags(notes on why a source gave no name).nullwhen no lookup was made.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<a href="/x">Read more</a>
The link's text content is its accessible name.
<a href="/x"></a>
No text content, aria-label, or aria-labelledby.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
name_closedContent
- Find the link the report names and note the text or icon it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from content no script can read.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the link, taken from its content, and the screen reader announces it.
Fail. The link has no name in the accessibility tree, since its content gives none, which fails WCAG 2.4.4 and 4.1.2.
name_contentTooDeep
- Find the link the report names and note the text it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from all of its nested content.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the link, taken from its nested content, and the screen reader announces it.
Fail. The link has no name in the accessibility tree, since its content gives none, which fails WCAG 2.4.4 and 4.1.2.
name_internals
- Inspect the link the report names, a custom element, and note its role.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the link, set through its internals or otherwise, and the screen reader announces it.
Fail. The link has no name in the accessibility tree and the screen reader announces only its role, which fails WCAG 2.4.4 and 4.1.2.