Accessibility Testing Lab home
Accessibility Testing LabA hands-on environment for practising accessibility testing

Testing icons and SVGs with a screen reader

Determine whether meaningful graphics have useful names and decorative graphics remain silent.

What this method tests

This method checks whether icons and SVG graphics contribute the right information to the accessibility tree: a useful name when meaningful, and no unnecessary noise when decorative.

What you need

Use a screen reader with a compatible browser. If possible, repeat uncertain results with another common browser or screen reader.

How to perform the test

  1. Navigate through graphics and controls containing icons.
  2. Compare each announcement with the visible purpose of the graphic.
  3. Confirm that meaningful standalone graphics have concise, accurate names.
  4. Confirm that decorative graphics are skipped rather than announced separately.
  5. Listen for duplicate names when an icon appears beside visible control text.
  6. Test CSS-generated content in the supported combinations relevant to the product.

What to observe

Listen for missing meaning, irrelevant filenames, repeated words, generic names such as “icon,” and decorative symbols that interrupt otherwise clear content.

Demonstration

Meaningful inline SVG icons

These examples use the same search icon. The first two expose the name “Search.” The last one is meaningful but unnamed.

Search
Accessible: inline SVG with <title> and aria-labelledby.
Accessible: inline SVG with role="img" and aria-label.
Not accessible: meaningful SVG with no accessible name.

Decorative inline SVG icons

When visible text already explains a control, its icon is usually decorative and should not add another announcement.

Accessible: the button text supplies the name and the SVG is hidden.
Not ideal: the decorative icon may add “Arrow” to the announcement.

CSS-generated icons

Generated content can be exposed differently by different browser and screen-reader combinations. Listen to each pattern rather than assuming support.

Profile status
Accessible: visible text provides the name and the circle is decorative.
ARIA name: the otherwise textless visual is named “Next step.”
Not accessible: the visual arrow has no accessible name.
Continue
Generated alternative: content: "→" / "" can treat the arrow as decorative where supported.

Interpreting the results

  • A meaningful graphic needs an accessible name that communicates the same purpose as its visual presentation.
  • A decorative icon should normally add no separate announcement when adjacent text already conveys its meaning.
  • An icon inside a labelled control should not make the control's name repetitive or confusing.

Limitations

  • SVG and generated-content announcements vary across browser and screen-reader combinations.
  • A screen reader can reveal the accessible name but cannot determine whether that name accurately describes the visual meaning.