Experiments to see what is the minimum that can be done to make the SVG report consistently as an image with an accessible name.
DIV wrapping SVG, role IMG on DIV with aria-label, and SVG aria-hidden.
placeholder link after example one
SVG with role IMG, aria-labelledby to provide accessible name by using title, text in SVG has presentation and hidden roles.
placeholder link after example two
Combining examples one and two. DIV with role IMG and aria-labelledby pointing to title. Labelledby used in SVG also.
placeholder link after example three
Hidden accessible 1px by 1px image used as shim in order to get consistent reading across AT. SVG set to ARIA hidden.
placeholder link after example four
Hidden accessible text inside a SPAN with role of IMG, using aria-labelledby to point to nested span. SVG is set to ARIA hidden. The nested span composition makes the example work more widely, since the specification for img role says “a container for a collection of elements that form an image.”accessible name for chart
placeholder link after example five
Same as Example Five but adding an
aria-describedby to the img span to allow for a longer description.
placeholder link after example six
Same as Example Six but adding an
aria-describedby to the img span to allow for a longer description and also making the guts of the span aria-hidden.
placeholder link after example seven