Accessible icon buttons

Technique 1: Accessible Visually Hidden Text

<button>
   <svg viewBox="0 0 32 32" width="32px" height="32px" 
           aria-hidden="true" focusable="false">
        <!-- svg content -->
    </svg>
    <span class="sr-only">Menu</span>
</button>

/* 
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Technique #2: Accessible Visually Hidden Text with hidden and aria-labelledby

You don’t need to use a CSS utility class to hide the text visually. This technique uses the hidden attribute to hide the button text

<button class="menu-trigger" aria-labelledby="button-label">
    <span id="button-label" hidden>Menu</span>

    <svg aria-hidden="true" focusable="false" width="24" height="28" viewBox="0 0 24 28">
        <!-- svg content -->
    </svg>
</button>

The hidden attribute is a boolean attribute. When specified on an element, it hides that element both visually and from assistive tech. It is the HTML5 markup equivalent of the CSS display: none and visibility: hidden declarations, both of which also hide elements inaccessibly.

But the ARIA specification allows the aria-describedby and aria-labelledby attributes to reference hidden elements.

Technique #3: Using aria-label

<button class="menu-trigger" aria-label="Menu">
    <svg focusable="false" width="24" height="28" viewBox="0 0 24 28">
        <!-- svg content -->
    </svg>
</button>