Skip to content

Latest commit

 

History

History
69 lines (51 loc) · 2.45 KB

link-has-name.md

File metadata and controls

69 lines (51 loc) · 2.45 KB
Raw

link-has-name

Link MUST has name.

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

WCAG 2.1 - 2.4.4 Link Purpose (In Context)

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

WCAG 2.1 - 4.1.2 Name, Role, Value

Options

ignore: string | string[]

Default: None

Ignores the element specified in the selector string from the validation target.

✅ Correct

<a href="https://www.w3.org/TR/WCAG21/#name-role-value"
  >WCAG 2.1 - 4.1.2 Name, Role, Value</a
>

If the element is not exposed to the accessibility API, name allows an empty.

<div aria-hidden="true">
  <a href="https://www.w3.org/TR/WCAG21/#name-role-value"></a>
</div>

Example: ignore: '[data-testid="aware-invalid-link"]'

The button does not respond, but does not report an error because it is excluded.

<a
  href="https://www.w3.org/TR/WCAG21/#name-role-value"
  data-testid="aware-invalid-link"
></a>

⚠️ Incorrect

<a href="https://www.w3.org/TR/WCAG21/#name-role-value">
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" role="img">
    <path
      d="M18.5137 40.0256H24.9376C25.7724 40.0256 26.5557 39.6184 27.0409 38.9324L39.1913 21.7523H32.7673C31.9326 21.7523 31.1492 22.1595 30.664 22.8455L18.5137 40.0256Z"
      fill="#2051CD"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M35.873 19.348H32.1184C31.0119 19.348 29.9735 19.8837 29.3304 20.7864L15.7265 39.8794C6.85643 38.7471 0 31.1706 0 21.9928C0 12.0335 8.07355 3.95997 18.0328 3.95997C27.0936 3.95997 34.5936 10.6426 35.873 19.348Z"
      fill="#2051CD"
    />
    <path
      d="M29.0929 40.0256H33.7241C34.3259 40.0256 34.8906 39.7363 35.2404 39.2488L44 27.042H39.3688C38.767 27.042 38.2022 27.3312 37.8525 27.8187L29.0929 40.0256Z"
      fill="#2051CD"
    />
  </svg>
</a>