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;
}
|
Thank you!
I appreciate your response on my blog.
It may take a while for your comment to display because I moderate comments to filter out spam and other forms of abuse. Thanks for understanding!