CSS generated content

Bart Simons op 26/09/2014 - 2 reacties

CSS voor vormgeving, HTML voor inhoud, was altijd de mantra van goed webdesign en ook goed voor toegankelijkheid. Toch voegen we ook soms via CSS betekenisvolle inhoud toe aan een webpagina. Die kan je niet altijd toegankelijk maken dus de beste vuistregel blijft om CSS enkel voor layout te gebruiken en alle inhoud in de markup te plaatsen of desnoods via Javascript aan het DOM toe te voegen.

Afbeeldingen via CSS

De AnySurfer checklist bevat een ijkpunt over achtergrondafbeeldingen die informatie bevatten. Het eenvoudigst is om geen informatie in achtergrondafbeeldingen te stoppen, maar vaak gebeurt dit toch (sprites e.d.):

<a class="twitter" href="https://twitter.com/anysurfer"></a>
a.twitter:after { 
    content:url('icon_twitter.png'); 
}

De informatie in de achtergrondafbeelding gaat echter verloren voor screenreadergebruikers en er is geen manier om een alt-tekst toe te voegen aan achtergrondafbeeldingen. Wat overblijft is een lege, betekenisloze link. Daarom moet u vervangende tekst toevoegen.

<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;
}

Merk op dat we de afbeelding hebben ingevoegd met een :after pseudo-element. Als we zouden kiezen voor background url dan gaat de achtergrondafbeelding verloren als mensen een specifieke achtergrond instellen in hun browser of de hoog contrast versie van het besturingssysteem gebruiken. De afbeelding valt dan weg en de vervangende tekst die we hebben toegevoegd voor screenreaders komt daarbij niet tevoorschijn. De afbeeldingen die zijn ingevoegd met :before en :after blijven beschikbaar als de pagina met hoog contrast wordt bekeken.

Tekst via CSS

Met de CSS :before en :after pseudo-elementen kan je niet enkel afbeeldingen maar ook tekst toevoegen aan een webpagina. Hier geldt hetzelfde als voor de achtergrondafbeeldingen: prima voor decoratieve elementen zoals scheidingsstreepjes in een horizontaal menu maar gebruik het niet om tekst of andere informatie toe te voegen zoals in dit voorbeeld (tekst ingevoegd via :after).

De via CSS toegevoegde inhoud wordt geen deel van het DOM en is daarom niet beschikbaar voor screenreaders. Uit onze tests blijkt dat bijna alle browsers het wel doorgeven maar Internet Explorer doet het niet. Als we zouden vragen om net als bij achtergrondafbeeldingen verborgen tekst toe te voegen, dan zou dit het probleem oplossen voor Internet Explorer, maar het zou in alle andere browsers betekenen dat de screenreader dubbele informatie leest.

Daarom is het beter de inhoud in de HTML-pagina te zetten en niet in de CSS. Een andere mogelijkheid is de informatie via jQuery toe te voegen. In dit voorbeeld (tekst toegevoegd via jQuery) voegen we een PDF-melding toe aan alle links naar PDF-bestanden zonder iets te wijzigen aan de markup.

<script>
	$('a[href$=".pdf"]').each(function(){
	    $(this).append(' (PDF)');
	});
</script>

Icon fonts

Icon fonts zijn een ingewikkelder geval: een karakter wordt ingevoegd (meestal via de CSS :before en :after pseudo-elementen zoals hierboven) maar de visuele betekenis wijkt vaak af van wat een screenreader normaal zou uitspreken voor dat karakter. U moet dus:

  • vervangende tekst voorzien zoals voor een achtergrondafbeelding,
  • er tegelijk voor zorgen dat het karakter zelf niet wordt voorgelezen. Dit kan op twee manieren:
    • Kies unicode karakters uit de private use area. Screenreaders hebben geen uitspraakregels voor deze karakters.
    • Als u leesbare karakters gebruikt, verberg ze dan voor screenreaders.

Technieken hiervoor tonen we in uitgewerkte voorbeelden van toegankelijke icon fonts.

Conclusie

Karl Groves vat het met deze titel helemaal samen: CSS generated content is not content: als iets informatie is, voeg het dan niet in via CSS. Als iets decoratief is, voeg het dan in via CSS.

Reacties

Bart Simons schreef 2 jaar geleden

De testresultaten van David MacDonald bevestigen dat enkel Internet Explorer de inhoud van de :before en :after pseudo-classes niet doorgeeft aan screenreaders.

Bart Simons schreef 2 jaar geleden

Het recente artikel van Léonie Watson komt tot dezelfde conclusie als wij hierboven: "use CSS generated content to change or supplement the design, but not to create or alter important content on the page."

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>