StockTicker Marquee: Real-Time Market Feed for Your Website

Design Tips for an Accessible StockTicker MarqueeA stock ticker marquee — a continuously scrolling display of stock symbols, prices, and changes — can add useful, glanceable market information to a website or app. But if it’s poorly designed, it becomes a distraction or an accessibility barrier for people with visual impairments, cognitive differences, motion sensitivity, or keyboard-only and screen-reader users. This article covers practical, design- and developer-focused tips to make your StockTicker Marquee both usable and inclusive.

1. Consider whether a marquee is the right pattern

Not every UI needs a continuously scrolling element. Marquees can be hard to read and may cause motion sickness for some users.

• Prefer static or periodically updated displays when the information isn’t time-critical.
• Use marquee only when space is limited and real-time, glanceable updates are essential.

2. Provide controls to pause, stop, or adjust motion

Motion control is essential for accessibility and comfort.

• Offer a visible “Pause/Play” button near the marquee. Ensure it’s keyboard-focusable and clearly labeled (aria-pressed or toggling text).
• Provide a “Stop” option that freezes content (not just hides it).
• Allow users to adjust speed — e.g., a slider or a small set of speed presets (Slow, Normal, Fast). Make these controls persistent per session if feasible.

Accessibility details:

• Use accessible names (aria-label) and states (aria-pressed, aria-live) so assistive tech can detect control state.
• Ensure controls are reachable via keyboard (Tab, Enter, Space) and have visible focus indicators.

3. Respect the prefers-reduced-motion media query

Modern operating systems provide a user preference for reduced motion; your marquee must honor it.

• Detect with CSS:

  
  @media (prefers-reduced-motion: reduce) { .marquee { animation: none; } } 

• Or detect in JavaScript and stop animations/scrolling, replacing with instant updates or paged content.

• When motion is disabled, ensure the content remains readable and navigable (e.g., render a vertical list or paginated cards).

4. Use semantic markup and ARIA for live updates

Make changes announced appropriately to assistive technologies without overwhelming users.

• For frequent updates (every few seconds), use aria-live="polite" on a container so screen readers announce updates without interrupting. For critical immediate changes, aria-live="assertive" may be used sparingly.
• Avoid announcing every tick for high-frequency updates — debounce or group updates so only meaningful changes are read (e.g., price crosses a threshold).
• Use semantic elements: lists (<ul>/<li>) for multiple tickers, headings for sections, and buttons for controls.

Example:

<div class="marquee" role="region" aria-label="Stock ticker">   <ul aria-live="polite">     <li>APPL 172.45 +1.2%</li>     <li>TSLA 689.20 -0.8%</li>   </ul> </div> 

5. Ensure readable typography and contrast

Stock tickers often use small, condensed type, which reduces legibility.

• Use clear, legible fonts at reasonable sizes; avoid extreme condensed faces for critical numbers.
• Contrast: meet at least WCAG AA for normal text; for small text aim for higher contrast. Use color contrast checkers to validate price up/down colors against background.
• Don’t rely on color alone to convey meaning — also include symbols (+/−), up/down arrows, or labels.

6. Design for cognitive load and scanning

Users should quickly scan and comprehend information.

• Keep each ticker item short and consistent: symbol — price — change (e.g., “AAPL 172.45 +1.2%”).
• Use spacing and separators (vertical bars, bullets) to separate items.
• Consider grouping by watchlists or sectors with clear headings.
• Provide search or filter for users to focus on specific symbols.

7. Keyboard accessibility and focus management

Many interactive marquees break keyboard navigation or hide content from focus.

• Make each meaningful ticker item keyboard-focusable if it has an associated action (link to details). Use or elements.
• Pause auto-scrolling when any marquee child receives focus. Restore previous behavior when focus leaves.
• Ensure focus order is logical and visible, and that tabbable controls exist for pause, speed, and settings.

marqueeContainer.addEventListener('focusin', () => pauseMarquee()); marqueeContainer.addEventListener('focusout', () => resumeMarquee());