De meeste teksten hebben een structuur: ze bestaan uit koppen, tussenkopjes, paragrafen, opsommingen, aanhalingstekens of gemarkeerde woorden of groepen van woorden. Bezoekers die de webpagina kunnen zien, weten direct waar de koppen staan, waar de opsommingen staan en wanneer het een citaat is. De visuele effecten maken dit duidelijk. Bezoekers die gebruik maken van assistentietechnologie hebben extra aanwijzingen nodig om de betekenis van tekstelementen te begrijpen.
Het definiëren van de tekststructuur met de juiste HTML-elementen stelt je in staat om op meer dan alleen opmaak te vertrouwen om de betekenis van de elementen over te brengen. Dit maakt het veel gemakkelijker voor browsers en ondersteunende technologieën om de tekst op een andere manier weer te geven, met behoud van de structuur.
Daarnaast gebruiken zoekmachines deze HTML-code ook om te bepalen welke elementen van een tekst belangrijk zijn. Kopteksten bevatten bijvoorbeeld vaak belangrijke trefwoorden. Dit maakt het makkelijker om webpagina's te vinden.
Hoe pas je dit toe?
Assistentietechnologie analyseert de onderliggende structuur, d.w.z. de HTML-elementen die worden gebruikt om de betekenis van tekstelementen aan te geven. Deze HTML-structuur maakt het mogelijk dat de ondersteunende technologie de betekenis van de elementen aan de gebruiker overbrengt. Om de juiste HTML-elementen in teksten te gebruiken, kun je het beste met de toolbar uit de editor werken voor de volgende elementen:
- Koppen
- Paragrafen
- Citaten
- Opsommingen, genummerde lijsten en definitielijsten
- Nadruk: vet of schuingedrukt
Koppen
In de meeste editors kun je een tekst selecteren en aangeven dat dit een koptekst is. Je kunt hierbij zelfs het niveau van de koptekst opgeven (titel of subtitel of tussentitel,...). Let er wel op dat je de niveaus in de juiste hiërarchische volgorde gebruikt.
De titel van de pagina is meestal een kop op het eerste niveau (het <h1>-element). Als algemene regel zal het CMS die automatisch in het <h1>-element bovenaan de pagina plaatsen. Dit betekent dat tussenkoppen in de tekst op het tweede niveau moeten staan (het <h2>-element). De kopjes daaronder komen op het derde niveau en zo verder.
In de HTML-code ziet dat er zo uit:
<h2>Dit is een tussenkop op het tweede niveau</h2>
<h3>Dit is een tussenkop op het derde niveau</h3>
Opmerking
Het is essentieel om aan elke titel een HTML-tag toe te kennen (<h1> of <h2>,...) zodat ondersteunende technologieën de titel, subtitel,... kunnen herkennen en lezen. Omgekeerd moet een "titel"-tag niet worden toegewezen aan een tekst die geen titel is.
Paragrafen
Meestal maakt de editor automatisch een paragraaf met jouw tekst wanneer je begint te typen. Om dit te doen, pas je het <p>-element toe aan het begin van het tekstblok en </p> aan het einde van het blok. Zorg ervoor dat dit inderdaad het geval is. Zo niet, dan moet je de paragrafen markeren met de juiste knop in de editor. Op dezelfde manier moet je na het markeren van een koptekst vaak aangeven dat de tekst die volgt een paragraaf is.
In de HTML-code ziet een paragraaf er zo uit:
<p>Dit is een paragraaf…</p>
Geen witregels
Tussen elk deel van de tekst (<p>) komt de regelafstand automatisch overeen met de browser of de stijlen die zijn opgeslagen in het CSS-bestand van de website.
Het is echter ook mogelijk om een regelafstand in te voegen met het <br>-element zonder noodzakelijkerwijs een nieuwe paragraaf aan te maken.
- Voorbeelden: een postadres of verzen van een gedicht
Citaten en bronvermeldingen
Citaten worden vaak gepresenteerd als losse blokken in een lopende tekst. Gebruik het <blockquote>-element om aan te geven dat het een citaat is. Referenties hebben ook een eigen HTML-element: het <cite>-element.
Een citaat met bronvermelding kan er dus zo uitzien in HTML-code:
<blockquote>
<p>De kunst van te leven is thuis te zijn alsof men op reis is.</p>
<cite>Godfried Bomans</cite>
</blockquote>
Opsommingen en genummerde lijsten
Je kunt opsommingen en genummerde lijsten maken met de knoppen van de editor. Elk item in jouw lijst kan worden weergegeven met een opsommingsteken of een nummer, afhankelijk van jouw voorkeur.
Het <ul>-element wordt gebruikt voor ongeordende lijsten (‘unordered list’). Wanneer je op deze manier een opsomming maakt, wordt elk item voorafgegaan door een opsommingsteken (‘bullet’). Dit ziet er als volgt uit in de HTML-code :
<ul>
<li>Eerste onderdeel uit de opsomming.</li>
<li>Tweede onderdeel uit de opsomming.</li>
<li>...</li>
</ul>
Voor genummerde lijsten wordt het <ol> ('geordende lijst') element gebruikt. Wanneer je een lijst maakt die op deze manier geordend is, wordt elk element voorafgegaan door een nummer. Een genummerde lijst ziet er als volgt uit in de HTML-code:
<ol>
<li>Eerste onderdeel uit de genummerde lijst.</li>
<li>Tweede onderdeel uit de genummerde lijst.</li>
<li>...</li>
</ol>
Opmerking: Maak een echte lijst
Als je naar de regel bij elk woord gaat en een streepje of een sterretje voor elk woord plaatst, vormt dit geen echte lijst. Als gevolg daarvan merkt de assistentietechnologie alleen een reeks streepjes en woorden op waar die voor de visueel gehandicapte onbegrijpelijk zijn. Om een echte lijst te maken, moet je de juiste HTML-code (of de knop in de teksteditor) toepassen.
Definitielijsten en andere naam-waardelijsten
In het geval van een lexicon of woordenlijst wordt elke naam, term of concept geassocieerd met een eigen, afzonderlijk HTML-element.
- <dl> (definitielijn) geeft aan dat er een reeks definities wordt gestart. Om deze serie af te sluiten, eindig je met </dl>.
- <dt> (definiërende term) geeft de te definiëren term aan. Om de term te beëindigen, eindig je met </dt>.
- <dd> (definitiebeschrijving) geeft aan dat je begint met het definiëren van de term. Om de beschrijving af te sluiten, eindig je met </dd>.
<dl>
<dt>Browser</dt>
<dd>Een computerprogramma om webpagina’s te bekijken.</dd>
<dt>Weblog</dt>
<dd>Een website die periodiek wordt geüpdatet, vergelijkbaar met een dagboek.</dd>
</dl>
Niet alle editors zullen een knop hebben om dit soort lijsten in te voegen. Vaak genereert het CMS automatisch een woordenlijst. In dit geval moet de ontwikkelaar de HTML-elementen gebruiken voor een lijst met definities.
Nadruk
Wanneer je de aandacht wilt vestigen op woorden of groepen van woorden, zet je ze meestal vet (<strong>) of cursief (<em>). Als de editor goed is geconfigureerd, krijg je de juiste knoppen om de juiste HTML-elementen te gebruiken.
Een woord met nadruk kan er zo uitzien:
Bel <em>nu</em> een dokter!
Een woord met nadruk kan er ook als volgt uitzien:
<strong>Let op</strong>: dit is geen drinkwater.
Tekst-naar-spraaksoftware kan gemarkeerde woorden op een andere manier uitspreken als de markering wordt aangegeven met de juiste HTML-elementen. Zo kan de betekenis die wordt overgebracht door een visueel effect (zoals vet of cursief) ook worden waargenomen door bezoekers met behulp van assistentietechnologie.
Voor redacteurs
De redacteur moet ervoor zorgen dat de knoppen correct worden gebruikt, zodat de structuur van de tekst klopt.
Voor ontwikkelaars
De ontwikkelaar is verantwoordelijk voor het inrichten van de editor in het CMS. Idealiter zijn er knoppen om alle bovengenoemde tekstelementen aan te geven, zolang ze maar op de betreffende website worden gebruikt.