There are several ways to visually hide content while making it available only for screen readers. Some of the most common methods include:
- Using the visually-hidden class: This is a commonly used class that can be applied to an element to hide it visually while still making it available to screen readers. The class typically sets the element's position, width, height, overflow, and clip properties to absolute, 1px, 1px, hidden, and rect(1px, 1px, 1px, 1px), respectively.
- Using the aria-hidden attribute: This attribute can be added to an element to hide it visually while still making it available to screen readers. When the attribute is set to true, the element will be hidden from both screen readers and visual browsers.
- Using the display: none CSS property: This property can be used to hide an element visually, but it will also hide the element from screen readers. To make the content available to screen readers, the element should be positioned off-screen using position: absolute and a negative value for left or top.
- Using the opacity: 0 CSS property: This property can be used to hide an element visually, but it will also hide the element from screen readers. To make the content available to screen readers, the element should be positioned off-screen using position: absolute and a negative value for left or top.
It is important to note that while these techniques can be used to make certain content available to screen readers while hiding it visually, they should be used with caution. It is always a good idea to test the result with screen readers to ensure that the content is accessible.
In summary, there are several ways to visually hide content while making it available only for screen readers, like using visually-hidden class, aria-hidden attribute, display: none and opacity: 0 CSS properties. However, it's important to test the result with screen readers to ensure that the content is accessible.