Geef elk herhaald symbool een eigen buitenste SVG met een toegankelijke naam en hergebruik alleen de tekening erin. Deze gids laat zien hoe je op een Mac een kleine lijst met gelabelde afbeeldingen maakt en de paginalay-out, SVG-coördinaten en toegankelijke naamgeving gescheiden houdt.

Voor een eenvoudige afbeelding raadt MDN aan om role="img" en een label op de buitenste SVG te plaatsen, zodat hulptechnologie deze als één afbeelding kan behandelen. Het praktische patroon hier is één wrapper per instantie, elk verwijzend naar een eigen label. ARIA: img-rol

Waar moet het toegankelijke label van elke instantie staan?

Plaats de naam op het element dat die specifieke instantie vertegenwoordigt. Wanneer meerdere afzonderlijke afbeeldingen één symbool hergebruiken, geef je elke buitenste svg een eigen verwijzing naar aria-labelledby of aria-label. Houd het gedeelde symbool gericht op herbruikbare geometrie.

Dit volgt het onderscheid tussen een definitie en de gerenderde instanties ervan. Het SVG-element use verwijst naar afbeeldingen en rendert hergebruikte inhoud via een shadow tree; die gegenereerde vormen zijn geen gewone onderliggende knooppunten in de DOM van de pagina. Door een tekening te hergebruiken, ontstaan dus geen afzonderlijk bewerkbare kopieën van het interne label in je HTML. Documentstructuur — SVG 2

Een titel in het gedeelde symbool kan ook geen verschillende tekst voor verschillende instanties leveren zonder een ander naamgevingsmechanisme. Dezelfde neutrale tegeltekening kan bijvoorbeeld op de ene plek Voorbeeld Alfa voorstellen en op een andere plek Voorbeeld Beta. Die namen horen bij de twee instanties, ook al is hun geometrie identiek.

Kies de naamgevingsmethode op basis van waar de bruikbare tekst al staat:

Situatie Aanbevolen patroon
Een beknopt zichtbaar bijschrift benoemt de afbeelding Verwijs met aria-labelledby op de buitenste SVG naar de unieke ID ervan.
De afbeelding heeft een naam nodig, maar geen zichtbaar bijschrift Plaats een unieke title in elke buitenste SVG en verwijs ernaar met aria-labelledby, of gebruik aria-label.
De afbeelding versiert alleen tekst die al alle informatie bevat Verberg de SVG voor hulptechnologie in plaats van een overbodige naam toe te voegen.
Meerdere instanties moeten afzonderlijk vindbaar blijven Vermijd ze allemaal te groeperen in één buitenste role="img"-afbeelding.

MDN raadt aan naar zichtbare tekst te verwijzen wanneer die de SVG een naam kan geven. De documentatie over de afbeeldingsrol legt ook uit dat role="img" de inhoud als één geheel presenteert. Daarom is de grens van de wrapper van belang. Het SVG-element voor toegankelijke namen, ARIA: img-rol

Bouw een complete pagina met twee afzonderlijk benoemde instanties

Het volgende voorbeeld is een volledig HTML-document met alleen synthetische tekst en een eenvoudige tekening van een cirkel en een vierkant. Het heeft geen JavaScript, externe sprite, bibliotheek of buildproces nodig. Sla het op je Mac vanuit een plattetekstcode-editor op als symbol-labels.html en open het bestand vervolgens in een desktopbrowser.

