CSS generated content

Via CSS kan je tekst, afbeeldingen en icon fonts toevoegen aan een webpagina. Waarmee moet je rekening houden voor toegankelijkheid?

Tekst via CSS

Met de CSS :before en :after pseudo-elementen kan je tekst toevoegen aan een webpagina. Deze tekst komt in de accessibility tree terecht en wordt dus voorgelezen door bijvoorbeeld screenreaders. Bekijk dit voorbeeld met tekst ingevoegd via :after. Hier moet je dus niets extra doen voor toegankelijkheid.

Afbeeldingen via CSS

Technieken

Er zijn twee technieken om afbeeldingen via CSS in te voegen:

• Via background url: dit raden we af want dan gaat de afbeelding verloren als mensen een specifieke achtergrond instellen in hun browser of de hoog contrast versie van het besturingssysteem gebruiken.
• Met een :before of :after pseudo-element: deze afbeeldingen blijven beschikbaar als iemand de pagina met hoog contrast bekijkt.

Voorbeeld

<a class="twitter" href="https://twitter.com/anysurfer"></a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Dit is een link zonder tekst; hij bevat enkel een Twitter icoon. Afbeeldingen die je via CSS invoegt, komen niet in de accessibility tree. Deze link heeft dus geen betekenis voor gebruikers van hulpmiddelen.

Tekstalternatief

Afbeeldingen die je via CSS invoegt, kan je geen alt-attribuut geven.

• Als de afbeelding louter decoratief is, is dat geen probleem.
• Als de afbeelding informatie bevat, moeten we een andere techniek toepassen om die afbeelding een tekstalternatief te geven.

In het voorbeeld is het Twitter-icoon niet decoratief want het is de enige inhoud die de link betekenis geeft. Er zijn meerdere technieken om het Twitter icoon een tekstalternatief te geven:

Verborgen tekst

Je kan binnen de link vervangende tekst toevoegen die niet zichtbaar is op het scherm maar wel beschikbaar is voor screenreaders en andere hulpmiddelen:

<a class="twitter" href="https://twitter.com/anysurfer">
<span class="visuallyhidden">Twitter</span>
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
}

Meer over deze techniek in het artikel over verborgen tekst.

Met een aria-label

Je kan een aria-label toevoegen aan de link:

<a class="twitter" 
aria-label="Twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Deze techniek is niet altijd bruikbaar: je mag een aria-label enkel toevoegen aan een element dat een rol heeft en nog geen accessible name heeft. In dit voorbeeld zorgt het a-element voor een rol link. De link bevat zelf geen tekst dus er is geen risico dat het aria-label inhoud overschrijft. Meer details over deze techniek in het artikel over aria-label.

Icon fonts

Bij icon fonts voeg je een karakter toe (meestal via de CSS :before en :after pseudo-elementen) maar de visuele betekenis wijkt vaak af van wat een screenreader normaal zou uitspreken voor dat karakter. Je moet dus meerdere dingen doen om icon fonts toegankelijk te maken:

• Tekst die je via CSS invoegt (dus ook icon fonts) komen in de accessibility tree. Omdat we het karakter niet gebruiken voor zijn letterlijke betekenis, moeten we het verwijderen uit de accessibility tree: verberg het met aria-hidden="true". Om dat te kunnen doen, moet je het karakter toevoegen via een span binnen het element en niet op het element zelf.
• Als het karakter decoratief is, hoef je verder niets te doen.
• Als het karakter wel een betekenis heeft, voeg dan vervangende tekst toe zoals hierboven bij afbeeldingen die je via CSS invoegt.

<span class="phone" aria-hidden="true"></span>
<span class="visuallyhidden">Telefoonnummer</span>

uitgewerkte voorbeelden van toegankelijke icon fonts.

Samenvatting

• Via CSS ingevoegde tekst: geen probleem
• Via CSS ingevoegde decoratieve afbeelding: niet via background-url
• Via CSS ingevoegde betekenisvolle afbeelding: niet via background-url + voeg verborgen tekst of aria-label toe
• Decoratief icon font: voeg het toe via eigen span, verberg die met aria-hidden="true"
• Betekenisvol icon font: voeg het toe via eigen span, verberg die met aria-hidden="true" + voeg verborgen tekst of aria-label toe