Ensure SVGs are accessible by following WCAG techniques for visual content, text and scripting.
- Identify the default language and any language changes using the
xml:langattributes [WCAG 3.1.1]
- Provide a title using the
titleelement [WCAG 2.4.2]
- Provide a description using the
descelement [WCAG 1.1.1]
- Use ARIA roles, states and properties to make scripted components accessible [WCAG 4.1.2]
- Provide sufficient contrast between foreground and background colors. [WCAG 1.4.3 and WCAG 1.4.6]
- Provide alternatives to color for identifying information. [WCAG 1.4.1]
For a detailed list of accessibility features supported by SVG, refer to Appendix D of SVG 2.0
Frequently Asked Questions
- What is the best method for embedding SVGs in HTML?
The best answer is to embed the SVG markup directly in the HTML document, as it exposes the SVG's DOM to assistive technologies. As embedding is not often feasible, the next best option is to use the
objectelement. Some browser and assistive technology pairings have been reported to have issues with this approach (e.g., not exposing the DOM), but it is generally accessible and a fallback can be provided inside the
iframeelement might seem like a better choice, the downside of this element is that if the user agent does not support SVG, there is no effective way to provide a fallback.
imgtag should only be used for SVGs that a user does not need to interact with and that have no dynamic components (scripting or animation).
The language of any text content contained within an SVG image should always be set to ensure that assistive technologies render such content properly.
When attached to the root
svg element, the
xml:lang attribute identifies the
default language of any text content in the image. The
lang attribute should also be specified
in case the SVG is not interpeted by an XML parser.
lang attribute can also be attached to individual components
and text elements within the image to designate that they contain prose in a different language than the
Title and Description
SVG images that are significant to a publication should always include embedded titles
title) and descriptions (
desc) to aid users of assistive
The description provided should be commensurate with the information contained in the image: use
alt-like descriptions for simple images and longer descriptions for complex ones.
If an SVG image is purely decorative, do not include a title or description. The SVG element should
additional be identified as presentational using the ARIA
All significant graphical components within the SVG image should also contain their own title and/or description to improve the overall accessibility of the image.
When including text content in images, use
text elements so that the prose is available to
assistive technologies. When distorting and changing the appearance of text, using
elements ensures the prose can be made available to anyone who cannot decipher the alterations.
title of a component is included as text in an SVG, the
element can be used to reference the prose instead of creating a new
aria-* attributes can be attached to SVG elements. Properly setting and maintaining
roles, properties and states increases the ability of all users to interact with dynamic content (e.g.,
SVG images used as custom controls).
Similarly, ensure that text equivalents for graphical components are updated to reflect the current state of the component.
When scripting SVG images, ensure that device-independent events have been used. Not all users will interact with your images in the same way.
Use ARIA landmark roles to simplify the navigation of complex images.