Testing Labeling Icons

This exercise seeks to find the best method to give a text alternative to an SVG icon, whether it is used alone or inside of an anchor or button.

Text alternatives described the shape of the icons: "circle", "square", "triangle".

Three different methods were tried:

The conclusion seems to be that:

Three tables of results can be found at the botom of the page.

Experiments

Experiment 1: SVG icons for non-actionable DOM elements

circle The previous icon uses hidden screen-reader-text.
square The previous icon uses the SVG title element.
The previous icon uses aria-label on the SVG element.

Experiment 2: SVG icons for links

circle The previous link with icon uses hidden screen-reader-text.
square The previous link with icon uses the SVG title element.
The previous link with icon uses aria-label on the link element.

Experiment 3: SVG icons for buttons

The previous button with icon uses hidden screen-reader-text.
The previous button with icon uses the SVG title element.
The previous button with icon uses aria-label on the button element.

Example 1 Results (SVG element only)

Browser Combo hidden text svg title aria-label notes
VO Safari Mac reads doesn't read doesn't read
VO Chrome Mac reads doesn't read doesn't read
VO Firefox Mac reads doesn't read doesn't read
NVDA Firefox PC reads doesn't read doesn't read
JAWS IE PC reads reads doesn't read
VO Safari iOS reads doesn't read doesn't read

Example 2 Results (SVG inside link)

Browser Combo hidden text svg title aria-label notes
VO Safari Mac reads doesn't read reads
VO Chrome Mac reads doesn't read reads
VO Firefox Mac reads doesn't read reads
NVDA Firefox PC reads doesn't read reads
JAWS IE PC reads reads reads
VO Safari iOS reads doesn't recognize link* doesn't recognize link* *in iOS VO can't discover a link without text

Example 3 Results (SVG inside button)

Browser Combo hidden text svg title aria-label notes
VO Safari Mac reads doesn't read reads
VO Chrome Mac reads doesn't read reads
VO Firefox Mac reads doesn't read reads
NVDA Firefox PC reads doesn't read reads
JAWS IE PC reads reads reads
VO Safari iOS reads doesn't read reads