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

<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>

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.