Visually hidden text

Recipe 4.2 Label buttons clearly

Sample:

Code:

<button type="button">
  <span class="visually-hidden">Save</span>
  <img src="/images/demos/download.svg" alt="" width="26">
</button>

<button type="button">
  <svg viewBox="0 0 39 44" aria-labelledby="title" role="img" width="26">
    <title id="title">Download</title>
    <path d="M19.5 36.5 1.6 26.1v-3.6l16.3 9.4V1.5h3.2v30.4l16.3-9.4v3.6z"/>
    <path d="M1 41.5h37" style="stroke:#000;stroke-width:3;"/>
  </svg>
</button>

<style>
   .visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
</style>