Carousel: Number of carousel slides is apparent visually but not programmatically
custom-carousel-number
Rule
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
Background
If the total number of slides in a carousel is indicated visibly, it must also be conveyed programmatically to people who cannot see the content.
How to Fix
Fix this issue by using ONE of the following techniques:
- Markup the slides or thumbnails or "dots" with HTML unordered list markup: <ul> and <li>.
<ul> <li><button aria-label="slide 1" class="dot1"></button></li> <li><button aria-label="slide 2" class="dot2-selected" aria-current="true"></button></li> ..... </ul>
- Markup the slides or thumbnails or "dots" with ARIA role="list" on the outer container and role="listitem" on the container of each individual slide or thumbnail or "dot".
<div role="list"> <span role="listitem"><button aria-label="slide 1" class="dot1"></button></span> <span role="listitem"><button aria-label="slide 2" class="dot2-selected" aria-current="true"></button></span> ..... </div>
- Use the alt attribute or aria-label attribute of the slide or thumbnail or "dot" to include information such as: slide 3 of 8.
<div> <span><button aria-label="slide 1 of 8" class="dot1"></button></span> <span><button aria-label="slide 2 of 8" class="dot2-selected" aria-current="true"></button></span> ..... </div>
- Use CSS clipped text in conjunction with the slide content to include information such as: slide 3 of 8.
<div> <div> <span class="sr-text">Slide 1 of 8</span> <span>Content of slide 1....</span> </div> <div> <span class="sr-text">Slide 2 of 8</span> <span class="sr-text">Current slide</span> <span>Content of slide 2....</span> </div> ..... </div>