A data‐science team embeds an interactive D3.js line chart in an HTML dashboard. During accessibility testing with NVDA, the screen reader announces every and element, which makes the chart practically impossible to navigate. The team's requirement is to make the visualization behave like one self-contained graphic so that:
it is announced once with the visible heading "Figure 4 - Quarterly Revenue 2020-2024";
a longer narrative in a nearby
element is read immediately after the title; and
the many graphical primitives inside the
Add a title attribute to every and element so that each graphic primitive announces its own tooltip text.
Using role="img" on a single container turns the chart into one logical image in the accessibility tree. Providing aria-labelledby gives the chart an accessible name (the visible heading), while aria-describedby points to the longer narrative so it is announced directly after the name. Because descendants of an element with role="img" are treated as presentation by default, adding aria-hidden or role="presentation" to the individual bars, paths, or circles prevents NVDA from enumerating each shape. The other options either leave every primitive exposed (title on each element), misuse role="application" (which can degrade, not simplify, navigation), or shift the problem to another document (iframe) without fixing the underlying tagging.
Ask Bash
Bash is our AI bot, trained to help you pass your exam. AI Generated Content may display inaccurate information, always double-check anything important.
What does role="img" do in an HTML accessibility context?
Open an interactive chat with Bash
What does aria-labelledby and aria-describedby do?
Open an interactive chat with Bash
Why is aria-hidden="true" or role="presentation" used for child graphical elements?