39 lines
1.4 KiB
Plaintext
39 lines
1.4 KiB
Plaintext
== Why is this an issue?
|
|
|
|
Anchors, represented by the `a` tag in HTML, usually contain a hyperlink that users can click to navigate to different sections of a website or different websites altogether.
|
|
|
|
However, when anchors do not have content or when the content is hidden from screen readers using the `aria-hidden` property,
|
|
it creates a significant accessibility issue. If an anchor's content is hidden or non-existent, visually impaired users may not be able to understand the purpose of the anchor or navigate the website effectively.
|
|
|
|
This rule checks that anchors do not use the `aria-hidden` property and have content provided either between the tags or as `aria-label` or `title` property.
|
|
|
|
== How to fix it
|
|
|
|
Ensure that anchors either have content or an `aria-label` or `title` attribute, and they should not use the `aria-hidden` property.
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,html,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<a aria-hidden>link to my site</a>
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,html,diff-id=1,diff-type=compliant]
|
|
----
|
|
<a>link to my site</a>
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a[``++<a>++``: The Anchor element]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[``++aria-hidden++`` attribute]
|
|
|
|
=== Standards
|
|
|
|
* W3C - https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context[Link purpose]
|