Here’s my archetype for an accessible SVG icon.

<svg viewBox="0 0 16 16" role="img" aria-labelledby="title desc">
  <title id="title">Star Icon</title>
  <desc id="desc">Image of a star indicating "favorite."</desc>
  <path role="presentation" fill="#000" d="..."></path>
</svg>

Here are the bits.

title

The title tag is the alt attribute of an svg. These examples are conceptually identical:

<img src="..." alt="Star Icon" />

<svg>
  <title>Star Icon</title>
  ...
</svg>

desc

The desc tag is an extension of the title. If you’re wordy, be wordy here. If the title is clear, don’t feel the need to repeat yourself.

<svg>
  <title>Star Icon</title>
  <desc>Image of a star indicating "favorite."</desc>
  ...
</svg>

aria-labelledby

You’ll need to smooth over some of the quirks of assisted devices. aria-labelledby is an attribute on your root SVG element that points devices to your accessible text and description.

<svg aria-labelledby="title desc">
  <title id="title">Star Icon</title>
  <desc id="desc">Image of a star indicating "favorite."</desc>
  ...
</svg>

Note that the aria-labelledby attribute uses ids to identify content, not the elements.

role

roles help assisted devices identify the SVG as an image. Use role="img" on the root SVG element and role="presentation" on the path.

<svg role="img" aria-labelledby="title desc">
  <title id="title">Star Icon</title>
  <desc id="desc">Image of a star indicating "favorite."</desc>
  <path role="presentation" fill="#000" d="..."></path>
</svg>

Using ARIA to enhance SVG accessibility is the best article I’ve foundon this topic. It’s more technical. The author dives deep into each attribute and triggers specific browser support.