SVG Structure and Transforms

Decorative Icon Button

A button uses visible text for its name while a small SVG arrow is hidden as decoration.

Program

Not every SVG needs its own accessible name. When an icon only decorates nearby text, hide the SVG and let the text name the control.

decorative_icon_button.html
Visuals: captured from real browser rendering
<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="24" height="24">
    <path d="M5 12h12" stroke="currentColor" stroke-width="2"/>
    <path d="M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  <span>Next step</span>
</button>

  1. Create the button control.

    A button shell is ready for an icon and text label.
    The button is the interactive control.

  2. Hide the decorative SVG from announcements.

    The SVG icon is marked aria-hidden because the text will name the button.
    aria-hidden prevents the icon from being announced separately.

  3. Keep the SVG out of focus order.

    The decorative SVG is not a keyboard focus target.
    focusable false keeps focus on the button, not the icon.

  4. Draw the arrow shape.

    A simple arrow path appears before the button text.
    The arrow is visible, but it remains decorative.

  5. Name the button with visible text.

    The button has a visible Next step label after the arrow icon.
    The text, not the hidden SVG, names the button.
decorative SVG aria-hidden="true" keeps decorative SVG from being announced as a separate graphic.
visible label The button text gives the control its accessible name.