Zoekformulier
Betekenis aan tekst toevoegen in de code van een website
Over teksten
Tekst is de meest toegankelijke vorm van digitale informatie. Het kan toegankelijk worden gemaakt door de structuur en relaties van de onderdelen op de juiste manier vast te leggen.
Tekst kan op verschillende manieren door hulptechnologieën worden gepresenteerd. Voorleessoftware kan tekst omzetten in spraak (auditief), en een brailleleesregel kan het vertalen naar braille (tactiel).
Koppen toevoegen met een HTML kop-element
Koppen worden in de code opgemaakt met de code <h1> tot en met <h6>.
In de code ziet dat er zo uit:
Lijsten toevoegen met een HTML lijst-element
Opsommingen worden in de code opgemaakt met een <ul>-element. Genummerde lijsten worden in de code opgemaakt met een <ol>-element. Deze elementen hebben onderliggende <li>-elementen. De <li>-elementen worden gebruikt voor de individuele lijstonderdelen.
In de code ziet een ongeordende lijst er zo uit:
Let op: Een <ul>– of <ol>-element mag alleen <li>, <script> of <template>-elementen hebben als onderliggend element.
Lijsten met beschrijvingen toevoegen met een HTML lijst-element
Een lijst met beschrijvingen worden in de code opgemaakt met een <dl>-element. Dit element heeft onderliggende <dt>– en <dd>-elementen:
- Het
<dt>-element wordt gebruikt voor de naam, term, of begrip. - Het
<dd>-element wordt gebruikt voor de beschrijving.
In de code ziet dat er zo uit:
Let op: Een <dl>-element mag alleen <dt> met <dl> groepen, <script>, <template> of <div>-elementen hebben als onderliggend element.
Tabellen toevoegen met een HTML tabel-element
Tabellen worden in de code opgemaakt met het <table>-element. Dit element heeft onderliggende <tr>-, <th>-, en <td>-elementen:
- Het
<tr>-element wordt gebruikt voor een tabelrij. - Het
<th>-element wordt gebruikt voor een tabelkop. - Het
<td>-element wordt gebruikt voor de gegevenscellen.
Het <caption>-element geeft de inhoud van de tabel in het kort weer. Het <caption>-element is optioneel.
Zowel rijen als kolommen kunnen een tabelkop hebben.
Gebruik geen <div>-elementen samen met CSS om de uitstraling van een tabel te simuleren. Het probleem hiermee is dat de semantische betekenis van de tabel verdwijnt, waardoor de structuur en relaties niet meer door software te begrijpen is.
Tabelkoppen voor een eenvoudige HTML-tabel
Voor een eenvoudige tabel is een impliciete koppeling tussen tabelkop en gegevenscel voldoende. Gebruik het scope-attribuut om aan te geven welke cellen bij de kop horen. Voeg het scope-attribuut toe aan de tabelkop van een rij of kolom:
- Het attribuut
scope="col"geeft aan dat de cel een kop is voor de kolom. - Het attribuut
scope="row"geeft aan dat de cel een kop is voor de rij.
In de code ziet een tabel met 1 rij met tabelkoppen er zo uit:
In de code ziet een tabel met 1 kolom met tabelkoppen er zo uit:
Tabelkoppen voor een complexe HTML-tabel
Voor een complexe tabel is een expliciete koppeling tussen tabelkop en gegevenscel nodig. Gebruik het headers-attribuut om aan te geven welke kop bij de cel hoort. Dit kunnen meerdere koppen zijn. Het headers-attribuut koppelt de cel met het id-attribuut aan de cel.
In de code ziet een tabel met het headers-attribuut er zo uit:
Citaten toevoegen met een HTML citaat-element
Citaten worden in de code opgemaakt met het <blockquote>-element. Het cite-attribuut geeft de bron van het citaat aan. Het <cite>-element wordt gebruikt voor de titel van het werk waar het citaat vandaan komt (bijvoorbeeld een boek, een gedicht, een lied of een film).
Zowel het cite-attribuut als het <cite>-element zijn optioneel.
In de code ziet dat er zo uit:
Codeblokken toevoegen met een HTML codeblok-element
Codeblokken worden in de code opgemaakt met het <pre>-element.
In de code ziet dat er zo uit:
Zie ook
- WCAG: 1.3.1 Info en relaties
- Categorie: Tekst
- Functiegroep: Ontwikkelaar of tester
- Medium: Website
- Functiebeperking: Visuele beperking