Opvallend (on)toegankelijk: Sint en zijn verloren tabbladen

Op pakjesavond zit de Sint met honderden tabbladen vast,
Want op elk tabblad staat simpelweg “Verlanglijstje” als last.
DigiPiet vergat de WCAG-regel voor duidelijke titels,
En zo raakt zelfs de Sint het spoor bijster tussen alle symbolen.
Een goede paginatitel bespaart tijd én zorgt dat iedereen direct weet waar hij is!

WCAG 2.4.2 – Paginatitel

De bedoeling van dit succescriterium is om gebruikers te helpen bij het oriënteren op de website en het vinden van de gewenste content door te zorgen dat iedere webpagina een unieke, beschrijvende paginatitel heeft. De titel van een webpagina is het stukje tekst wat je bijvoorbeeld in je browserbalk ziet op het tabblad van die pagina. Met een unieke, beschrijvende paginatitel weten gebruikers direct waar de pagina over gaat en of deze voor hen relevant is. Het helpt ook bij het wisselen tussen verschillende tabbladen of vensters.

Wat is een goede paginatitel?

Een goede paginatitel:

• Beschrijft de inhoud of het doel van de pagina.

• Is uniek binnen de website.

DigiPiet had dus beter aan iedere pagina bijvoorbeeld ook de naam van het kind kunnen toevoegen, zodat de Sint direct kon vinden welk tabblad hij zocht.

DigiPiet is niet de enige die wel eens een foutje maakt

Problemen met de paginatitels komen in de onderzoeken die ik uitvoer regelmatig voor. De meestvoorkomende problemen zijn:

• Alle pagina’s hebben dezelfde paginatitel gekregen.

• Per toeval zijn er twee pagina’s die dezelfde paginatitel hebben gekregen. Iets voor DigiPiet om op te letten voor als er twee kinderen met de naam “Jantje Cardanner” in het Grote Boek van Sint moeten komen.

• PDF-documenten die géén documenttitel hebben.

Om te zorgen dat jij in de toekomst niet dezelfde fouten maakt als DigiPiet, heb ik voor je de belangrijkste aandachtspunten voor de paginatitel bij websites, PDF-documenten, apps en bij een paar bijzondere gevallen op een rijtje gezet.

De paginatitel bij websites

Bij websites stel je de paginatitel in via het <title> element in de HTML-code. Zorg dat je daar alle pagina’s een titel meegeeft die dus uniek en beschrijvend is voor de betreffende pagina.

Bij de homepagina is het daarbij belangrijk dat het ook duidelijk is waarvan dit de homepagina is. Als de paginatitel alleen “Homepagina” is en een gebruiker heeft bijvoorbeeld twee van dat soort homepagina’s openstaan van verschillende websites, dan helpt dat alsnog niet echt mee. Voeg dus bijvoorbeeld ook de naam van de website toe. Voor andere pagina’s dan de homepagina is dit niet verplicht, maar kan alsnog wel heel handig zijn.

Wanneer je de naam van de website toevoegt aan de paginatitel, zijn dit de best practices:

• Zet de naam van de website achteraan, zodat de unieke omschrijving als eerste verschijnt.

• Gebruik geen koppelteken (“-”) maar een scheidingsteken (“|”). Het koppelteken wordt namelijk door screenreaders vaak voorgelezen als "minteken".

→ Deze best practices toegepast als tip voor DigiPiet:

Jantje Cardanner uit Tilburg | Verlanglijstje | Sint’s Grote Boek

De paginatitel bij iframes

Met een <iframe> element kun je inhoud van andere websites in je eigen website insluiten. Een iframe is daarmee een aparte pagina binnen de webpagina en moet dus ook worden voorzien van een goede paginatitel. Dan bedoelen we de tekst die in het title-element (<title>...</title>) staat van de getoonde pagina en niet het title-attribuut (<iframe title="...">) van het iframe-element.

De paginatitel bij PDF-documenten

Voor PDF-documenten geldt dat zij een goede titel in de bestandseigenschappen nodig hebben en dat deze documenttitel wordt getoond in plaats van de bestandsnaam. Ook is het niet de bedoeling dat de software waarin het document is gemaakt terugkomt in de documenttitel. Dus niet:

• “Verlanglijstje_v2_101125.pdf” of

• “Microsoft Word – Verlanglijstje_v2_101125”

Als dit niet goed gaat, kan dit worden aangepast in de bestandseigenschappen van de PDF of in het bronbestand.

De paginatitel bij apps

Bij mobiele apps moet de paginatitel de naam van de applicatie zijn.

Bijzondere gevallen

Voor processen, Single Page Applications of webapplicaties is het zo dat iedere processtap of ieder scherm binnen de applicatie dezelfde paginatitel mag hebben. De titel van de eerste pagina wordt hier gezien als de titel van alle pagina’s die erbij horen. Het mag wel dat iedere processtap of ieder scherm een eigen beschrijvende titel heeft, dat is zelfs beter.

Gaat dat wel goedkomen met pakjesavond?

Ja zeker weten! De Sint heeft uiteindelijk Jantjes verlanglijstje kunnen vinden en toen kon hij helemaal voorbereid op pad. En DigiPiet? Die kreeg dit jaar geen zak met cadeaus, maar een cursus WCAG in zijn schoen.

Wil jij ook leren hoe je digitale toegankelijkheid goed aanpakt? Bekijk de cursussen op academy.cardan.com