TL;DR: Set <title> and <desc> to make SVG’s accessible:

<svg>
  <title>...</title>
  <desc>...</desc>
</svg>

When exporting SVG files with tools like Sketch, you might see something like the following:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 32 32"
>
  <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
  <title>Page 1</title>
  <desc>Created with Sketch.</desc>
  <!-- contents of the SVG image -->
</svg>

However, the autogenerated <title> and <desc> elements aren’t great for accessibility because screen readers rely on the metadata for voice over.

Thus, it’s good practice to make the <title> and <desc> tags more descriptive:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 32 32"
>
  <title>Icon</title>
  <desc>A description of the icon.</desc>
  <!-- contents of the SVG image -->
</svg>

If you’re using the SVG as an icon, you can add role="img" and aria-labelledby attributes:

 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
   viewBox="0 0 32 32"
+  role="img"
+  aria-labelledby="icon-title"
 >
-  <title>Icon</title>
+  <title id="icon-title">Icon</title>
   <desc>A description of the icon.</desc>
   <!-- contents of the SVG image -->
 </svg>