Teksten

Tekst is de meest toegankelijke vorm van informatie. Tekst kan door hulptechnologieën namelijk op verschillende manieren worden gepresenteerd. Voorleessoftware kan een tekst bijvoorbeeld omzetten in spraak (auditief) en een brailleleesregel kan het vertalen naar braille (tactiel).

Een duidelijke structuur is belangrijk voor de toegankelijkheid van een tekst. Voor structuur worden elementen gebruikt zoals koppen, tussenkoppen en opsommingen. Deze structuur moet ook goed in de code worden vastgelegd. Daarnaast moet de inhoud begrijpelijk zijn en in een logische volgorde aan bezoekers wordt gepresenteerd. Ook dit moet allemaal op de juiste manier in de code worden aangegeven.

  • Door koppen te gebruiken kunnen bezoekers snel de structuur in een tekst herkennen. Een koptekst wordt vaak groter en dikgedrukt weergegeven. Dat maakt de tekst gemakkelijk om naar een onderdeel te scannen. Bezoekers die blind of slechtziend zijn kunnen dit niet (of niet goed) waarnemen. Voor deze bezoekers is het belangrijk dat de structuur niet alleen met vormgeving wordt overgebracht maar ook in de code wordt vastgelegd. Hulptechnologieën kunnen een lijst van alle koppen maken zodat bezoekers die hier gebruik van maken eenvoudig kunnen navigeren naar de informatie die zij nodig hebben.

    Om dit te realiseren moeten koppen worden opgemaakt met een HTML kop-element (<h1> t/m <h6>). In een CMS kan hiervoor een tekst worden geselecteerd en aangegeven dat het een koptekst is. Je kunt hierbij ook het niveau van de kop aangeven. Dit maakt de tekst automatisch op met het juiste HTML-element.

    Let op: Teksten die geen kop zijn, mogen niet opgemaakt met een HTML kop-element.

    HTML-elementen die de tekst dikgedrukt (<strong>) of schuingedrukt maken (<em>) zijn niet bedoeld voor koppen, maar zijn alleen bedoeld om een tekst nadruk te geven.

    Zorg dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

    • Na een kop van het eerste niveau volgt altijd een kop van het tweede niveau.
    				
    					
    				
    			
    • Na een kop van het tweede niveau kan weer een kop van het tweede niveau volgen óf een kop van het derde niveau.
    				
    					
    				
    			
    • Kopniveau’s horen niet te worden overgeslagen.
    • Lege koppen horen niet aanwezig te zijn.

  • Lijsten benadrukken belangrijke punten in een tekst. Onderdelen van een lijst worden opgemaakt met een opsommingsteken of een nummer. Door de structuur van lijsten goed vast te leggen in de code kunnen bezoekers die gebruik maken van hulptechnologieën de lijst beter begrijpen. Hulptechnologieën geven bijvoorbeeld aan hoeveel items er in een lijst staan en geven de mogelijkheid om een lijst over te slaan.

    Lijsten moeten hiervoor worden opgemaakt met een lijst-element. Er zijn verschillende soorten lijsten: een opsomming (<ul>), een genummerde lijst (<ol>) en een lijst met beschrijvingen (<dl>). Opsommingen en genummerde lijsten kunnen in (vrijwel alle) CMS worden toegevoegd. Selecteer de tekst en kies voor opsomming of genummerde lijst. Dit maakt de lijst automatisch op met het juiste HTML-element. Een lijst met beschrijvingen wordt vaak nog niet ondersteund.

    Opsomming

    Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Genummerde lijst

    Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Lijst met beschrijvingen

    Gebruik een lijst met beschrijvingen bij een lijst die bestaat uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijst bijvoorbeeld voor een verklarende woordenlijst. Niet alle CMS’en zullen dit soort lijst ondersteunen. Binnen een lijst met beschrijvingen wordt het <dt>-element gebruikt om een term aan te geven en wordt het <dd>-element om de beschrijving aan te geven.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

  • Tabellen bestaan uit rijen en kolommen. De gegevens in de rijen en kolommen hebben een onderlinge relatie met elkaar. Voor bezoekers met een visuele beperking is deze relatie niet direct duidelijk. Voor deze bezoekers is het belangrijk dat deze relaties ook in de code wordt vastgelegd.

    Om dit te bereiken moeten tabellen worden opgemaakt met een tabel-element (<table>). In dit element moet ook worden aangegeven wat een tabelkop is en wat de gegevenscellen zijn. De tabelkoppen worden in de code vastgelegd met een <th>-element, gegevenscellen met een <td>-element. De meeste CMS’en bieden ondersteuning voor het invoegen van een tabel in een tekst. Bepaal nauwkeurig wat de tabelkoppen zijn. Dit maakt de tabel automatisch op met de juiste HTML-elementen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Geef de tabel ook een korte beschrijving. Deze beschrijving helpt bezoekers om een tabel te vinden, te begrijpen waar de tabel over gaat en te beslissen of ze de tabel wel willen lezen. Deze beschrijving wordt in de code vastgelegd met een <caption>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

  • Pagina’s en teksten zijn geschreven om op een logische volgorde gelezen te worden. Wij lezen bijvoorbeeld van links naar rechts en we lezen eerst de linkerkolom en dan de rechterkolom. Deze volgorde moet ook worden vastgelegd in de code. Als dit niet is vastgelegd in de code, kan de inhoud lastig zijn om te begrijpen voor bezoekers die gebruik maken van hulptechnologieën.

    Sommige manieren van coderen zorgt dat een logische volgorde visueel wel zichtbaar is maar in de code niet niet juist is vastgelegd.

  • Door een goede paginatitel te gebruiken kunnen bezoekers gemakkelijk een pagina terugvinden. De titel van een pagina wordt getoond in het venster van de browser of in het tabblad van de pagina. Voor bezoekers die gebruik maken van hulptechnologieën is een duidelijke en beschrijvende titel ook belangrijk. Deze informatie wordt aan hen als eerste gepresenteerd bij het openen van een pagina. Met een paginatitel die het onderwerp of doel van de pagina beschrijft, kunnen zij zich snel oriënteren over de inhoud van de pagina.

    Houd een paginatitel altijd nuttig en zo beknopt als mogelijk. Een titel hoort uniek te zijn en te vernieuwen als de URL van de pagina verandert.

    De paginatitel kan vaak per pagina in het CMS ingesteld worden.

    Gebruik het title-element in de <head> in de code om de paginatitel in te stellen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Schrijf een linktekst waaruit het doel van de link duidelijk is af te leiden. Linkteksten die duidelijk beschrijven waar ze naartoe verwijzen kunnen beter worden gebruikt door bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware of een brailleleesregel. Het helpt bezoekers om over de website te navigeren. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van links op de pagina gebruiken.

    Een duidelijke link beschrijft nauwkeurig en zo beknopt mogelijk wat het doel is van de link. Wees daarom voorzichtig met links met de inhoud “klik hier” of “lees meer”. Zonder de omliggende tekst is het niet duidelijk waar de link naar verwijst. Een te lange linktekst is ook niet handig voor bezoekers die gebruik maken van hulptechnologieën.

    In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstueel alternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei dezelfde link, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.

    Een link mag nooit leeg zijn. Een lege link is visueel misschien niet waar te nemen maar hulptechnologieën en toetsenbordnavigatie komen deze link wel tegen.

    Als het niet mogelijk is om een duidelijke linktekst te geven aan een link, dan zijn er nog een paar andere opties:

    • Zorg dat het doel van de link duidelijk wordt uit de direct omringende tekst van de link:
    				
    					
    				
    			
    • Gebruik CSS om een deel van de linktekst te verbergen:
    				
    					
    				
    			
    				
    					
    				
    			
    • Gebruik ARIA-attributen om het doel van de link te beschrijven:
    				
    					
    				
    			

    Als CSS wordt gebruikt om een deel van de linktekst te verbergen of als ARIA-attributen worden gebruikt om het doel van de link te beschrijven dan kunnen alleen bezoekers die gebruik maken van hulptechnologieën de hele linktekst waarnemen.

    Let op: De hele zichtbare tekst moet zijn opgenomen in de toegankelijke naam.

  • Beschrijvende koppen en tussenkoppen zijn belangrijk om een pagina snel te begrijpen. Het helpt bezoekers om zich te oriënteren op de pagina en om snel specifieke inhoud te vinden. Zorg daarom dat elke kop op de pagina de onderliggende tekst goed beschrijft. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren naar de informatie die zij nodig hebben. Zij kunnen eventueelook direct doorspringen naar de volgende kop.

    Alle koppen en tussenkoppen op een pagina horen de structuur van de pagina nauwkeurig weer te geven. Een kop moet altijd onderliggende inhoud hebben. Lees meer over het gebruik van kop-elementen.

  • Bij het schrijven van instructies is het belangrijk om niet te verwijzen naar eigenschappen die alleen met een bepaald zintuig kan worden waargenomen. Dit is niet handig voor bezoekers die geen gebruik kunnen maken van dat zintuig. Bezoekers die blind, slechtziend of kleurenblind zijn kunnen visuele aanwijzingen bijvoorbeeld niet (of niet goed) volgen.

    Gebruik dus niet alleen kleur om informatie over te dragen maar gebruik ook een andere manieren zoals tekst. Daarnaast mag je niet verwijzen naar onderdelen door alleen vorm of locatie te benoemen. Gebruik ook hierbij tekst als aanvullende aanwijzing. Schrijf dus niet:

    • Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
    • Gebruik de ronde knop om je gegevens te verzenden. (vorm)
    • Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

    Maar zeg wel:

    • Gebruik de (groene, ronde) knop (onderaan) met tekst “Verzenden” om je gegevens te verzenden.
  • De taal van de pagina moet in de code worden aangegeven. Door de juiste taal in te stellen, kan voorleessoftware de pagina goed voorlezen. Als er geen taal wordt aangegeven in de code, dan zal voorleessoftware de pagina lezen in de standaardtaal die een bezoeker heeft ingesteld. Dit is niet altijd de juiste taal, daarom is het veiliger om de taal zelf te markeren.

    De standaard taal van de pagina moet vaak 1 keer in het CMS ingesteld worden.

    Als er meerdere talen op een pagina voorkomen, gebruik dan de taal die het meest wordt gebruikt.

    Gebruik het lang-attribuut op het <html>-element om de taal in te stellen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Voor alle talen bestaat een eigen aanduiding. Voor het Nederlands is dat ‘nl‘ (lang="nl"), voor het Engels ‘en‘ (lang="en"), voor het Duits ‘de‘ (lang="de"), etc.

    Bekijk alle taalcodes op: https://www.w3schools.com/tags/ref_country_codes.asp

  • Als tekst op een pagina in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Door de anderstalige tekst te markeren met de juiste HTML-elementen blijft de tekst begrijpelijk voor alle bezoekers. Als er geen taal wordt aangegeven in de code, dan zal voorleessoftware de pagina lezen in de standaardtaal die een bezoeker heeft ingesteld. Dit is niet altijd de juiste taal, daarom is het veiliger om de taal zelf te markeren.

    Er geldt een uitzondering voor eigennamen, technische termen, woorden van een onbepaalde taal, en woorden of uitdrukkingen die deel zijn gaan uitmaken van de volkstaal van de omringende tekst.

    Markeer het onderdeel met anderstalige tekst met het lang-attribuut. Het lang-attribuut kan worden gebruikt op elementen op blok-niveau (<div>, <p>, <table>, enz.) maar ook op inline-elementen (<span>, <a>, <strong>, enz.).

    In de code ziet dat er zo uit:

    				
    					
    				
    			

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.2 Betekenisvolle volgorde
      • 1.3.3 Zintuiglijke eigenschappen
  • Principe 2. Bedienbaar
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.2 Paginatitel
      • 2.4.4 Linkdoel (in context)
      • 2.4.6 Koppen en labels
  • Principe 3. Begrijpelijk
    • Richtlijn 3.1 Leesbaar
      • 3.1.1 Taal van de pagina
      • 3.1.2 Taal van onderdelen