Accessible Publishing Knowledge Base

Titles and Descriptions

Summary

...

Techniques

SVG images that are significant to the publication should always include embedded titles (title) and descriptions (desc) to aid users using assistive technologies.

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 role attribute.

All significant graphical components within the SVG image should contain their own title and/or description to improve the overall accessibility of the image.

Examples

Example 1 — Including an SVG title and description
<svg
	 xmlns="http://www.w3.org/2000/svg"
	 xml:lang="en">
   <title>The New EPUB Logo</title>
   <desc>
	  The EPUB logo is a lower-case letter E that has 
	  been tilted 45 degrees to counter-clockwise so 
	  that it appears to be sitting in balance on its 
	  lower-left corner. The E is drawn as a single, 
	  unclosed line of green starting at the centre 
	  of the image, moving to the outer edge and then 
	  continuing around in a box-like pattern. The
	  external corners have all been rounded.
   </desc>
   …
</svg>
Example 2 — A decorative SVG
<svg
	 xmlns="http://www.w3.org/2000/svg"
	 xml:lang="en"
	 role="presentation">
   …
</svg>

See also Example 2.2 in the Accessibility Features of SVG W3C Note for an example showing component titles and descriptions.

References