Accessible Structure

Icon Button Name

Make Symbol Buttons Speak

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
Visuals: captured from real browser rendering
<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>

  1. Create a named button.

    A Search catalog button shell is introduced with its accessible name called out.
    aria-label gives the icon-only button the spoken name Search catalog.

  2. Start a decorative SVG icon.

    A decorative SVG container is added inside the named button.
    aria-hidden keeps the icon markup from becoming a second spoken label.

  3. Draw the visible search mark.

    The button now shows a simple circular search icon.
    The circle is visual help; the accessible name still comes from the button.

  4. Close the decorative SVG.

    The SVG icon is complete inside the named button.
    The hidden SVG supplies the visible symbol without changing the spoken button name.

  5. Finish the icon button.

    A complete icon-only Search catalog button is shown with the spoken name separate from the SVG.
    The final control is compact visually and clear to assistive technology.
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.