Rule: Add role to svg element

Rule ID Image 8
Conformance Required
Definition svg element must define an appropriate ARIA role that describes it's purpose.
Purpose
  • An svg element has the default role of graphics-document. The graphics-* roles are not well implemented in browsers or assistive technologies at this time, so the role needs to be overrided by the author with a role that appropriately identifies the purpose of the svg element.
Conformance Required
WCAG Success Criteria

Success Criterion 4.1.2 Name, Role, Value

Other Related Success Criterion:

Rule Category Images
Rule Scope Element
Techniques
  • Add role="img" attribute if the svg element is a descriptive image (most likely). When the img role is used the svg title element can be used to provide a text equivalent.
  • Add role="none" attribute if the svg element is a decorative image.
  • Add an appropriate ARIA role if the svg is interactive or can be represented by some other document role. For example a table roles if the svg content represents tabular data.
Information Links