Icon Button Name

An icon-only search button gets a clear accessible name while the decorative SVG stays out of the spoken label.

Program

Icon buttons need a text name even when the visible control is only a symbol. The name belongs on the button; the SVG is decoration.

icon_button_name.html

<button type="button" aria-label="Search catalog">
  <svg aria-hidden="true" viewBox="0 0 20 20">
    <circle cx="8" cy="8" r="5"></circle>
  </svg>
</button>

accessible name The accessible name is the text assistive technology announces for a control.

aria-hidden aria-hidden keeps decorative markup out of the accessibility tree.