Ticker and Price Feed Announcements

A scrolling ticker of 40 prices updating several times a second is unusable for screen reader users if announced, distracting for people with attention or vestibular conditions if it moves, and impossible to read for many low-vision users. Price feeds need a different design for accessibility: a still table of prices users can read when they want, a watchlist of instruments that may speak, threshold alerts phrased clearly and controls to pause motion and updates.

This guide belongs to real-time data stream announcements.

Spec reference

SC 2.2.2 Pause, Stop, Hide (A) — moving, scrolling or auto-updating information that starts automatically and lasts more than five seconds can be paused, stopped or hidden.
SC 4.1.3 (AA) — alerts announced as status messages.
SC 1.4.1 (A) — up and down not conveyed by green and red alone.
SC 2.3.3 Animation from Interactions (AAA) — respect reduced motion.

Only the alert layer speaks.

When to use — and when not to

Use this layered approach for any interface with streaming prices, rates or sensor readings. The table is the accessible representation; the ticker is decoration.

Do not put aria-live on the ticker or the price table. The misapplication: a polite live region around a table of 40 prices, so the screen reader never stops talking and users cannot read anything else.

Annotated code example

<div class="ticker" aria-hidden="true">…scrolling prices…</div>
<button type="button" aria-pressed="false" id="pause-ticker">Pause ticker</button>

<table aria-labelledby="prices-h">
  <caption id="prices-h">Prices (updated 10:42:05) <button type="button">Pause updates</button></caption>
  <thead><tr><th scope="col">Instrument</th><th scope="col">Price</th><th scope="col">Change</th><th scope="col">Alert</th></tr></thead>
  <tbody>
    <tr><th scope="row">NORD</th><td>142.30</td><td>up 1.70 (1.2%)</td>
      <td><button type="button" aria-label="Set alert for NORD">Alert…</button></td></tr>
  </tbody>
</table>
<div role="status" class="sr-only" id="price-alerts"></div>

@media (prefers-reduced-motion: reduce) { .ticker { animation: none; overflow-x: auto; } }

feed.on('tick', t => {
  updateTable(t);                                               // silent DOM update
  const rule = watchlist.get(t.symbol);
  if (rule && crosses(t, rule)) queueAlert(`${t.symbol} ${t.price > rule.level ? 'rose above' : 'fell below'} ${rule.level}: now ${t.price}, ${dir(t)} ${pct(t)} today.`);
});

Keyboard & AT behaviour

Interaction	Result
Navigate price table	Current prices read on demand
Pause updates	Table freezes; “Updates paused”
Set alert	Dialog for threshold, saved
Threshold crossed	“NORD rose above 140: now 142.30, up 1.2% today.”
Pause ticker	Motion stops; aria-pressed true

Thresholds bring announcements to a usable level.

Step-by-step implementation

Hide and tame the ticker. Mark it aria-hidden, add a pause control, stop it under reduced motion and after a few cycles if possible.
Build the table. Instrument, price, change in words and numbers, time of last update; no live region.
Add pause updates. Freezing the table lets users read stable values and compare.
Build the watchlist. Users choose instruments and thresholds; store per user.
Announce alerts. Through a rate-limited announcer, with direction words, magnitude and the threshold crossed.

Integration context

Throttling is covered in throttling high-frequency aria-live updates, and pause controls in pause, stop, hide controls for auto-updating data. Numeric phrasing follows announcing numeric changes with direction and magnitude. Financial charts are covered in accessible candlestick and financial charts, and hidden tabs in pausing live regions when the tab is hidden.

Gotchas

Flashing cells. Price cells that flash on change can approach seizure thresholds if many flash together; keep flashes subtle, slow and optional.

Reading changing values. A screen reader reading a cell while it updates may read a mix; pause updates makes reading reliable.

Time stamps. Always show when prices were last updated, especially when paused.

Edge cases

Market closed. Announce once that the market is closed and stop updates.
Disconnected feed. Show and announce stale data: “Prices delayed — feed disconnected at 10:41”.
Many alerts at once. At market open, alerts can burst; summarise (“6 watchlist alerts”) with a link to the list.

Worked example

A brokerage web app had a scrolling ticker with a polite live region and a price table with flashing cells. Screen reader users muted the ticker by turning off speech; a user with vestibular sensitivity reported nausea. The team hid the ticker from assistive technology, added pause and reduced-motion handling, removed live regions from the table, added “Pause updates” and a watchlist with thresholds. Screen reader users now heard a few relevant alerts per hour and could read prices on demand.

Common mistakes

Live regions on tickers or price tables.
Unpausable motion.
Colour-only change indicators.
No time stamp.

Testing checklist

The ticker is hidden from AT, pausable and stops under reduced motion.
The price table has no live region and can be paused.
Watchlist alerts are user-chosen, thresholded and rate-limited.
Changes are stated in words.
Last update time is shown.

With NVDA, load the page and confirm that nothing is announced while you read other content. Navigate the price table and listen to rows; pause updates and read again to check stable values. Set an alert just above the current price on a test feed and confirm a single clear announcement when it crosses. Turn on reduced motion in the OS and confirm the ticker stops. Repeat in VoiceOver.

Alert wording for prices

Price alerts should answer three questions in order: what, which way and how much. “NORD rose above 140” names the instrument, direction and threshold. “Now 142.30, up 1.2% today” gives the current state. Avoid trader shorthand (“NORD +1.7”) in spoken text; symbols are read inconsistently. Read the instrument’s full name once in the watchlist, then use the symbol in alerts if users chose it.

Setting alerts accessibly

The alert dialog is where users configure what they will hear, so it must be simple. Use a labelled number input for the threshold with the current price shown next to it, a radio group for direction (“rises above”, “falls below”, “either”), and an optional percentage-change rule. Confirm with a clear summary (“Alert when NORD rises above 145.00”) and list active alerts in a table with edit and delete buttons named with the instrument. Return focus to the “Set alert” button when the dialog closes.

Key points

The ticker is decoration, the table is the content and the watchlist decides what speaks.

Design system notes

Provide a feed table component without live regions, a pausable ticker and an alert service with thresholds and rate limits.

FAQ

Should the ticker be accessible?

Its information should be, through the table; the ticker itself can be decorative.

How often should alerts speak?

Rarely; thresholds and rate limits keep it to a few per hour.

Can users hear all prices?

On demand by reading the table, not automatically.

Is pausing updates required?

For auto-updating content lasting more than five seconds, a pause mechanism is required by 2.2.2.

What about flashing cells?

Keep flashes subtle and optional.

Polite or assertive alerts?

Polite, unless the user marked an alert as urgent.

Pause, stop, hide controls for auto-updating data — controls
Throttling high-frequency aria-live updates — rate limiting
Announcing numeric changes — phrasing

← Back to Real-Time Data Stream Announcements