docs: Toevoegen tekstalternatief voor svg in uitklapbare secties (accordion)

[MarjonBakker]

WCAG-fout onder 1.1.1 Niet-tekstuele content. Het icoon dat duidelijk maakt wat je met de button kan doen heeft geen tekstalternatief.

Bijvoorbeeld op pagina's:

• https://www.nldesignsystem.nl/componenten/ bij 'Filter componenten'
• https://www.nldesignsystem.nl/button/ onder het kopje 'Acceptatiecriteria'. De criteria staan in uitklapbare secties.

Oplossing:

• Voeg title-element toe aan svg met een tekst die duidelijk maakt wat het icoon betekent, dus bijvoorbeeld 'sectie
  uitklappen' als de sectie is ingeklapt. En 'sectie inklappen' als de sectie is uitgeklapt.
• Voeg een id toe aan dit title-element
• Voeg een id toe aan aan de span met de tekst van de kop
• Voeg aria-labelledby toe aan de button in de h2 met daarin eerst de id van de tekst van de kop, daarna het id van de title van de svg. Zodoende komt in de toegankelijke naam eerst de tekst van de kop, daarna de functie van de button.
• Haal de svg uit de accessibility tree door aria-hidden="true" toe te voegen. De afbeelding is door bovenstaande stappen decoratief geworden en kan worden verborgen voor hulpapparatuur.

Voorbeeldcode:

<h2 class="utrecht-accordion__header">
    <button class="utrecht-button utrecht-button--subtle utrecht-accordion__button" type="button" aria-expanded="true"
        aria-controls="utrecht-accordion:ri:-panel" id="utrecht-accordion:ri:-button" aria-labelledby="label-button title-svg-button">
        <span class="utrecht-accordion__button-icon">
            <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" aria-hidden="true">
                <title id="title-svg-button">, sectie uitklappen</title>
            </svg>
        </span>
        <span class="utrecht-accordion__button-label">
            <span id="label-button">Toegankelijkheid algemeen</span>
        </span>
    </button>
</h2>