Hide Purely Visual Elements from Screen Readers

[greenyouse]

Problem:
Purely visual controls are being displayed to screen readers.

Impact:
Screen reader users will have a separate, non-visual user experience when moving through the carousel since they navigate the DOM without paying special attention to the currently selected slide.
For a screen reader it's more important that the list of slides is laid out correctly in the DOM. The carousel controls are purely visual elements and should be removed from the accessibility tree to avoid confusion.

Recommended Solution:
Any visual controls for the carousel should be removed for screen readers. This can be done by setting aria-hidden on the slide dots (.control-dots) and carousel arrows (.control-arrow).

There are currently some aria-label attributes set on the carousel dots (.dot). If the parent element has aria-hidden added then these should also be removed since they won't be possible for screen readers to reach. The same would also apply for the carousel arrows (.control-arrow) if they have an aria-hidden attribute added.

The current slide label (.carousel-status) is also hard for screen reader users to understand as it reads "X of Y" after the slide contents in the DOM. Since this is also a purely visual element it should be hidden from screen readers with aria-hidden as well.

[greenyouse]

There might still be some problems with my recommended solution since aria-hidden shouldn't be set on interactive elements like the carousel arrows which are buttons and aria-hidden also shouldn't be set on parents of interactive elements like .control-dots. In those cases the screen reader will focus on the elements but nothing will happen which is a confusing experience. It's the 4th rule of using aria.

This one might be trickier than I had initially thought. It's still an issue for screen readers but I'm not sure about an easy workaround.

[greenyouse]

Hi, I was thinking a bit more about this problem. The aria-hidden being put on the buttons and .control-dots element in this situation should be acceptable. The goal is to hide the parts of the carousel that are purely visual so taking these parts out of the accessibility tree will serve that purpose.
Automated a11y checkers like Axe, Wave, and browser a11y audits will fire a warning about setting aria-hidden on interactive elements. Normally this would be a problem if we intended the screen reader users to interact with those buttons. In this case we don't want them to use the buttons so aria-hidden will work.
If those sections are being removed from the accessibility tree then it would still make sense to remove the other aria attributes there too like the aria-label.
Does that seem like it makes sense? I could send over a patch if this sounds helpful.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.