Structureer de pagina met HTML-tags die hun rol aangeven
Beschrijving
Dit criterium controleert of de code van je pagina de rol van elk deel aangeeft. iPand controleert drie punten: een element <main> (of role="main") en minstens twee elementen uit <header>, <nav> en <footer>; minstens de helft van de hoofdtekst in tekstelementen (alinea’s, lijsten, koppen, tabelcellen, citaten, bijschriften); een geldig lang-attribuut (BCP 47) op <html>.
Het tweede punt wordt niet beoordeeld als de hoofdtekst minder dan 100 woorden telt.
Waarom dit belangrijk is voor AI
Semantische tags scheiden de hoofdinhoud van de header, het menu en de footer, en zeggen wat elk blok is: alinea, lijst, tabel. Een programma dat de code leest, vindt zo de nuttige tekst van de pagina zonder die uit de opmaak te hoeven raden.
- <main> onderscheidt de inhoud die bij de pagina hoort van wat op de hele site terugkomt.
- Tekst in alinea’s en lijsten laat zich scherper opdelen dan tekst die zonder rol in <div>-elementen staat.
- Volgens het W3C gebruiken zoekmachines, vertaaltools en spraaksynthese het lang-attribuut.
Zo los je het op
- 1 Baken de grote zones van de pagina af Zet de inhoud die bij de pagina hoort in één element <main>, de header van de site in een <header>, het menu in een <nav> en de footer in een <footer>. Gebruikt je thema alleen <div>-elementen? Vraag dan je ontwikkelaar of de maker van het thema om ze te vervangen.
- 2 Schrijf de tekst in alinea’s en lijsten Zet elke alinea in een <p>, opsommingen in <ul> of <ol> met een <li> per item, en vergelijkbare gegevens in een <table>. Vermijd tekst die direct in <div>- of <span>-elementen staat: minstens de helft van de hoofdtekst moet in tekstelementen staan.
- 3 Declareer de taal van de pagina Voeg het attribuut lang toe aan de tag <html> met een BCP 47-code: lang="nl" voor Nederlands, lang="nl-BE" voor Belgisch Nederlands, lang="en" voor Engels. Op een meertalige site declareert elke versie haar eigen taal.
- 4 Controleer de structuur Zoek in de inspectietool van je browser de elementen <main>, <header>, <nav> en <footer>, en daarna het attribuut lang van de tag <html>. Controleer ook of de hoofdtekst in <p>- en <li>-elementen staat in plaats van in <div>-elementen.
In het kort
Benoemde zones, tekst in alinea’s en een gedeclareerde taal maken de pagina leesbaar zonder dat iemand de opmaak hoeft te raden. iPand controleert die drie punten elke dag in de code van de pagina.
