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:

accessibly hidden text is the most reliable
SVG's title element is only supported in IE
aria-label isn't supported at all in non-actionable elements
in VO for iOS anchors without text inside are undiscoverable (therefore using aria-label is pointless)
By the way, using aria-label on an actionable that has text will read the aria-label INSTEAD of the text.

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

Experiments

The previous icon uses hidden screen-reader-text.

The previous icon uses the SVG title element.

The previous icon uses aria-label on the SVG element.

The previous link with icon uses hidden screen-reader-text.

The previous link with icon uses aria-label on the link element.

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
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
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