Make sure the Carousel Header makes sense when being used with a Screen Reader.

The possible tasks are:

• Currently, the left arrow is the first element you meet with the SR on. Maybe we could move them together in the HTML, after the slides, so they are read in conjunction when the SR is on. Or maybe we could have a different set of arrows, specifically for the SR reader.
• The arrows should have a descriptive aria-label to indicate what they are for.
• The "indicators" should probably be hidden to the SR.
• The CTA should also have a label to describe what is it for, maybe we can automate that label using some text + the title of the slide. Or maybe we want to actually create a new field for the aria-label of the CTA buttons. The CTA text is editable, we can use that as a aria label.
• The transition should make sense in a SR too, consider using aria attributes to hide transitioning elements, helper elements, or indicate that a transition has happened. Check the aria-live, live regions, and "atomic" attributes to handle the transition gracefully for a SR.
• Consider adding a "sr-only" help message to let users know they can disable the autoplay. There is no safe way to detect a screen reader, but also, it's a privacy concern: maybe the users don't want the site to know they have a disability.

See: https://www.w3.org/WAI/tutorials/carousels/

Our help doc: https://docs.google.com/document/d/1DZBz2cNnwD1KYQ3zTciwVacPDphf881inj7HkmRzoyo/edit#

Copied on Github