No, carousel content shouldn't be hidden for screenreaders. Carousels are an entirely visual solution to reducing the amount of visual-noise on a page while still being able to access that content. Visual noise is not a problem screen-reader users suffer from.
- Does visibility hidden affect screen readers?
- How do I hide content on screen reader?
- How do you make an accessible carousel?
- What is visually hidden text?
Does visibility hidden affect screen readers?
display:none or visibility: hidden
The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader.
How do I hide content on screen reader?
To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. To hide text from a screen reader and hide it visually use the hidden attribute. You can also use CSS to set display: none or visibility: hidden to hide an element from screen readers and visually.
How do you make an accessible carousel?
The main carousel accessibility consideration for sighted users is to not make it auto-play. If you must make the carousel auto-play, then you need to provide a pause or stop button. If you use a pause or stop button, place it before the carousel, and provide descriptive link text like, “Pause animated content.”
What is visually hidden text?
Visually hidden text
visuallyhidden class definition is a way to visually hide text content from sighted users, yet, have the content remain available for screen reader users. This is also sometimes called sr-only, accessibility, or other related class names.