Paginatitels die mensen met een screenreader helpen

Iemand heeft zes tabbladen open van dezelfde webshop: drie producten die ze wil vergelijken, de winkelmand, de verzendinformatie en de retourvoorwaarden. Ze gebruikt een schermlezer en wisselt tussen de tabbladen. Bij elk tabblad hoort ze hetzelfde: “Naam winkel | Dé specialist in loungesets”. Zes keer. Welk tabblad is welk? Een goede paginatitel lijkt een SEO-detail, maar voor de toegankelijkheid is het het eerste oriëntatiepunt op elke pagina.

Wat de paginatitel is

De paginatitel is de tekst in het <title>-element in de kop van de HTML. Ziende bezoekers zien hem in het tabblad van de browser, in de geschiedenis en bij bladwijzers. Zoekmachines tonen hem meestal als de blauwe kop in de zoekresultaten.

Voor iemand met een schermlezer is het meer dan dat. Als een pagina laadt, leest de schermlezer als eerste de titel voor. Dat is het moment waarop de bezoeker hoort of hij op de goede plek is. Bij het wisselen tussen tabbladen en vensters is de titel het enige wat hij hoort om ze uit elkaar te houden.

WCAG-succescriterium 2.4.2 Paginatitel (niveau A) vraagt dat elke pagina een titel heeft die het onderwerp of doel beschrijft.

Drie regels voor een toegankelijke paginatitel

1. Elke pagina een eigen titel

Twee pagina’s met dezelfde titel zijn voor een schermlezergebruiker niet van elkaar te onderscheiden. Dat speelt vooral bij:

• categoriepagina’s met meerdere pagina’s: “Laarzen”, “Laarzen”, “Laarzen” in plaats van “Laarzen, pagina 2”;
• zoekresultaten die altijd “Zoeken” heten, ongeacht de zoekterm;
• formulieren met meerdere stappen die bij elke stap dezelfde titel houden;
• pagina’s die uit een template komen en waarbij de titel nooit is ingevuld.

2. Het specifieke deel vooraan

Een schermlezer leest van links naar rechts. Begint elke titel met de naam van het bedrijf, dan hoort de gebruiker steeds eerst hetzelfde, en pas daarna waar hij is. Zet het onderwerp van de pagina vooraan en de sitenaam achteraan:

Minder goed	Beter
Bakkerij Voorbeeld | Contact	Contact | Bakkerij Voorbeeld
Bakkerij Voorbeeld | Producten | Brood | Spelt	Speltbrood | Brood | Bakkerij Voorbeeld
Home	Bakkerij Voorbeeld, ambachtelijk brood in Zwolle

Ook in een smal tabblad, waar maar een paar woorden passen, is de pagina zo te herkennen.

3. Beschrijvend en kort

De titel zegt wat er op de pagina staat, in de woorden die de bezoeker zou gebruiken. Geen slogans, geen rij zoekwoorden. “Retourneren” is beter dan “Klantenservice | FAQ | Vragen | Hulp”. Houd het bij een paar woorden plus de sitenaam.

Titels die meebewegen met wat er gebeurt

Een paar situaties waar de titel zou moeten veranderen terwijl de bezoeker op de site is:

• Stappen in een formulier of afrekenproces. “Stap 2 van 4: bezorggegevens | Afrekenen | Naam winkel”. Zo weet iemand na het laden waar hij in het proces is.
• Foutmeldingen. Als een formulier na versturen terugkomt met fouten, kan de titel daarmee beginnen: “2 fouten in het formulier | Contact”. Dan hoort een schermlezergebruiker direct dat er iets mis is.
• Zoekresultaten. “Zoekresultaten voor regenjas (14) | Naam winkel”.
• Bevestigingen. “Bedankt voor uw bestelling | Naam winkel” in plaats van dezelfde titel als de afrekenpagina.

Bij sites die pagina’s laden zonder volledige herlaadbeurt, zoals sommige filtersystemen of apps, blijft de titel soms ongewijzigd terwijl de inhoud wel verandert. Dat vraagt een aanpassing in het script.

Paginatitel, H1 en SEO-titel: wat is wat?

Hier ontstaat vaak verwarring, zeker in WordPress.

• De H1 is de zichtbare hoofdkop op de pagina. In WordPress is dat meestal de titel die u bovenaan in de editor typt.
• De paginatitel is het <title>-element in het tabblad.
• De SEO-titel die u in een SEO-plugin invult, is diezelfde paginatitel. De plugin overschrijft daarmee wat WordPress anders automatisch zou maken.

Uw SEO-titel en uw toegankelijke paginatitel zijn dus hetzelfde element. Dat is goed nieuws: wat voor zoekmachines werkt, werkt hier meestal ook. Een unieke, beschrijvende titel met het onderwerp vooraan is voor beide de beste keuze.

Waar het kan botsen: als een SEO-titel wordt volgepropt met zoekwoorden of een commerciële kreet. “Goedkoop Laarzen Kopen? Beste Laarzen Online | Gratis Verzending” is voor een schermlezergebruiker een lange en verwarrende aankondiging. Schrijf voor de mens, dan doet de zoekmachine meestal vanzelf mee. Meer over het samenspel leest u in de kopstructuur van uw website, want de H1 en de titel horen bij elkaar te passen.

De H1 en de paginatitel hoeven niet letterlijk gelijk te zijn, maar ze moeten wel over hetzelfde gaan. Een bezoeker die “Contact” in het tabblad hoort en daarna een H1 “Over ons” tegenkomt, raakt in de war.

Het scheidingsteken

Tussen de onderdelen van een titel staat meestal een scheidingsteken. Een verticale streep of een gewoon streepje werkt prima. Schermlezers lezen sommige tekens voor, zoals “verticale streep”, afhankelijk van de instellingen. Dat is geen ramp, maar kies daarom geen decoratieve tekens als sterretjes, pijltjes of emoji’s. Die worden soms letterlijk voorgelezen, en “zwarte ster, zwarte ster” helpt niemand bij de oriëntatie. Gebruik op de hele site hetzelfde teken, zodat de opbouw herkenbaar is.

Zo controleert u uw paginatitels

1. Kijk naar de tabbladen. Open vijf verschillende pagina’s van uw site naast elkaar. Kunt u ze aan het tabblad herkennen?
2. Bekijk de instelling in uw SEO-plugin. Daar staat meestal een sjabloon zoals “%%title%% %%sep%% %%sitename%%”. Staat de sitenaam vooraan, draai het dan om.
3. Controleer de speciale pagina’s. Zoekresultaten, categoriepagina 2 en verder, de winkelmand, de afrekenstappen, de bedankpagina, de 404-pagina.
4. Zoek dubbele titels. Een crawler of de rapportage van een SEO-tool toont dubbele titels over de hele site.

Een titel aanpassen kost een minuut per pagina, en het sjabloon aanpassen werkt voor de hele site in één keer. Het hoort bij de basis die u ook in uw eigen test van de toegankelijkheid meeneemt. Voor de rest van het verhaal, van contrast tot formulieren, kunt u terecht bij toegankelijkheid voor uw website. En wie toch bezig is met de 404-pagina, vindt in een 404-pagina ontwerpen meer ideeën.