Getting SVGs to Report as Image and Read Accessible Name

Experiments to see what is the minimum that can be done to make the SVG report consistently as an image with an accessible name.

Example One

DIV wrapping SVG, role IMG on DIV with aria-label, and SVG aria-hidden.

placeholder link after example one

Example Two

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

Example Three

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

Example Four

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

Example Five

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

placeholder link after example five

Example Six

Same as Example Five but adding an aria-describedby to the img span to allow for a longer description.

placeholder link after example six

Example Seven

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