The Marquee Role
Marquees are meant for content that scrolls or updates consistently, like a stock ticker or a news feed. Although the have a default
aria-live value of
off, you can use
aria-live="polite" to let users hear the information within a marquee in almost real-time. Do this carefully, the last thing you would want is have a screen reader update too much in a way that would make the rest of your application unusable to screen reader users due to too much screen reader noise.
Note: just like all animations, there should be a pause button to stop the marquee from rotating in order to comply with WCAG 2.2.2: Pause, Stop, Hide. In this example, the user can use the "Pause All Animations" widget at the top of the page to do this.
Example 1 - News Ticker
The news headlines in this ticker are provided by News API.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.