Een knop. In de HTML staat “Verwijderen.” Maar de CSS voegt via ::after het woord “definitief” toe.
De gebruiker ziet: “Verwijderen definitief.” De toegankelijke naam: “Verwijderen.” Spraakbesturing: “Klik op Verwijderen definitief.” Geen match.
/* Problematisch: CSS voegt zichtbare tekst toe */
.knop-verwijderen::after {
content: " definitief";
}
<!-- De gebruiker ziet "Verwijderen definitief" -->
<!-- De toegankelijke naam is alleen "Verwijderen" -->
<button class="knop-verwijderen">Verwijderen</button>
<!-- Beter: alle tekst in de HTML -->
<button>Verwijderen definitief</button>
Waarom is dit een probleem?
CSS-gegenereerde content (::before en ::after) wordt niet altijd meegenomen in de berekening van de toegankelijke naam. Het gedrag verschilt per browser en schermlezer. Je kunt er niet op vertrouwen.
De vuistregel: tekst die informatie geeft, hoort in de HTML. CSS is voor styling, niet voor content.
Decoratieve tekens via CSS (een pijltje, een bullet) zijn prima. Maar woorden die de betekenis veranderen? Die horen in de HTML.
