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

This is the best solution to use, especially when building from scratch.

The news headlines in this ticker are provided by News API.

Loading News Articles.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