Making SVG Accessible

We've started to switch from icon fonts to SVG, which is fantastic.

Unfortunately most of our SVGs don't seem to be accessible.

According to https://css-tricks.com/accessible-svgs/#article-header-id-6,

To ensure the AT can access the <title> and <desc>:

• Add the appropriate ID’s to the <title> and <desc>:
  • <title id="uniqueTitleID">The title of the SVG</title>
  • <desc id="uniqueDescID">A longer, more complete description for complex graphics.</desc>
• On the <svg> tag, add:
  • aria-labelledby="uniqueTitleID uniqueDescID" (use the title and desc ID’s) - both title and description are included in aria-labelledby because it has better screen-reader support than aria-describedby (see tip #4 (closed))
  • role="img" (so that the SVG is not traversed by browsers that map the SVG to the group role)

Can we consider making our SVGs more accessible by following the steps above?