<main>
  <h1 class="sr-only">AccName</h1>
  <section>
    <h2>Tekst og aria-label</h2>
    <div>
      <button class="acc-name">Tilføj til kurv</button>
      <button aria-label="Der snød jeg dig" class="acc-name">Tilføj til kurv</button>
      <button aria-label="Læg i kurv" class="acc-name">🛍️</button>
      <button class="acc-name">🛍️</button>
    </div>
  </section>
  <section>
    <h2>Billeder og SVG</h2>
    <div>
      <button class="acc-name">
        <img src="https://api.iconify.design/solar:accessibility-bold.svg?color=%23888888" alt="Tilgængelighed">
      </button>
      <button class="acc-name">
        <img src="https://api.iconify.design/solar:accessibility-bold.svg?color=%23888888">
      </button>
      <button class="acc-name">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="#888888" d="M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z"/></svg>
      </button>
      <button class="acc-name">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><title>Knappen</title><path fill="#888888" d="M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z"/></svg>
      </button>  
    </div>
  </section>
  <section>
    <h2>Pseudo-elementer</h2>
    <div>
      <button class="acc-name pseudo-1">Tilføj til kurv</button>
      <button class="acc-name pseudo-2">Tilføj til kurv</button>
      <a href="#" class="acc-name pseudo-3">Betingelser</a>
    </div>
  </section>
</main>
Preview

Navnekilder

<button aria-label="Læg i kurv">🛍️</button>
<button><img src="ikon.svg" alt="Tilgængelighed"></button>
<button><svg><title>Fortsæt</title></svg></button>

AccName

Tekst og aria-label

Billeder og SVG

Pseudo-elementer

Betingelser