Skip to content

Latest commit

 

History

History
59 lines (50 loc) · 1.16 KB

icon-link.md

File metadata and controls

59 lines (50 loc) · 1.16 KB

Icon link/button

Icon only link

<a
  href="https://twitter.com/misteroom"
  title="Follow me on Twitter"
  aria-label="Follow me on Twitter"
>
  <svg
    aria-hidden="true"
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 16 16"
  >
    …
  </svg>
</a>

Icon only button

<button type="button" aria-label="Follow me on Twitter">
  <svg
    aria-hidden="true"
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 16 16"
  >
    …
  </svg>
</button>

Alternative solution

<button type="button">
  <span class="sr-only">Follow me on Twitter</span>
  <svg
    aria-hidden="true"
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 16 16"
  >
    …
  </svg>
</button>

.sr-only is a CSS class to make the element visible only for screen readers.