Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Example - reference the SVG in the src of an img

<img src="somesvg.svg">

Suggested - All SVG <img> elements SHOULD be set to role="img".

To ensure the widest range of assistive technologies recognize the SVG as an image, add role="img" to the <img>element.

<img src="somesvg.svg" role="img">

Required - All SVG <img> elements MUST have meaningful, concise alternative text (via alt, aria-label, or aria-labelledby).

...

Good Example: Using alt to provide alternative text.

<img src="somesvg.svg" role="img" alt="a concise description of the image">

Good Example: Using aria-label to provide alternative text.

<img src="somesvg.svg" role="img" aria-label="a concise description of the image">

Good Example: Using aria-labelledby to provide alternative text.

<p id="caption1">This is a caption above an image</p>
<img src="somesvg.svg" role="img" aria-labelledby="caption1">

SVGs as Inline

Benefits of utilizing the <svg> tag:

...