What is the default ARIA role for an SVG?

1
votes

I have been trying to determine what the default role of an SVG tag should be if the role attribute is not present and the document contains visible graphics.

Using Chrome's accessibility tools it tells me that the role is SVGRoot:

However this is not a valid ARIA role, it's one of Chrome's own roles it uses internally.

I have been able to find a lot more information through this document: WAI-ARIA Graphics Module, it indicates which roles are allowed to be used on an SVG tag, but I can't seem to narrow down which should be the default role.

What role should user agents assume SVGs to be by default if there is no valid role attribute provided?

2
htmlsvgaccessibilitywai-aria
I don't think there is a default, since SVG is for graphics/diagrams, there are already roles which suffice graphic, diagram,chart, etc, coupled w/ title/desc, you should be covered. – Napoli
@Napoli, so how do screen readers decide how they are going to deal with them or any other element that doesn't have a default role? Do they normally decide to map it to a default role anyway? – Godwin
@Godwin, No. If an html element does not have a role, or you set the role to 'presentation', then the screen reader does not know the purpose of that element. No default role will be mapped to it. Creating an accessible SVG is a huge research area. – slugolicious

2 Answers

5
votes

SVGs have no implicit aria roles on their own, however developers can (and probably should) assign one of the following roles: application, document, or img.

Use application if your SVG has focusable elements requiring user input.

Use document if your SVG contains mostly informational text that is not interactive.

Use img if your SVG is purely visual or uses a collection of elements to make up a single image.

Source: https://www.w3.org/TR/html-aria/#docconformance

5
votes

According to the ARIA in HTML document, SVG has no default corresponding role

"No corresponding role" status is defined as following:

The elements marked with No corresponding role, in the second column of the table do not have any implicit ARIA semantics, but they do have meaning and this meaning may be represented in roles, states and properties not provided by ARIA, and exposed to users of assistive technology via accessibility APIs. It is therefore recommended that web developers add a role attribute to a semantically neutral element such as a div or span, rather than overriding the semantics of the listed elements.

As already answerd by @josh, allowed roles for SVG elements are application, document, or img