What are the different ways to visually hide content (and make it available only for screen readers)?
There are various techniques to visually hide content while making it available to screen readers. Here are some commonly used methods:
visibility: hidden;: Applying
visibility: hidden;to an element will hide it from both the visual display and screen readers. However, it completely removes the element from the document flow, and it will not be accessible to screen readers or assistive technologies.
position: absolute;with off-screen positioning: By positioning an element absolutely and placing it off-screen, you can visually hide it while still making it available to screen readers. For example:
.offscreen class to an element will position it off-screen, ensuring that it remains hidden from visual display but accessible to screen readers.
clip: Using the
clipproperty, you can visually hide content by clipping it outside the visible area. This technique is useful when you want to hide specific parts of an element while keeping the rest visible. However, note that older versions of Internet Explorer do not support
text-indentwith a large negative value: Applying
text-indentwith a large negative value to text-based content, such as links or headings, can visually hide the content off-screen while still allowing it to be read by screen readers. For example:
.offscreen-text class will move the text off-screen, making it invisible to sighted users but accessible to screen readers.
- ARIA attributes: Using Accessible Rich Internet Applications (ARIA) attributes, you can provide additional semantic information to screen readers. For example, the
aria-hidden="true"attribute can be added to elements that should be hidden from screen readers, while
aria-labelledbyattributes can be used to provide alternative text or labels for elements that are visually hidden.
It’s important to note that when using any of these techniques to visually hide content, you should still ensure that the hidden content is meaningful and relevant for screen reader users. Avoid hiding crucial information or interactive elements that are necessary for accessibility and usability.