Toegankelijke websites bouwen

Ontwikkelaars brengen een ontwerp tot leven. Hun verantwoordelijkheid is dat de website gaat werken zoals bedacht en ook daadwerkelijk bedienbaar is door iedereen. Verder moeten zij ervoor zorgen dat het content management systeem (CMS) goed ingericht wordt zodat redacteuren hun content toegankelijk kunnen publiceren.

Onderstaande richtlijnen zorgen niet alleen voor betere toegankelijkheid, maar ook voor betere performance, vindbaarheid in zoekmachines en browser-compatibiliteit.

Algemeen

  • Scheid content, opmaak en interactie. Dit principe heet gelaagd bouwen (progressive enhancement) en zorgt ervoor dat de website goed functioneert wanneer bijvoorbeeld stylesheets of JavaScript niet wordt ondersteund.
    • Zorg dat alle content in het HTML-document beschikbaar is en niet afhankelijk is van scripts en plugins. Gebruik JavaScript alleen om interactie of dynamische weergave te realiseren. Plaats geen content door middel van JavaScript.
    • Regel alle opmaak in een goed georganiseerde stylesheet. Gebruik dus geen inline style-attributen.
    • Plaats JavaScript in aparte JavaScript-bestanden, niet in het HTML-document.
    • Vermijd het gebruik van verouderde HTML-elementen, zoals <center>, <font>, <b>, <i> en <u>. Deze elementen zorgen voor opmaak in plaats van semantiek en gaat tegen het principe van gelaagd bouwen in.
    • Misbruik HTML-elementen niet voor opmaakdoeleinden. <blockquote> is niet bedoeld voor het inspringen van tekst, maar voor de opmaak van citaten.
  • Lever HTML, CSS en scripts op conform W3C-specificaties.

    In Internet Explorer 8 kunt u eenvoudig programmacode valideren op HTML en CSS. Via functietoets F12 komt u terecht bij de Ontwikkelhulpprogramma's (Engels: Developer Tools). In het menu 'Valideren' vindt u W3C-validators voor HTML en CSS.

  • Zorg dat alle content bereikbaar en bedienbaar is met alleen het toetsenbord. Vermijd dus apparaatspecifieke event handlers als "onmouseover".

Pagina-opbouw

Begin met het opzetten van een skelet. Hiermee creëert u een consistente pagina-opbouw, die blinden helpt sneller te navigeren en ook beter onderhoudbaar is. Vervolgens kunt u per template specifieke elementen toevoegen.

  • Definieer het "XHTML 1.0"doctype bovenaan het HTML-document voor een correcte representatie van de website. HTML5 is nog geen formele W3C-standaard.

    <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Vermeld de basistaal van de pagina in het 'HTML'-attribuut.

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  • Gebruik de UTF-8 karakterset. Dit is de officiële, internationale standaard en zorgt voor de beste ondersteuning voor alle talen.
  • Plaats de belangrijkste contentblokken vooraan in de broncode. Navigatie, zoekfunctie, meta-menu en dergelijke komen daarna pas aan bod.
    • Positioneer de onderdelen op de pagina met behulp van de stylesheet.
    • Plaats boven de content hyperlinks waarmee de gebruiker direct naar de navigatie en de zoekfunctie kan gaan. Deze links hoeven niet zichtbaar te zijn als de stylesheet is ingeschakeld.
  • Zorg voor een correcte kopregel (heading) structuur.
    • Reserveer <h1> voor de paginatitel. Iedere pagina heeft dus één <h1>.
    • Gebruik <h2> voor paragraaftitels en kopregels voor de belangrijkste paginaonderdelen, zowel zichtbaar (bv. "Gerelateerde pagina's") als onzichtbaar (bv. "Hoofdmenu").
    • Gebruik <h3> voor subparagrafen.
    • Gebruik geen <strong> of iets dergelijks voor het aangeven van kopregels.
    • Sla geen stappen over. Gebruik dus geen <h3> zonder een <h2> begin altijd met de <h1>.
  • Gebruik tabellen alleen voor tabulaire data. Tabellen voor de opmaak van content is niet toegestaan.
  • Gebruik geen iframes en frames.
  • Zorg dat pop-up vensters of dynamische lagen gesloten kunnen worden op een standaard manier. Bijvoorbeeld door een sluitknop in de rechterbovenhoek en eventueel met de escape-toets.
  • Maak van de interactie geen precisiewerk voor de bezoeker. Ouderen, lichamelijk gehandicapten, maar ook mensen met een verstandelijke beperking hebben vaak moeite om nauwkeurig een muis te bedienen. Zorg bijvoorbeeld dat uitklapmenu's niet direct inklappen als de muis net even een fractie buiten het menu raakt.

