docs: Toevoegen tekstalternatief voor svg onder Anatomie

[MarjonBakker]

Er is nog geen goed tekstalternatief voor de figure en de svg.

Voorstel voor Code Block:

<figure class="component-anatomy" style="">
    <!-- ↓ Toevoegen role=img en tekstalternatief -->
    <svg role="img" aria-label="Een vierkant met een lichtgrijze achtergrond, aangeduid met het cijfer 1. In het vierkant staat een stuk HTML ter illustratie, aangeduid met het cijfer 2"></svg>
    <figcaption>
        <!-- ↓ Meer uitleg voor een betere toegankelijke naam voor de figure -->
        Code Block, onderdelen:
        <ol class="utrecht-ordered-list utrecht-ordered-list--html-content">
            <li>Code Block</li>
            <li>Code</li>
        </ol>
    </figcaption>
</figure>

Op basis hiervan kunnen ook tekstalternatieven toegevoegd worden voor de overige componenten.

Er is een PR (#341), maar zie ook discussie op Slack.

[hidde]

Textalternatieven voor de overgebleven candidate component anatomieën zitten in nl-design-system/candidate#361

[MarjonBakker]

Het gebruik van de aanhalingstekens in het aria-label pakt niet goed uit. Bijvoorbeeld bij Link:

aria-label="Een stuk lopende tekst, waarvan de laatste twee woorden blauw zijn en onderstreept. Dat deel is aangeduid met het cijfer 1. De tekst: \u201CDit is een voorbeeld van de link component\u201D."

NVDA leest \u201C en \u201D letterlijk zo voor, zowel in Chrome als in Firefox.

Graag kijken wat hier misgaat en dan nalopen bij alle anatomieën.

[MarjonBakker]

@hidde, ik heb het hier nog over gehad met @rianrietveld en zij vond de tekst in het aria-label te lang. Haar voorstel is om het zo aan te pakken:

<figure>
  <svg aria-label="samenstelling component">[…]</svg>
  <figcaption>
    Een stuk lopende tekst, waarvan de laatste twee woorden [...]
    Onderdelen:
    1. Link
  </figcaption>
<figure>

[MarjonBakker]

Nog een mogelijke uitwerking:

https://codepen.io/marjonfg/pen/YPKpXKM/fa8bde2af9374cfc7b7290729a416dc9

Met:

• <title> en voor de SVG-elementen 1. en 2.
• summary/detail in de figcaption

Voordelen:

• geen role=img en geen lang aria-label voor de SVG
• gebruikmaken van de mogelijkheden van SVG om losse onderdelen een naam te geven
• title voor de korte beschrijving, desc voor de lange beschrijving
• in de figcaption uitklapbare onderdelen voor slechtzienden die geen screenreader gebruiken, en ook als fallback voor vreemde ondersteuning van SVG's door alle diverse browser-screenreadercombinaties

[hidde]

Wmb is wat er precies op de SVG staat een alternatieve tekst die te weinig waarde toevoegt voor wie de afbeelding kan zien. Eens dat die tekst wat lang is als label.

Mijn voorstel zou zijn:

• SVG met role=img en aria label "samenstelling component [naam]" en aria description "langere omschrijving van wat je precies ziet" (zoals huidige label)
  • dit technisch opgelost met aria-labelledby en aria-describedby van <title> en <desc> respectievelijk, zodat het beter wordt opgepikt door AT
• daaronder de figcaption zoals ie nu is, met uitleg per cijfer
• details/summary zoals in Marjons voorbeeld gebruiken voor toelichtingen bij het anatomie-onderdeel, als dat extra uitleg vereist, denk aan de picker knop bij een datepicker