Accessibility(a11y)has its place in the SVG DOM. Making your SVG accessible is necessary to give a wider reach to anyone who is checking your website where you have these SVGs. There are simple things to do within the SVG DOM to make it accessible and I'll list them in this post.

Title

The title element is one of the first things to be defined in the SVG DOM. Having a titled SVG gives a name to it and this helps the screen reader know what to read. You can add a title by adding an aria-labelledby attribute to the SVG element itself with the title id as its value. Next within the SVG element, we add a title element as the first element and give it an id that's the same as the aria-labelledby attribute. Within the title element, you can then add a bit of text to describe what the SVG image is about. Also adding a language lang attribute to the title element helps with internationalization(i18n) and if the screen reader is set to a different language then it'll be easier to read.

<svg aria-labelledby="title" viewbox="0 0 500 300">
  <title id="title">
    Home Icon
</title>
</svg>

Role

Adding a role attribute to the SVG element helps to prevent the screen reader from reading every shape or reading unnecessary parts of the SVG.

<svg role="presentation">
   ...
</svg>

---

There is a brilliant article by Heather Migliriosi that takes a deeper dive into SVG a11y where you can get more information about advanced methods of SVG a11y.