Opmaak

Content moet betekenisvol en correct opgemaakt worden, zodat er geen informatie verloren gaat voor gebruikers.

  • Maak lijsten op met <ul> of <ol> elementen. Tip: Een navigatiemenu is ook een lijst.
  • Voorzie iedere afbeelding van een alt-attribuut.
    • Brengt de afbeelding informatie over, communiceer deze informatie dan in de alt-tekst.
    • Is de afbeelding puur decoratief of illustratief, laat de alt-tekst dan leeg (alt="").
    • Maakt de afbeelding onderdeel uit van een hyperlink die al een tekstlabel heeft, laat de alt-tekst dan leeg. Twee keer het zelfde label is te veel van het goede.
  • Plaats decoratieve afbeeldingen zoveel mogelijk met CSS.
  • Vermijd afbeeldingen voor tekst.
  • Zorg dat alle content tot minimaal 200% kan schalen als gebruikers inzoomen.
  • Ontneem links niet het outline attribuut met CSS, omdat het voor mensen die met het toetsenbord werken duidelijk moet zijn welk element de focus heeft.

Multimedia en dynamische content

  • Zet een toegankelijke mediaspeler in voor het afspelen van video's. De mediaspeler moet gebruikers in staat stellen:
    • Ondertiteling in/uit te schakelen;
    • Ondersteunend geluidsspoor in/uit te schakelen;
    • Video-bestand te downloaden als JavaScript of plugin uitgeschakeld is.

    Tip: Toegankelijke Silverlight media player

  • Zorg dat bewegende, knipperende, scrollende of automatisch actualiserende content gepauzeerd, verborgen, vertraagd en/of gestopt kan worden.

Formulieren

  • Breng in grote formulieren structuur aan door het groeperen van aan elkaar gerelateerde invoervelden. Gebruik bijvoorbeeld fieldsets voor 'Persoonsgegevens' en 'Bedrijfsgegevens'.
  • Voorzie ieder invoerveld van een label.
  • Geef aan welke invoervelden verplicht ingevuld moeten worden.
  • Geef concrete feedback bij het foutief invullen van het formulier. "U heeft niet alles ingevuld" is onvoldoende. Maak zowel in tekst als visueel duidelijk wat de gebruiker precies is vergeten of welke invoer foutief is.
  • Wees terughoudend met het gebruik van CAPTCHA's om spambots te weren. Omdat de meeste CAPTCHA's veel eisen van zicht- of gehoorcapaciteiten, moet u meerdere output alternatieven geven. Denk ook eens na over alternatieve oplossingen. Een simpele vraag als "Hoeveel is 1+1?" met invoerveld is ook effectief en toegankelijk.

CMS inrichten

  • Zorg dat redacteuren voor iedere pagina de titel, pagina-beschrijving en trefwoorden kunnen opgeven.
  • Zorg dat de editor alle functies ondersteunt die nodig zijn om toegankelijke content te kunnen produceren:
    • Minimaal: kopregels voor (sub)paragrafen (H2+H3), opsommingen (genummerd en ongenummerd), hyperlinks, afbeeldingen, taalaanduiding (per alinea en geselecteerde tekst), belangrijke woorden (vet), nadruk (cursief).
    • Bij voorkeur: afkortingen, tabellen (met ondersteuning voor titel, labels en scope) , blokcitaat, tekst uitlijnen (voor in tabellen), aangepaste stijlen (indien van toepassing, bijvoorbeeld voor een intro-alinea, tip of citaat).
  • Schakel functies in de editor uit die content alleen maar ontoegankelijker kunnen maken:
    • Minimaal: lettertype, tekstkleur, achtergrondkleur, tekstmarkeringskleur
    • Bij voorkeur: onderstrepen, kopregel voor paginatitel (H1), broncode bewerken (maar alleen als tabellen via de editor volledig conform richtlijnen kunnen worden opgemaakt)
  • Zorg dat de editor alleen valide code produceert, dus bijvoorbeeld geen <bold> maar <strong>.

Hoe maakt u...

Meer weten?

Heeft de informatie in dit artikel u geholpen?

Heeft u een vraag, opmerking of tip? Mail toegang@microsoft.com