9. Robuust

9.1 Zorg voor goede HTML-code

Omschrijving

Een browser vertaalt HTML-code naar een zichtbaar opgemaakte website. Voor deze vertaling moet de browser weten hoe zij de HTML-code precies moet vertalen. De kans dat dat goed gaat is het grootst als de HTML-code correct is.

WCAG stelt daarom een aantal eisen aan de kwaliteit van de HTML. Belangrijkste eis is dat deze goed 'parst': de browser interpreteert de code op de juiste manier. WCAG eist niet dat de HTML-code valide is.

Succescriteria

• 4.1.1 Parsen (niveau A)

Voldoen

Als we strikt kijken naar de eisen in WCAG, dan zijn voor dit criterium dit de eisen:

• HTML-elementen hebben een start- en een eindtag.
• HTML-elementen zijn correct genest.
• HTML-elementen bevatten geen duplicate attributen.
• ID's zijn uniek.

Onderstaande code is een voorbeeld van een verkeerde nesting:

Ons advies is echter om wat uitgebreider te kijken en te kijken of de HTML-code goed is. Dat gaat verder dan de strikte eisen die hierboven staan, maar maakt het toetsen makkelijker en goede HTML-code maakt de kans op fouten in de site kleiner.

Toetsen of de HTML-code valide is kan als volgt:

1. Ga naar The W3C Markup Validation Service.
2. Plak het webadres van de pagina in Address en kies Check.
3. Bekijk de fouten. Sommige kun je wellicht zelf aanpassen. Leg de andere fouten voor aan je webbouwer.

Maak je al gebruik van de add on Webdeveloper, dan kun je de code ook toetsen via Tools ▸ Valide HTML.

9.2 Naam, rol, waarde

Succescriterium

• 4.1.2 Naam, rol, waarde (niveau A)

Omschrijving

Om een website goed te kunnen gebruiken is het nodig dat voor elk onderdeel (zoals een link of een afbeelding) duidelijk is wat de naam, de rol en de waarde is. HTML is zo gebouwd dat in principe bij elk element dit aangegeven kan worden.

Dit is echter niet direct het geval bij onderdelen in een webpagina die op maat gemaakt zijn, zoals een accordeon.

Het gaat dan vaak om zogenaamde bedieningselementen: elementen waarbij de gebruiker interactie met de website heeft.

Toepassen

Voeg WAI-ARIA toe bij de onderdelen waarbij het niet mogelijk is om met HTML deze naam-rol-waarde goed te coderen. Met deze toevoeging zijn ze ook begrijpelijk en bruikbaar voor gebruikers van schermlezers of mensen die enkel een toetsenbord gebruiken.

Denk hierbij aan elementen zoals:

• Bedieningselementen, zoals links, knoppen, accordeons
• Formulierelementen, zoals invoervelden, keuzerondjes, selectievakjes en keuzelijsten
• Interactieve elementen, zoals dialoogboxen en pop-ups

Testen

Kijk in de accessibility tree of elk bedieningselement het volgende heeft:

• toegankelijke naam
• rol (indien van toepassing)
• waarde (indien van toepassing)

Deze kenmerken zijn vaak alleen goed te controleren met een schermlezer.

9.3 Statusberichten

Toelichting

Sommige fout- en juist succesmeldingen zijn heel subtiel: er verschijnt bijvoorbeeld alleen bovenaan in beeld kort een balk met de melding.

Gebruikers die blind zijn, slechtziend of gewoon minder alert zijn kunnen deze niet waarnemen of vinden en krijgen zo niet deze informatie.

Succescriterium

• 4.1.3 Statusberichten (niveau AA): Belangrijke wijzigingen in inhoud die geen focus krijgen worden gecommuniceerd aan de gebruiker zonder dat dit zorgt voor een onnodige onderbreking.

Toepassen

Voeg de juiste rol toe aan een statusbericht. In het voorbeeld hieronder is er een groene voortgangsbalk.

Door aan het element progress de rol progressbar toe te voegen en via WAI-ARIA de waarden is dit voor gebruikers van screenreaders ook duidelijk.