Animate meaningful chart updates and announce state changes

Animate meaningful chart updates so readers can follow the change from one state to the next. For example, when a chart’s data or interactive state changes in a meaningful way, animate the update between 250 ms and 2 s and provide a screen-reader announcement for the new state.

Readers need a stable bridge between the old state and the new state when a chart changes. Screen-reader users also need an explicit nonvisual signal that the state changed.

Mechanism: Bounded transition timing supports object constancy, so readers can track what changed instead of seeing marks jump abruptly or linger too long. State announcements expose the same change to screen-reader users.

Evidence: Chartability states that meaningful chart data changes should use animation for object constancy and that changes to state must be announced to screen reader users (Elavsky et al., 2022). The linked source recommends keeping update animations between 250 ms and 2 s because shorter changes may be hard to follow and longer ones may frustrate users (Amr & Stamboliyska, 2016).

Notes: This rule is presented as research-synthesized and explicitly described as needing more accessibility research.

• User Goal: Follow what changed after a chart update.
• Data: The chart’s data or state changes in a meaningful way.
• Chart Setting: The chart updates dynamically or interactively.
• Audience: Readers include screen-reader users.
• Success Criterion: The visual change is trackable and the state change is also exposed nonvisually.

Break it when: the chart does not present a meaningful data or state change that users need to follow. Why: the source conditions this treatment on meaningful changes.

Sacrifice: The updated state is not shown instantaneously. Risk: Transitions that are too short become hard to follow, and transitions that are too long frustrate users. Mitigation: Keep transition duration within the 250 ms to 2 s range and pair the visual update with a screen-reader announcement.

• Mistake: Letting meaningful chart changes appear as an instant jump with no transition. Why it fails: readers lose object constancy and the change becomes hard to follow.
• Mistake: Using transition durations faster than 250 ms or longer than 2 s. Why it fails: the change becomes either hard to follow or frustrating.
• Mistake: Changing chart state without a screen-reader announcement. Why it fails: screen-reader users are not informed that the state changed.

Failure Sign: A meaningful chart change jumps abruptly, drags on too long, or is not announced to screen-reader users. Quick Check: Trigger a meaningful update and verify that the visual transition lasts between 250 ms and 2 s and that a screen reader receives a state-change announcement. Stronger Test: Trigger several meaningful updates and confirm each one is visually followable and nonvisually announced.

• Add an animated transition to each meaningful chart update.
• Adjust the transition duration so it is not faster than 250 ms and not longer than 2 s.
• Add a text announcement for each meaningful state change so screen-reader users are notified.