Accessibility

This guide explains how to make inline SVGs accessible with titles, descriptions, and ARIA attributes.

Features

The package automatically enhances SVGs for accessibility:

  • Adds proper ARIA attributes
  • Supports adding title and description elements
  • Sets appropriate ARIA roles

Example

Example with accessibility features:

{{< inline-svg
  src="check"
  title="Success"
  desc="Operation completed successfully"
  role="img"
>}}
Preview
SuccessOperation completed successfully

Rendered HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-labelledby="title-svg-check"
  aria-describedby="desc-svg-check"
  class="check svg-inline"
  desc="Operation completed successfully"
  id="svg-check"
  role="img"
>
  <title id="title-svg-check">Success</title>
  <desc id="desc-svg-check">Operation completed successfully</desc>
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M5 12l5 5l10 -10"></path>
</svg>