What changed in WCAG 2.2
WCAG 2.2 (published October 2023) keeps every WCAG 2.1 criterion with one exception and adds six new ones. The 55 rows below reflect that.
Removed: 4.1.1 Parsing (obsolete — modern browsers tolerate invalid markup).
Added: 2.4.11 Focus Not Obscured (Minimum) · 2.5.7 Dragging Movements · 2.5.8 Target Size (Minimum) · 3.2.6 Consistent Help · 3.3.7 Redundant Entry · 3.3.8 Accessible Authentication (Minimum).
Level A & AA criteria
55 criteria sorted by success-criterion number. Every criterion is listed with a justification inline, including those not applicable to plotview.
Status legend: Supports Partial Does Not Support Not Applicable
| SC # | Criterion | Level | Status | Notes / Evidence |
|---|---|---|---|---|
| 1.1.1 | Non-text Content | A | Partial | Extensive ARIA labeling on interactive elements (85+ aria-labels across 56 files). SVG box-plot components get role="button" + aria-label with value ranges (boxPlotElement.js). Sonification (beta) provides a non-text audio alternative to visual data. Gap: the sonification control buttons themselves are missing aria-label; some decorative icons lack aria-hidden="true". Target: Q3 2026. |
| 1.2.1 | Audio-only and Video-only (Prerecorded) | A | Not Applicable | Plotview contains no prerecorded audio-only or video-only content. |
| 1.2.2 | Captions (Prerecorded) | A | Not Applicable | No prerecorded synchronized media is embedded in plotview. |
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) | A | Not Applicable | No prerecorded video content in plotview. |
| 1.2.4 | Captions (Live) | AA | Not Applicable | No live media in plotview. |
| 1.2.5 | Audio Description (Prerecorded) | AA | Not Applicable | No prerecorded video content. |
| 1.3.1 | Info and Relationships | A | Partial | ARIA roles, headings (topMarginView.js), and labels convey structure; role="slider", role="button", role="menu", role="option", role="status" used throughout. Gap: toolbar is missing role="navigation" landmark (TuvaDataTools.jsx); some decorative icons lack aria-hidden="true". Target: Q3 2026. |
| 1.3.2 | Meaningful Sequence | A | Supports | DOM and reading order follow the visual flow; tab order follows source order. Grid navigation announces "HeaderName, CellValue" in reading order via ScreenReaderAnnouncer (gridAccessibility.js). |
| 1.3.3 | Sensory Characteristics | A | Supports | Instructions do not rely on shape, size, visual location, or color alone. Keyboard shortcuts use named modifiers and have a searchable written reference (KeyboardShortcutsPopup.jsx). |
| 1.3.4 | Orientation | AA | Supports | Plotview works in both portrait and landscape; layout reflows. No orientation lock is imposed. |
| 1.3.5 | Identify Input Purpose | AA | Not Applicable | Plotview does not collect the kinds of personal information (name, email, phone, address, etc.) enumerated in WCAG 1.3.5's applicable input-purpose list. |
| 1.4.1 | Use of Color | A | Supports | Three data-color schemes selectable in the Accessibility Card: Standard, Colorblind Safe, and Grayscale (src/utils/constants.js). Legends, labels, and axis text accompany color so information is never color-only. |
| 1.4.2 | Audio Control | A | Supports | Sonification (beta) audio is user-initiated (never auto-plays) and has Play, Pause, Stop, Restart, and Volume controls (SonificationSettingsComponent.jsx). |
| 1.4.3 | Contrast (Minimum) | AA | Supports | Primary text in the default theme hits 19.25:1 (#3d4146 on #fff), well above the 4.5:1 requirement. Reverse Contrast theme (white on black) inverts the palette. OS-level "High Contrast" preference is honored via @media (prefers-contrast: high). |
| 1.4.4 | Resize Text | AA | Supports | Users can raise font size from 14pt up to 32pt (~2.3×) via the Accessibility Card; case (dot) size is also adjustable (3–80 px). |
| 1.4.5 | Images of Text | AA | Supports | Informational text is rendered as live text. Chart labels, axis tick labels, legends, and button captions are real text — not rasterized images. |
| 1.4.10 | Reflow | AA | Partial | Responsive layout reflows on narrow viewports and the toolbar collapses on smaller widths. Gap: reflow not formally tested at 320 CSS px / 400% zoom; some data-dense plots may need horizontal scroll as an allowed exception. Target: Q3 2026. |
| 1.4.11 | Non-text Contrast | AA | Supports | UI component borders, button backgrounds, and focus indicators meet 3:1 contrast (focus style: outline: 3px solid #4A90E2 with 2px offset; high-contrast mode upgrades to 4px). |
| 1.4.12 | Text Spacing | AA | Partial | Layout uses relative units. Gap: not formally tested against the four 1.4.12 requirements; no user-facing text-spacing control. Target: Q3 2026. |
| 1.4.13 | Content on Hover or Focus | AA | Supports | Tooltips are dismissible (Escape), hoverable, and persist until dismissed or focus moves away. |
| 2.1.1 | Keyboard | A | Partial | Full keyboard coverage for toolbar, menus, Accessibility Card, and attribute placement via 40+ platform-aware shortcuts (src/utils/keymap.js); PlainButton ensures custom buttons activate on Enter/Space. Gaps: SVG plot element tabIndex is commented out in dotPlotElement.js:283; deprecated onKeyPress in some handlers; IncrDecrInput missing arrow-key handlers. Target: Q3 2026. |
| 2.1.2 | No Keyboard Trap | A | Partial | No keyboard traps in tested flows; Escape routes focus to dismiss controls; double-escape exits nested grid focus. Gap: AccessibilitySettingsComponent modal doesn't bidirectionally trap focus. Target: Q3 2026. |
| 2.1.4 | Character Key Shortcuts | A | Supports | Shortcuts use modifier keys (Alt, Shift, Ctrl, Meta) — not bare letter keys — so speech-input users don't trigger shortcuts accidentally. |
| 2.2.1 | Timing Adjustable | A | Not Applicable | Plotview has no time-limited interactions; analysis sessions do not expire. |
| 2.2.2 | Pause, Stop, Hide | A | Supports | Chart-transition animation can be disabled via the "Animate Graphs" toggle in the Accessibility Card. No auto-advancing or auto-updating content. |
| 2.3.1 | Three Flashes or Below Threshold | A | Supports | No flashing content; graph transitions are smooth fades below the 3-flashes-per-second threshold and can be disabled. |
| 2.4.1 | Bypass Blocks | A | Does Not Support | No skip-to-main-content link in the plotview shell. Planned remediation: add an sr-only skip link at the top of TuvaDataTools.jsx. Target: Q2 2026. |
| 2.4.2 | Page Titled | A | Supports | The embedding page provides a descriptive <title>. Document titles are not suppressed by plotview. |
| 2.4.3 | Focus Order | A | Partial | DOM-order tab sequence is logical across toolbar, case card, and plot area. Focus jump shortcuts (Shift+P/C/M/T/X/Y/L) reach regions directly. Gap: modal dialog focus-trap is unidirectional — see 2.1.2. Target: Q3 2026. |
| 2.4.4 | Link Purpose (In Context) | A | Supports | Interactive controls have accessible names that describe their purpose; link/button text is descriptive. |
| 2.4.5 | Multiple Ways | AA | Supports | Features are reachable via toolbar click, keyboard shortcut, or in-app menu. Accessibility Card: toolbar icon or Alt+Z. Keyboard shortcuts popup: icon or Ctrl+/. |
| 2.4.6 | Headings and Labels | AA | Supports | Headings describe topic or purpose; labels describe the control. Plot regions use role="heading" + aria-level. |
| 2.4.7 | Focus Visible | AA | Supports | Focus indicator: outline: 3px solid #4A90E2, outline-offset: 2px; 4px solid currentColor in high-contrast mode. Inset box-shadow where overflow: hidden would clip. |
| 2.4.11 | Focus Not Obscured (Minimum) | AA | Supports | New in WCAG 2.2. Dropdown menus use a layered z-index hierarchy (100 → 1001) preventing focused components from being hidden. The toolbar uses inset box-shadow for focus indicators to prevent overflow: hidden from clipping focus rings. Sliding panels and the Accessibility Settings modal have managed stacking order so the focused element is never fully obscured (_toolbar.scss, _sliding-panel.scss, _menu.scss, _keyboardshortcuts-popup.scss). |
| 2.5.1 | Pointer Gestures | A | Supports | Single-pointer actions only; no path-based or multi-point gestures are required. |
| 2.5.2 | Pointer Cancellation | A | Supports | Click and drag interactions trigger on pointer up, allowing users to abort by dragging off-target before release. |
| 2.5.3 | Label in Name | A | Supports | Accessible names include the visible label text. Toggle controls use aria-label that embeds the visible caption plus state. |
| 2.5.4 | Motion Actuation | A | Not Applicable | Plotview has no device-motion or user-motion-triggered functionality. |
| 2.5.7 | Dragging Movements | AA | Partial | New in WCAG 2.2 — the most critical 2.2 gap for plotview. A complete non-drag alternative exists: AttrA11yListDropDown surfaces a menu per attribute (Add to X Axis / Y Axis / Y2 Axis / Color by / Order by). Axis sliders support arrow-key adjustment (role="slider"), satisfying the criterion for slider drags. Gaps: the attribute context menu is gated behind the Accessibility Settings toggle — it should be always visible; draggable attribute rows do not announce that a menu alternative exists. Planned remediation: show the menu button on every attribute row unconditionally and add an aria-label hint. Target: Q3 2026. |
| 2.5.8 | Target Size (Minimum) | AA | Partial | New in WCAG 2.2. Most controls meet 24×24 CSS px: icon-only buttons (24×24), color-picker buttons (24×24), regular buttons (32 px tall), toggle buttons (44 px tall), increment/decrement buttons (44 px wide). Gaps: radio buttons and checkboxes render at 13×13 px (_inputs.scss) — below the 24 px minimum; menu item min-height is not enforced and may fall short at smaller font sizes; SVG plot data points rely on the "essential" exception (position encodes value) and can be small on dense datasets — users can enlarge them via the case-size control. Target: Q3 2026. |
| 3.1.1 | Language of Page | A | Partial | All user-facing strings route through Dyn.loc() with 10+ language PO files. Gap: the root <html lang> is not set on the standalone entry HTML in this repo; consumers embedding plotview should ensure lang is set on the host page. Target: Q3 2026. |
| 3.1.2 | Language of Parts | AA | Not Applicable | Plotview renders in a single language at a time. Inline mixed-language content is not authored. |
| 3.2.1 | On Focus | A | Supports | Receiving focus does not change context, open popups, or submit forms. |
| 3.2.2 | On Input | A | Supports | Changing a form value applies the preference without submitting or navigating. |
| 3.2.3 | Consistent Navigation | AA | Supports | Toolbar structure, menu ordering, and help access remain consistent across views. |
| 3.2.4 | Consistent Identification | AA | Supports | Icons and controls that share function use consistent labels and visual treatment across the app. |
| 3.2.6 | Consistent Help | A | Supports | New in WCAG 2.2. Help mechanisms keep a consistent location: the toolbar holds both the Keyboard Shortcuts icon and the Accessibility Settings access across every view. Relative order does not change. Keyboard shortcut: Ctrl+/ opens the shortcuts popup; Alt+Z opens the accessibility panel. |
| 3.3.1 | Error Identification | A | Partial | The derived-attribute formula editor surfaces errors inline. Gap: error messages are not consistently linked to form fields via aria-describedby, and focus does not move to the first error on submit. Target: Q3 2026. |
| 3.3.2 | Labels or Instructions | A | Supports | Form controls in the Accessibility Card, derived-attribute editor, and filter panels have associated visible labels and instructional help text. |
| 3.3.3 | Error Suggestion | AA | Partial | The formula editor suggests corrections for recognizable syntax errors. Gap: error suggestions not provided systematically across all form fields. Target: Q3 2026. |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | AA | Not Applicable | Plotview is a data-analysis tool; it does not process legal commitments, financial transactions, or make irreversible data modifications — user actions are reversible via undo/redo. |
| 3.3.7 | Redundant Entry | A | Supports | New in WCAG 2.2. No multi-step wizards or multi-page forms exist in plotview. Attribute editing retains previous values when reopening; the formula editor (CodeMirror) retains text during editing; color selection remembers last choice; accessibility preferences persist across sessions via dynPreferences. |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Not Applicable | New in WCAG 2.2. Plotview has no authentication mechanism. Authentication is handled by the Tuva Labs Django backend (separate product); no login forms, password fields, or cognitive-test CAPTCHAs exist in the plotview surface. |
| 4.1.2 | Name, Role, Value | A | Partial | Extensive ARIA usage (85+ aria-labels across 56 files); roles include button, menu, menuitem, option, slider, status; state attributes aria-expanded, aria-haspopup, aria-selected, aria-pressed, aria-disabled. Gap: sonification control buttons lack aria-label. Target: Q3 2026. |
| 4.1.3 | Status Messages | AA | Supports | Dynamic content announces via live region: ScreenReaderAnnouncer with aria-live="assertive", aria-atomic="true", role="status" (gridAccessibility.js:6-43). |