Beide instanties verwijzen naar tile-mark, maar hun buitenste SVG's verwijzen naar verschillende zichtbare bijschriften. Dit gebruikt het patroon voor naamgeving met zichtbare tekst dat MDN documenteert. Het attribuut href is het huidige mechanisme voor SVG-verwijzingen; MDN documenteert xlink:href als verouderd. Het SVG-element voor toegankelijke namen, SVG use-element

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Independently labeled SVG instances</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #222;
    }
    .sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 36rem;
      padding: 0;
      list-style: none;
    }
    .sample {
      padding: 1rem;
      border: 1px solid #777;
    }
    .sample svg {
      display: block;
      width: 5rem;
      height: 5rem;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 30rem) {
      .samples { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <svg class="sprite" xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true">
    <defs>
      <symbol id="tile-mark" viewBox="0 0 48 48">
        <rect x="4" y="4" width="40" height="40" rx="6"
              fill="none" stroke="currentColor" stroke-width="2" />
        <circle cx="24" cy="24" r="9" fill="currentColor" />
      </symbol>
    </defs>
  </svg>

  <h1>Sample tiles</h1>
  <ul class="samples">
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-alpha-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-alpha-label">Sample Alpha</span>
    </li>
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-beta-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-beta-label">Sample Beta</span>
    </li>
  </ul>
</body>
</html>

De beoogde toegankelijke namen zijn Voorbeeld Alfa en Voorbeeld Beta. Dit zijn verwachte resultaten op basis van de markup, geen gerapporteerde testresultaten van browsers. De tekening in elke wrapper is expliciet verborgen voor hulptechnologie; de benoemde buitenste SVG blijft beschikbaar. De toegankelijkheidskoppelingen voor SVG maken onderscheid tussen verborgen onderliggende elementen en hun zichtbare bovenliggende element. SVG Accessibility API Mappings

Wanneer je een derde instantie toevoegt, hergebruik je href="#tile-mark", maak je een nieuwe bijschrift-ID aan en pas je aria-labelledby van die instantie aan zodat die overeenkomt. Houd de symboolverwijzing gedeeld en de labelverwijzing specifiek voor de instantie.

Zichtbare bijschriften kunnen tijdens het gebruik van een schermlezer ook afzonderlijk worden tegengekomen. Als de tegel geen informatie toevoegt naast het bijschrift, gebruik dan het decoratieve patroon: verwijder role="img" en aria-labelledby van de buitenste SVG en geef deze vervolgens aria-hidden="true". Behoud het zichtbare bijschrift. De SVG-koppelingen documenteren uitsluiting via aria-hidden. SVG Accessibility API Mappings

Welk browsermechanisme bepaalt elk deel van de lay-out?

In dit voorbeeld zijn er drie afzonderlijke taken: de kaarten ordenen, het symbool tekenen en toegankelijke namen berekenen. Het wijzigen van één taak voert de andere niet automatisch uit.

CSS Grid ordent de HTML-lijstitems. Met de declaratie display: grid worden de directe kinderen van de container grid-items; grid-template-columns bepaalt de kolommen. Hier verandert de mediaquery de lijst van twee kolommen naar één. Dit beïnvloedt de paginalay-out van de kaarten. Basisconcepten van gridlay-out

SVG-coördinaten bepalen de vormen binnen elke afbeelding. De viewBox="0 0 48 48" van het symbool stelt de coördinatenrechthoek vast, en de afmetingen van het element use bepalen de grootte van de viewport van het symbool waarnaar wordt verwezen. Die afmetingen maken geen HTML-kaartkolommen of ruimte tussen bijschriften. SVG 2 maakt expliciet onderscheid tussen de lay-out van hergebruikte afbeeldingen en de CSS-boxlay-out. Documentstructuur — SVG 2

Toegankelijke naamgeving koppelt elke buitenste SVG via aria-labelledby aan tekst. Dit tekent geen tekst, plaatst geen bijschrift en schaalt geen afbeelding. De naamgevingsrichtlijnen van W3C beschrijven dit attribuut als een verwijzing naar inhoud die wordt gebruikt om de toegankelijke naam te berekenen. Toegankelijke namen en beschrijvingen bieden

Deze scheiding geeft je een handige diagnostische regel: controleer Grid wanneer kaarten verkeerd staan, SVG-coördinaten wanneer tekeningen verkeerd staan en naamgevingsverwijzingen wanneer labels niet kloppen. Door x of y toe te voegen aan use, verschuiven hergebruikte afbeeldingen binnen de SVG-ruimte; het verplaatst het HTML-bijschrift niet. Ook zijn de afmetingen van use geen algemene vervanging voor het schalen van willekeurige vormen waarnaar wordt verwezen: MDN documenteert hun effect wanneer wordt verwezen naar een SVG of symbool met een viewBox. SVG use-element

Wat als er geen zichtbaar bijschrift is?

Gebruik een titel per instantie wanneer de afbeelding een naam nodig heeft, maar het ontwerp geen geschikte zichtbare tekst bevat. Het volgende is een vervangend fragment voor de eerste zichtbare SVG in het volledige voorbeeld. Het is nog steeds afhankelijk van het bestaande symbool tile-mark:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48" role="img"
     aria-labelledby="sample-alpha-title">
  <title id="sample-alpha-title">Sample Alpha</title>
  <use href="#tile-mark" width="48" height="48"
       aria-hidden="true" />
</svg>

Geef de titel bij elke extra instantie een andere ID en pas de verwijzing van het bovenliggende element aan. MDN documenteert title als een SVG-element voor toegankelijke naamgeving en raadt aan het voor compatibiliteit met SVG 1.1 als eerste te plaatsen. Titeltekst wordt niet zichtbaar als onderdeel van de tekening weergegeven, hoewel browsers die meestal als tooltip tonen. Het SVG-element voor toegankelijke namen

Vervang voor een korte naam zonder title-element aria-labelledby door aria-label="Sample Alpha" op de buitenste SVG van die instantie. Laat geen concurrerende naamgevingsattributen staan: W3C documenteert dat aria-labelledby voorrang heeft op aria-label. Een achtergebleven verwijzing kan er dus voor zorgen dat je nieuwe tekenreeks niet de naam wordt. Toegankelijke namen en beschrijvingen bieden

Probeer niet een instantiespecifieke titel toe te wijzen door een gegenereerde kloon te bewerken. SVG 2 specificeert een alleen-lezen shadow tree voor instanties. Ook beperkt het huidige concept van SVG Accessibility API Mappings de overeenkomst van ARIA-ID-verwijzingen met use-shadow trees. Dit zijn gedocumenteerde grenzen; ze bewijzen niet dat elke browser zich identiek gedraagt. Door het label op de geschreven wrapper te houden, voorkom je dat je afhankelijk bent van het opzoeken van een kloon. Documentstructuur — SVG 2, SVG Accessibility API Mappings

Hoe controleer je het resultaat en spoor je problemen op?

Controleer de zichtbare weergave en de toegankelijke namen afzonderlijk in de browser op je Mac. Bekijk elke buitenste SVG in de toegankelijkheidstools van de browser en controleer deze vervolgens met VoiceOver. W3C raadt specifiek aan om met hulptechnologie te testen wanneer namen via aria-labelledby worden berekend. Toegankelijke namen en beschrijvingen bieden

Gebruik deze verwachte resultaten als een korte acceptatiechecklist:

  1. Beide tekeningen zijn zichtbaar, met hun respectieve zichtbare bijschriften.
  2. Elke buitenste SVG heeft een afbeeldingsrol en de bijbehorende naam.
  3. De symbooldefinitie verschijnt niet als een extra betekenisvolle afbeelding.
  4. Als je het venster smaller maakt, verandert de schikking van de kaarten, terwijl elke afbeelding zijn label behoudt.
  5. Als je alleen het tweede bijschrift wijzigt, verandert alleen de berekende naam van de tweede afbeelding.

Als beide afbeeldingen dezelfde naam krijgen, vergelijk dan eerst hun waarden van aria-labelledby. Controleer vervolgens of elke ID waarnaar wordt verwezen de bedoelde tekst aanduidt. Ga er niet van uit dat visuele nabijheid de relatie vastlegt: het attribuut verwijst expliciet naar een element via de ID. Toegankelijke namen en beschrijvingen bieden

Als de volledige tekening als één afbeelding wordt aangekondigd terwijl je meerdere onafhankelijke afbeeldingen nodig hebt, controleer dan waar role="img" staat. Met één afbeeldingsrol rond de hele verzameling vraag je hulptechnologie die verzameling als één geheel te behandelen. Houd afzonderlijke image-wrappers aan voor afzonderlijke eenvoudige afbeeldingen. ARIA: img-rol

Als je in werkelijkheid een SVG-bestand insluit via HTML img, gebruik dan voor elke instantie het attribuut alt van dat element. Volgens WHATWG is alt de gelijkwaardige terugvalinhoud voor de afbeelding. Inline-SVG gebruikt andere naamgevingsmechanismen en ondersteunt alt niet als attribuut voor alternatieve tekst. HTML Standard: Het img-element, Inleiding tot SVG in HTML

Houd voor deze lay-outtaak één gedeelde tekeningdefinitie en één naamgevingskeuze per instantie aan. Kies de wrapper op basis van wat de lezer moet tegenkomen, koppel deze aan de juiste tekst en controleer de resulterende toegankelijke naam onafhankelijk van de visuele lay-out.

Bronnen