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 kan dan technisch opgelost met aria-labelledby en aria-describedby van <title> en <desc> respectievelijk, zodat het beter wordt opgepikt door AT
  • dit neemt Rian's suggestie voor korter label mee, met haar aanvankelijke tekstsuggestie, en zorgt ook dat screenreadergebruikers bij de langere omschrijving kunnen komen
• daaronder de figcaption zoals ie nu is, met uitleg per cijfer
  • zou dus blijven zoals het nu is
• 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
  • mijn aanname is dat dit voor de huidige candidate componenten niet nodig zou zijn, omdat die toelichting daar nog bij geen component vereist is

[MarjonBakker]

@hidde ik vind het prima, laat even weten wanneer ik iets kan zien?

[hidde]

Besproken met Jeff en Roos: met in het achterhoofd hoe de anatomiesectie bedacht is (eenvoudig de onderdelen aanwijzen), en de verwachting dat zo'n extra toelichting in veel gevallen niet op elk item staat (waardoor bij gebruik van een uitklapper soms wel, soms niet een uitklapchevron nodig zou zijn) kunnen de extra info / toelichtingen het beste volledig uitgeschreven worden en zichtbaar zijn.

Ik zorg daarom in #1851 dat de omschrijving evt over meerdere regels kan.