Mastering Marquee: Auto Scrolling Text with Live Example and Code Samples
Marquees (a.k.a. Auto-Scrolling Content) are meant for content that scrolls or updates consistently, like a stock ticker or a news feed.
Although they 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 since it would be a bad user experience to have a screen reader update too often. The rest of your application will become unusable to screen reader users due to too much screen reader noise when there are too many alerts.
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.
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 make the example accessible.