Aanbevelingen voor Open Templates v4.0

AnySurfer analyseerde de toegankelijkheid van 11 template HTML-pagina’s voor de Vlaamse overheid, beleidsdomein DAR, afdeling communicatie, team communicatie en redactie met bijhorende stijlgids. Te downloaden via www.vlaanderen.be/webgids. Dit document bevat opmerkingen en aanbevelingen ter verbetering van de toegankelijkheid. Dit is een beknopt adviesrapport. Het kan niet als uitgangsbasis gebruikt worden voor het uitvoeren van een validatie.

templates

algemene opmerkingen

AnySurfer adviseert het gebruik van CSS voor opmaak i.p.v. tabellen.

Gelieve AnySurfer altijd met hoofdletter ‘A’ en hoofdletter ‘S’ te schrijven.

We zouden de verwijzing naar AnySurfer op pagina 6 graag uitbreiden met volgende paragraaf:

Hou van bij het begin van een project rekening met toegankelijkheid. Op die manier kan u met minimale inspanningen uw website toegankelijk maken voor alle gebruikers. Aanpassingen achteraf vereisen meer tijd en moeite. Win advies in bij Toegankelijk Web.

De gekleurde achtergrondbalken van de zoekfunctie worden niet correct getoond in Safari v4 en Internet Explorer v8.

screenshot zoekbox IE8 screenshot zoekbox Safari 4

Op de pagina template_hoofdpagina_1k_login_alt2.htm wordt de status van login tweemaal vermeld. De vermeldingen staan ook direct onder elkaar in broncode. Een screenreader gebruiker krijgt daarom deze informatie onnodig tweemaal te horen. audiofragment jaws9 'aangemeld' (mp3)

Op de pagina template_subpagina_2k.htm is "hoofdnavigatie" een link die hoogstwaarschijnlijk niet zal ingevuld worden door de gebruikers van de templates. Die link wordt wel aangekondigd door screenreaders en verwijdert u best.

accesskeys

We raden het gebruik van accesskey af omdat ze mogelijk botsen met de snelkoppelen van andere hulpprogramma. Daarnaast weten bezoekers niet welke accesskeys er ter beschikking zijn. U gebruikt onder andere accesskeys om de navigatie over te slaan ‘s’, voor de disclaimer ‘8’, zoeken ‘4’, contact ‘9’, sitemap ‘3’

Alt-tekst

Er wordt geadviseerd het logo in de banner te voorzien van een title attribuut. Vergeet daarbij niet de verplichte alt-tekst te vermelden: alt=”logo Vlaamse overheid, de Vlaamse leeuw”.

Validatiefouten

In template_hoofdpagina_1k_login_alt1.htm word id=”broodkruimel” tweemaal gebruikt wat een validatiefout oplevert. In template_hoofdpagina_1k_login_alt2.htm levert het attribute “bordercolor” een fout op. Hou inhoud en vormgeving best strikt gescheiden. Definieer daarom de bordercolor en bgcolor van een tabel in de CSS.

<td valign="top" bordercolor="#CCCCCC" bgcolor="#FFFFFF" id="toplogo">

De CSS valideert zonder fouten.

Betekenisvolle linkteksten

Het gebruik van onbetekenisvolle linkteksten als "lees meer over...” bots met toegankelijkheid. Voor artikels waarvan ook de titel naar dezelfde pagina leidt, wordt dit door de vingers gezien. De titels linken echter niet. Aangezien het hier om templates gaat zien we de oplossing van de titel als tweede link liever niet. Dit zet redacteurs mogelijk aan om dergelijke linkteksten te gebruiken. Verwijder daarom alle onbetekenisvolle links uit de templates.

Labels

Het zoekformulier bestaat maar uit één invoerveld. Toch is het nuttig om hier een label tag te gebruiken. Verbind de instructietekst ‘zoeken’ met het invoerveld d.m.v. een label.

Downloadbare bestanden

Op pagina 17 staat:

Voorbeeld: Beschrijving opleiding Anysurfer, (tekst-document, 31 Kb, 22 pagina’s)

Plaats de informatie over het document in de linktekst. Op die manier wordt het mee opgenomen in de linklijst van screenreaders.

Voorbeeld: Beschrijving opleiding Anysurfer, (tekst-document, 31 Kb, 22 pagina’s)

Semantiek

De topnavigatie is een opsomming van links maar niet als lijst gemarkeerd in de broncode. U kan de visuele opmaak behouden wanneer u semantisch correcte HTML gebruikt. De koppeltekens tussen de links kan u met CSS genereren. Op die manier blijft vormgeving en inhoud ook strikt gescheiden. Als u een lijst <ul> gebruikt kondigt een screenreader het aantal items aan en zal niet telkens “koppelteken” worden voorgelezen.

screenshot topnavigatie

Op de pagina template_subpagina_2k.htm springt u van een <h2> naar een <h6>.

screenshot headings

Vervang de <h6> door een <h3>. <h3> en <h6> zijn trouwens visueel identiek.

Linkfocus

U helpt gebruikers die geen muis kunnen hanteren en doorheen de website navigeren met het toetsenbord door de linkfocus via CSS extra te benadrukken. Op die manier weten toetsenbordgebruikers precies waar ze zich op de site bevinden. Meer informatie in dit artikel op accessites: http://accessites.org/site/2007/05/keyboard-friendly-link-focus/

De HTML-versie van dit rapport gebruikt onderstaande CSS om de linkfocus in de verf te zetten:

a:focus {

	background-color: #0053B3;
	color: white;

}

CSS Switcher

Op pagina 10 lezen we:

"De functie om de tekstgrootte aan te passen zit niet standaard in de templates omdat het eigenlijk om een browserfunctionaliteit gaat. Wilt u die functie toch aanbieden, kijk dan op de website Webgids (www.vlaanderen.be/webgids)."

We kunnen de documentatie op www.vlaanderen.be/webgids niet nakijken omdat het een intranet-site is die enkel binnen de overheidsmuren te bekijken is. Toch vinden we het belangrijk om te bekijken welke suggesties en voorbeeldecode geboden worden voor webmasters die een CSS switcher wensen aan te bieden op hun website.

Gebruik van de strong tag

Op pagina 12 lezen we:

"Wilt u een bepaald stuk tekst onder de aandacht brengen, plaats de tekst tussen <strong></strong>; de tekst wordt dan rood (#FF0000). Wilt u gewoon iets vet zetten, gebruik dan <b></b>."

Door dit te suggereren, wordt het voor kleurenblinde en een aantal blinde en slechtziende bezoekers mogelijk zeer moeilijk om te onderscheiden wanneer iets 'onder de aandacht' gebracht wordt of wanneer iets om een andere reden vet wordt weergegeven. Zie ook http://www.anysurfer.be/nl/richtlijnen/vormgeving/kleur/inhoud-is-begrijpelijk-voor-wie-geen-kle/ voor meer informatie.

Named anchors

<a name="hoofdinhoud"></a>

Het gebruik van een a-tag met een 'name'-attribuut is een verouderde manier om named anchors aan te brengen. Beter is om te verwijzen naar het id (id="...") van een HTML-element. Deze aanpassing is niet verplicht.

Taalfoutje

Op pagina 22 staat er 'Als uw site op zijn toegankelijk werd gekeurd'. Dat moet zijn: 'Als uw site op zijn toegankelijkheid werd gekeurd (of liever: 'gecontroleerd')'.