Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.
<!DOCTYPE html> <html lang="en"> <head> <title>Button Demo</title> <link rel="stylesheet" type="text/css" href="css/demo.css"> </head> <body> <main> <button>Help!</button> <button> <span class="visuallyhidden">Help!</span> <i class="icon icon-help" aria-hidden="true"></i> </button> <!-- alternate labeling technique: aria-label --> <button aria-label="Help!"> <i class="icon icon-help" aria-hidden="true"></i> </button> <div class="button" role="button" tabindex="0"> <svg width="32" height="32" viewBox="0 0 32 32" class="icon" aria-labelledby="svgtitle"> <title id="svgtitle">Help!</title> <path d="M14 24h4v-4h-4v4zM16 8c-3 0-6 3-6 6h4c0-1 1-2 2-2s2 1 2 2c0 2-4 2-4 4h4c2-0.688 4-2 4-5s-3-5-6-5zM16 0c-8.844 0-16 7.156-16 16s7.156 16 16 16 16-7.156 16-16-7.156-16-16-16zM16 28c-6.625 0-12-5.375-12-12s5.375-12 12-12 12 5.375 12 12-5.375 12-12 12z"></path> </svg> </div> </main> </body> </html>
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }