Teksten

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:

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:

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

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

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:

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 tabel navigeren. Schermlezers geven bijvoorbeeld aan hoeveel rijen en kolommen in een tabel staan.

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

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:

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:

Maar zeg wel:

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:

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:

Maar zeg wel:

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

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