The Web Needs a Native .visually-hidden
I agree with the reasoning here—a new display
value would be ideal.
I agree with the reasoning here—a new display
value would be ideal.
A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.
When we hide content, there’s a greater risk the user won’t see it. There’s a higher reliance on digital literacy and it’s generally more labour intensive for the user.
Worse still, sometimes we kill off essential content.
When to use aria-hidden="true"
, and when you might need display: none
:
aria-hidden
by itself is not enough to completely hide an element from all users, if that is the end goal.
When to use role="presentation"
(or role="none"
):
Where
aria-hidden
can be used to completely hide content from assistive technology, modifying an element’srole
to “none” or “presentation” removes the semantics of the element, but does not hide the content from assistive technologies.
Comparing different ways to hide content accessibly:
There are three reasons behind hiding content in an interface, and it’s important to identify what those reasons are, as they will correlate with the appropriate technique needed to hide such content.
- Temporarily Hidden Content
- Purposefully Visually Hidden Content
- Purposefully Visual-Only Content