40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
== Why is this an issue?
|
|
|
|
ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. The `aria-hidden` attribute is used to indicate that an element and all of its descendants are not visible or perceivable to any user as implemented by assistive technologies.
|
|
|
|
However, when `aria-hidden` is used on a focusable element, it can create a confusing and inaccessible experience for screen reader users. This is because the element will still be included in the tab order, so a screen reader user can navigate to it, but it will not be announced by the screen reader due to the `aria-hidden` attribute.
|
|
|
|
This rule ensures that focusable elements are not hidden from screen readers using the `aria-hidden` attribute.
|
|
|
|
== How to fix it
|
|
|
|
Check if the element is focusable. Focusable elements should not have `aria-hidden` attribute.
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,html,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<button aria-hidden="true">Click me</button>
|
|
----
|
|
|
|
Remove `aria-hidden` attribute.
|
|
|
|
==== Compliant solution
|
|
|
|
[source,html,diff-id=1,diff-type=compliant]
|
|
----
|
|
<button>Click me</button>
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[aria-hidden attribute (Reference)]
|
|
|
|
=== Standards
|
|
|
|
* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|