Fixing icon links with no name

4.1.2 Name, Role, Value · Level A W3C: Understanding 4.1.2

A link whose only content is an icon, hidden from assistive technology with aria-hidden, has no name at all. Screen readers announce "link", and voice control users have nothing to say to activate it. The sample is a social media icon link.

Who this affects: People who use screen readers or voice control.

The failing markup

<p>Follow us:
  <a href="https://github.com/">
    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="#525252"></circle></svg>
  </a>
</p>

How to fix it

Give the link a name with aria-label="GitHub", or add visually hidden text inside the link.
Name the destination, not the icon: "GitHub", not "cat icon".

The change

  <p>Follow us:- Removed:   <a href="https://github.com/">+ Added:   <a href="https://github.com/" aria-label="GitHub">      <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="#525252"></circle></svg>    </a>  </p>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

arc-style: aria-name-missing, WCAG 4.1.2

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

The same problem also fails 2.4.4 Link Purpose, since the purpose of a link with no text cannot be determined. Engines report it under either criterion; the scanner merges the reports into one finding.