Teksten

Tekst is de meest toegankelijke vorm van digitale informatie. Tekst kan namelijk door hulptechnologieën 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.

  • De paginatitel van een webpagina moet het onderwerp of doel van de pagina beschrijven. Een beschrijvende paginatitel maakt het voor iedereen makkelijker om te navigeren door de website. Paginatitels worden getoond in het venster van de browser of in het tabblad van de pagina. Met een goede paginatitel kunnen bezoekers de pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

    Goede paginatitels:

    • beschrijven duidelijk het onderwerp of doel van de pagina.
    • veranderen als een nieuwe pagina wordt ingeladen.
    • hebben de unieke informatie vooraan.
    • zijn uniform met de andere pagina’s.
    • zijn beknopt.
    • zijn uniek.

    Paginatitels worden door hulptechnologieën gebruikt om de webpagina aan te duiden. Deze informatie wordt als eerst gepresenteerd bij het openen van een pagina.

    Gebruik het title-element in het <head>-element in de code van de pagina. Beschrijf in dit element het onderwerp of doel van de pagina.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan de paginatitel vaak per pagina van de website worden ingesteld.

  • De koppen op een webpagina moeten het onderwerp of doel van de onderliggende tekst beschrijven. Zorg dat elke kop iets zegt over de tekst die eronder staat. Een beschrijvende kop maakt het voor iedereen makkelijker om informatie op een pagina te vinden. Alle koppen samen horen een goed beeld te geven van de inhoud van de webpagina. Zo kunnen bezoekers snel de structuur van een webpagina of tekst herkennen.

    Een kop moet altijd onderliggende inhoud hebben.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

  • Door goede beschrijvende koppen te gebruiken kunnen bezoekers snel de structuur in een tekst herkennen. Een koptekst heeft vaak een afwijkende vormgeving, het wordt bijvoorbeeld groter en dikgedrukt weergegeven. Dat maakt het makkelijk om de structuur van de pagina te scannen.

    Structuur die alleen wordt overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

    Zorg dat koppen worden opgemaakt met een HTML kop-element (<h1> t/m <h6>).

    Let op: Teksten die géén kop zijn, mogen niet worden opgemaakt met een HTML kop-element.

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

    • De eerste kop op de pagina hoort een kop van het eerste niveau te zijn.
    • Na een kop van het eerste niveau hoort een kop van het tweede niveau te volgen.
    • Na een kop van het tweede niveau hoort opnieuw een kop van het tweede niveau volgen óf een kop van het derde niveau.
    • Kopniveaus horen niet te worden overgeslagen.
    				
    					
    				
    			

    In een CMS kan een tekst worden geselecteerd en worden 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.

  • Lijsten benadrukken belangrijke punten in een tekst. Een lijst heeft vaak een afwijkende vormgeving, onderdelen van een lijst worden opgemaakt met een opsommingsteken of met een nummer.

    Structuur die alleen wordt overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een lijst navigeren. Schermlezers geven bijvoorbeeld aan hoeveel onderdelen er in de lijst staan en bieden de mogelijkheid om de lijst gelijk over te slaan.

    Zorg dat lijsten worden opgemaakt met een lijst-element. Er zijn verschillende soorten lijsten: een opsomming (<ul>), een genummerde lijst (<ol>) en een lijst met beschrijvingen (<dl>).

    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 lijsten die bestaan uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijsten bijvoorbeeld voor een verklarende woordenlijst. 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:

    				
    					
    				
    			

    In een CMS kan een tekst worden geselecteerd en worden aangegeven dat het een lijst is. Je kunt hierbij vaak kiezen voor een opsomming of een genummerde lijst. Dit maakt de tekst automatisch op met het juiste HTML-element.

    Let op: Een lijst met beschrijvingen wordt vaak nog niet ondersteund.

  • 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.

    Structuur en relaties die alleen worden overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een lijst navigeren. Schermlezers geven bijvoorbeeld aan hoeveel onderdelen er in de lijst staan en bieden de mogelijkheid om de lijst gelijk over te slaan.

    Zorg dat lijsten 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.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Geef de tabel ook een korte beschrijving. Deze beschrijving wordt in de code vastgelegd met een <caption>-element. Een goede beschrijving helpt bezoekers om een tabel te vinden en te begrijpen waar de tabel over gaat.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan (in veel gevallen) een tabel worden ingevoegd. Bepaal het aantal rijen en kolommen en bepaal nauwkeurig wat de tabelkoppen zijn. Dit maakt de tabel automatisch op met de juiste HTML-elementen.

  • Geef links op een webpagina een linktekst waaruit het doel van de link duidelijk is af te leiden. Een beschrijvende linktekst is voor iedereen duidelijker. Zorg dat de linktekst zo is geformuleerd dat bezoekers direct weten waar de link naar verwijst.

    Schrijf dus niet:

    • Lees meer. (onduidelijk)
    • LinkedIn. (onduidelijk)

    Maar zeg wel:

    • Lees meer de over digitale toegankelijkheid.
    • Ga naar onze LinkedIn pagina.

    Tip: Als je verwijst naar een e-mailadres, gebruik dan het volledige e-mailadres als linktekst.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst met alle links gebruiken om over de pagina te navigeren.

    Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Wat ook kan is het verbergen van een deel van de linktekst met CSS:

    				
    					
    				
    			
    				
    					
    				
    			

    Let op: Linkteksten die worden uitgebreid met behulp van CSS of het aria-label-attribuut zijn alleen zichtbaar voor bezoekers die gebruik maken van een schermlezer.

    Een linktekst mag nooit leeg zijn. Zonder linktekst kan natuurlijk niet worden bepaald waar de link naar verwijst. Een lege link is misschien niet zichtbaar op de pagina maar deze links komen wél terug in de focus volgorde. Schermlezers merken deze ook link op.

    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 tekstalternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei hetzelfde linkdoel, 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.

  • Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

    Schrijf dus niet:

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

    Maar zeg wel:

    • Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

    Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

  • Geef de standaard taal van een webpagina aan in de code. Zo kan software de taal van de webpagina bepalen. Als er meerdere talen op een webpagina voorkomen, gebruik dan de taal die het meest voorkomt.

    Voorleessoftware spreekt een webpagina uit. De uitspraak van de woorden is afhankelijk van de taal van de pagina. Als er geen (of een verkeerde) taal wordt aangegeven in de code, dan kan voorleessoftware de content mogelijk verkeerd of onduidelijk voorlezen. De standaardtaal van de browser wordt dan gebruikt en deze komt niet altijd overeen met de taal van de content.

    Voeg het lang-attribuut toe aan <html>-element om de taal van een webpagina in te stellen. Gebruik in dit attribuut de juiste taalcode. Zo’n taalcode bestaat uit een tweeletterige code.

    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"). Bekijk alle taalcodes op IANA Language Subtag Registry (Engelstalig).

    In een CMS kan de taal van een website worden aangegeven in de instellingen.

  • Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

    Voorleessoftware spreekt een webpagina uit. De uitspraak van de woorden is afhankelijk van de taal van de pagina. Als er geen (of een verkeerde) taal wordt aangegeven in de code, dan kan voorleessoftware de content mogelijk verkeerd of onduidelijk voorlezen. De standaardtaal van de browser wordt dan gebruikt en deze komt niet altijd overeen met de taal van de content.

    Voeg het lang-attribuut toe aan de elementen met een andere taal. Geeft dit attribuut een waarde dit bestaat uit een tweeletterige code die staat voor een taal. Het lang-attribuut kan worden gebruikt op blok-niveau (<div>, <p>, <table>, enz.) maar ook op inline-elementen (<span>, <a>, <strong>, enz.).

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    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.

    Bekijk alle taalcodes op IANA Language Subtag Registry (Engelstalig).

    Let op: Niet alle CMS hebben hier ondersteuning voor.

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 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