Accessible Vector Graphics: Best Practices for Screen Readers & Web Standards

SVGs contain code vectors that are crawled by search engines and read by assistive screen readers. Ensuring accessibility is key to meet modern standards.

1. Title and Description tags

Just like `alt` parameters on image tags, SVGs support nested description elements:

• <title>: Provides a short name for the vector. Displays as a tooltip on hover.
• <desc>: Provides a long form explanation of the vectors contents.

2. Vector Code Example: Accessible XML

<svg viewBox="0 0 100 100" role="img" aria-labelledby="svgTitle svgDesc" xmlns="http://www.w3.org/2000/svg">
  <title id="svgTitle">Settings Gear Icon</title>
  <desc id="svgDesc">An outline of a settings gear with 8 teeth and a central circle aperture.</desc>
  <circle cx="50" cy="50" r="30" stroke="#475569" stroke-width="3" fill="none" />
</svg>