Make interactive results accessible and understandable

Write the answer before drawing the result

Imagine a hypothetical community repair finder. A map shows three invented locations; one is open on Saturday, one is closed and one has no current opening-hours record. A visitor who cannot use the map still needs to identify the Saturday option, inspect the uncertainty and reach the same detail or booking action. “Map of repair points” names the picture but does not deliver that answer.

For each result, write a short answer sentence, the underlying values or places, the unit and time period, the source or rule version, any uncertainty, and the next available action. Then decide which visual form helps. W3C’s complex-images guidance treats charts and maps as information-rich images that need a short alternative and a fuller representation of their essential information. A chart may need a description and data table; an interactive map may need a list with equivalent place details and actions. The equivalent should be kept current with the visual result.

Make one result contract for every view

Use the downloadable matrix to test a named result state, not just a component in isolation. Record the task, visual view, text answer, structured data or list, action, update trigger, focus expectation and observed outcome. A person should be able to compare each presentation against the same underlying result. The row is a test prompt, not a claim that a tool passes WCAG 2.2 AA.

Separate three questions. Can the visitor obtain the facts? Can they understand what those facts mean, including units, dates and missing values? Can they take the same relevant action? A text alternative that merely says “bar chart” answers none of them. A table with numbers but no explanation can also leave a visitor to guess why a threshold matters. Conversely, a short conclusion alone may omit the detail needed to verify or challenge it.

• Chart: identify the chart briefly; state the trend or comparison that matters; provide the values in a labelled table when those values are part of the task.
• Map: identify the mapped area and purpose; provide an ordered, searchable or filtered list of the same relevant places, statuses and actions.
• Score: show its label, scale, direction, category and interpretation together; explain missing inputs and avoid precision the method cannot support.
• Numeric result: keep the value with its unit, period, assumptions and rounding rule; distinguish zero, unavailable and not applicable.

Hypothetical case: three repair locations and one changing result

In the invented finder, the map and list share three records: North Hall, open Saturday 10:00–14:00; East Hub, closed Saturday; and South Desk, Saturday hours unverified. These names and hours are fictional test data, not real venues or Kinetivy work. A Saturday filter should yield a text summary such as “One confirmed open location; one closed; one needs an hours check.” In this example the filter groups, rather than hides, records: North Hall appears under confirmed open, East Hub under closed, and South Desk under needs verification with its unverified status and a way to check its hours. A pin colour alone cannot distinguish the three states.

Selecting North Hall on the map or in the list should expose the same location name, hours, status and action. If the list contains a “View details” link, the map path should reach that same destination. Clearing the filter should restore the original ordering of all three records in both views. For the separate no-confirmed-match test, change North Hall from confirmed open to confirmed closed while East Hub stays closed and South Desk stays unverified. The result is zero confirmed open, two closed and one needing verification. The matrix tests whether the summary, visual view and list stay in sync. Do not turn an unverified place into an open one just to avoid an empty result.

Let the chart and its data tell the same story

A chart title and brief text can say what is compared and the main pattern. Put exact task-relevant values in a nearby data table or another equally usable structured presentation. W3C’s tables tutorial explains that header cells and data cells need structural relationships; use a caption and appropriate row and column headers rather than spacing or colour to imply them. Keep labels, units and time periods attached to each value when the layout changes at narrow widths.

For a hypothetical monthly result of 12, 9 and 15 visits, “March was highest at 15 visits” is useful orientation. A labelled table still lets someone inspect January 12, February 9 and March 15. These are invented demonstration values. If a chart filters to one month or changes series, update the text and table from the same state. If the graphic is decorative because the full answer already appears in text, do not make a screen reader repeat every visual mark.

Put meaning beside every score and number

A bare “72” is incomplete. Show what was measured, the scale and direction, the category or threshold if the model defines one, and what the visitor may do next. If the score is illustrative or uses judgement-based weights, say so. The assessment scoring guide covers whether a score is defensible; this page tests whether an existing score can be interpreted in every view. A progress ring and a red-to-green gradient cannot carry the result alone. WCAG’s use-of-colour criterion requires another visual way to convey meaning.

For numeric results, keep the unit and period with the value: “12 hours per week” differs from “12 hours per month.” When inputs change, say what changed and what the new result means. Keep rounding rules explicit when they can change a decision at a boundary. Treat an unavailable input as unknown rather than zero; test negative, zero, very large and unavailable values separately. The calculator planning guide covers arithmetic and assumptions, while this matrix checks the output people actually receive.

Keep focus predictable when results change

Work through the complete task with only a keyboard: change a filter, inspect a chart or map result, open its details and return. Every pointer action that matters needs a keyboard path. Keep the focus order meaningful and visibly indicate the active control. After a normal in-place recalculation, leave focus on the control the visitor used; provide a concise result status and keep the full answer in normal page content. W3C’s status-message criterion covers updates that assistive technology can present without receiving focus. A deliberate navigation to another page or a different complete view can require its own focus handling; test that transition separately.

Avoid announcing a whole table after each keystroke. If updates occur while someone types, control when the status is announced so it is useful rather than repetitive. Test the result after a filter returns no matches, after a source value becomes unavailable and after reset. At 320 CSS-pixel equivalent width or zoom, check that the text and controls remain usable; WCAG’s reflow criterion permits two-dimensional layout for content such as maps and data tables where that layout is necessary, but the surrounding answer and actions should not disappear.

Test one task through every presentation

Start with the blank matrix row, replace the hypothetical records with your own approved test fixtures, and assign one test ID to each result state. Compare the visual view with the text, table or list at baseline, after a change, at an edge case and after reset. Record the exact build, browser, viewport, keyboard and assistive-technology combination where used, the actual observation and a finding owner. “Not tested” must stay distinct from “pass.” Redact personal inputs and do not put real visitor records into the downloadable worksheet.

The matrix is an original task-level test set. It cannot certify a whole website or replace a WCAG evaluation. For site-wide sampling, conformance evidence and release decisions, use the website accessibility acceptance plan. For deciding whether a map is the right interface and which location data it needs, use the interactive map planning guide when published; this page remains about equivalent result delivery and behavior.