Here’s a question for front-end developers about accessibility.
If you hide an element with “aria-hidden,” the element and all of its children are hidden from screen readers. If one of those child elements is an image, the alt text is moot because a screen reader will ignore it.
Example:
<button aria-hidden="true">
<img src="/img/icon.svg">
</button>
Do you:
#Accessibility #A11y #UI #Design #FrontEnd #Development #HTML
@markwyner The question is moot — you can’t use `aria-hidden` on a focusable element.
@siblingpastry close, but not entirely true. The spec isn’t all-inclusive and is also ambiguous for this specific use.
@markwyner Using `aria-hidden` removes the element from the accessibility tree but doesn’t remove it from the focus order.
If you do this, then screen reader users will still be able to TAB to the button, but it will have no accessible name (even if you add `alt` to the image or ‘aria-label` to the button itself).
@siblingpastry true. But that doesn’t make it moot. You can also apply aria-disabled which will inform the screen reader that it’s “dimmed.”
Here is a screencast of VoiceOver reading two buttons. The first button has no aria attributes. The second button has the following:
aria-hidden=”true” aria-disabled=”true”
You can see that the button label is denoted as disabled (but only for screen readers) yet still reads the label. And it can be tabbed to.
@markwyner Regardless of the quirks or loopholes you may have found to justify this, an unlabelled button fails SC 4.1.2, and there’s no good reason for doing it.
