@PhoenixDev22
Posted
Hi Dodeun, Glad it was helpful.
- Hiding Content for Everyone:
display: none;
hides the content but also removes it from the accessibility tree so screen readers won’t read it similar tohidden attribute
. - Hiding Content for Screen Readers:
aria-hidden="true"
- Showing Additional Content for Screen Readers: To hide content visually while keeping it in the accessibility tree for screen readers:
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Hopefully this makes it clear. Happy coding!
Marked as helpful