SVG Accessibility & WCAG Standards Glossary
An authoritative reference of 30+ crucial terms in vector accessibility, WAI-ARIA roles, WCAG 2.2 AA / AAA criteria, and assistive technology engine behaviors.
aria-hidden="true"An attribute that completely removes an element and all its children from the Accessibility Tree. Used on decorative icons paired with adjacent text labels so screen readers do not announce redundant symbols.
aria-label="string"Provides an invisible string label to assistive tech. Essential for standalone icon buttons (e.g. a trash icon with no visible text) to compute its accessible name.
aria-labelledby="id"References the ID of one or more existing DOM elements (including internal SVG <title id="...">) to assign an accessible name. Takes precedence over aria-label in the AccName algorithm.
aria-describedby="id"Links an SVG to a secondary description (such as an internal <desc id="..."> or external tooltip) that screen readers announce after the element's primary accessible name.
aria-live="polite|assertive"Instructs screen readers to dynamically announce state changes when an icon morphs (e.g. a syncing spinner icon changing to a green checkmark upon completion).
aria-expanded="true|false"Indicates to assistive technology whether a collapsible UI element (like an accordion chevron icon) is currently opened or closed.
role="img"Explicit ARIA role telling screen readers to treat the complex nested SVG DOM tree (paths, circles, groups) as a single cohesive graphical unit rather than a collection of disparate geometry elements.
<title>The primary accessibility title element inside an SVG. When assigned an ID and linked via aria-labelledby, it supplies the accessible name to screen readers and displays native browser hover tooltips.
<desc>Provides a longer, detailed description for complex vector charts, diagrams, or infographic icons. Tied to assistive tech via aria-describedby.
focusable="false"An SVG-specific attribute historically required by Internet Explorer and legacy WebKit engines to prevent keyboard Tab focus from getting trapped on inline SVG nodes.
tabindex="0|-1"Controls keyboard focusability. Standalone interactive SVGs should receive tabindex="0" or preferably be wrapped inside a semantic native <button> element.
Requires all non-text content (icons, diagrams, symbols) that conveys meaning to have a text alternative that serves an equivalent purpose. Purely decorative icons must be hidden from assistive tech.
Requires visual information needed to identify UI components (active icon buttons, checkboxes, status icons) to have a contrast ratio of at least 3:1 against adjacent background colors.
Requires text labels paired with icons to maintain at least 4.5:1 contrast for normal body text and 3:1 for large typography.
Requires interactive touch targets (icon buttons) to have a minimum interactive bounding box of at least 24×24 CSS pixels (Level AA) or 48×48 CSS pixels (Level AAA).
Requires micro-interaction animations on icons (e.g. spinning or bouncing on hover) to be disableable or automatically disabled under prefers-reduced-motion: reduce.
The standardized W3C algorithmic sequence browsers use to determine what text to announce for an element. For icons, it evaluates aria-labelledby → aria-label → <title> → fallback text.
A parallel browser document tree that strips layout styles and represents only the accessibility objects, roles, and states exposed to OS screen readers (VoiceOver, NVDA, JAWS).
A CSS media feature detecting Windows Contrast Mode. Icons using fill: currentColor or stroke: currentColor adapt automatically, while hardcoded hex colors disappear or clash.
A media query detecting user OS settings requesting minimal animations to avoid vestibular motion sickness or vertigo during UI state transitions.
The internal memory model screen readers (like NVDA/JAWS) use to read through web pages line by line. Proper SVG hiding prevents virtual buffer clutter.