in Design 120 Words

Accessible Icon Buttons

Sara Soueidan:

If your button isn’t supposed to visually contain any text, you can still provide the text inside the <button> so that it’s picked up and used by screen readers, while hiding it visually using CSS.

1
2
3
4
5
6
7

<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>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 
 * 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;
}

0 Comments