Thuiswinkel.org: Hoe een complexe website het certificaat Drempelvrij kreeg

Het is altijd een uitdaging als je voor een project te horen krijgt dat de website het predicaat “Drempel Vrij” moet krijgen. Op zich geen spannende exercitie voor een ontwikkelaar, want een website moet immers ook zeer toegankelijk zijn voor de (blinde) zoekbots van Google, Bing, Yahoo!, etc. Maar het wordt wel een uitdaging als de website uit veel verschillende templates (pagina’s) bestaat, die ook nog eens opgebouwd zijn uit (veel) dynamische elementen.

Hoe complex is Thuiswinkel.org?

De website van Thuiswinkel.org bestaat uit maar liefst 42 verschillende templates. Een template is een webpagina waarin de inhoud op een (vooraf) gespecificeerde manier wordt getoond en/of kan worden opgebouwd. 

Thuiswinkel.org heeft bijvoorbeeld al 4 verschillende templates die als homepage (startpagina) fungeren. En elk van deze template bestaat dus weer uit (veel) verschillende elementen. Zo bestaat de homepage van Thuiswinkel.org alleen al uit 22 zichtbare elementen. Ter illustratie zijn deze elementen  hieronder opgesomd en met nummers in het screenshot van de Thuiswinkel.org homepage aangeduid. 

Omschrijving elementen:

1. Logo 2. Social Bars (2x) 3. Zoeken in website
4. Topnavigatie 5. Inlog status (incl. uitlog mogelijkheid) 6. Hoofdnavigatie
7. Call 2 Action (dynamisch) 8. Vrij contentblok (3x) 9. Zoeken in ledenlijst
10. Banners (2x, dynamisch) 11. Nieuwsoverzicht 12. Melding aantal leden
13. Ledenlogo Slider (ad random) 14. Nieuwe leden overzicht 15. Inschrijven nieuwsbrief
16. Footernavigatie 17. Bottomnavigatie 18. Kampyle Widget

 

THuiswinkel.org homepage

U kunt zich voorstellen dat ik voor de overige 41 templates een zelfde uitgebreide lijst van elementen kan aangeven.  En als klap op de vuurpijl zijn er ook nog 26 verschillende formulieren.

Al met al is de Thuiswinkel.org website met meer dan 3000 pagina’s dus een zeer uitgebreide website met complexe elementen. 

Aan welke criteria moet de website voldoen?

Drempelvrij logo

Het Waarmerk Drempelvrij wordt toegekend aan websites die toegankelijk zijn voor álle gebruikers van het internet. Een toegankelijke website moet daarom ook begrijpelijk zijn voor mensen met een functie beperking. Hierbij moet je denken aan visuele beperkingen als blind,- slechtziend,- en kleurenblindheid, maar ook doof,- of slechthorendheid, en motorische en verstandelijke beperkingen.

De website moet dan ook uit te vergroten zijn, te gebruiken zijn met screenreader, te navigeren zijn met spraakherkenning, te gebruiken zijn met een brailleleesregel, te begrijpen zijn voor personen met dyslexie of laaggeletterdheid, en logisch ingedeeld zijn voor mensen die de website niet kunnen zien.  Om dit mogelijk te maken heeft Drempelvrij.nl deRichtlijnen voor Toegankelijkheid van Webcontent ontwikkeld, waar een website aan moet voldoen om in aanmerking te komen voor het Waarmerk Drempelvrij.

Alle pagina’s en elementen moeten voldoen aan de 4 principes (12 richtlijnen en 25 succescriteria) van het Waarmerk Drempelvrij . Deze 4 principes zijn waarneembaar, bedienbaar, begrijpelijk en robuust. Ik zal ze hieronder toelichten.

Principe 1: Waarneembaar

Informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze.

Tekstalternatieven

In feite moet er rekening mee worden gehouden dat alle niet-tekstuele elementen (lees: afbeeldingen) voor elke bezoeker te begrijpen zijn. Zo zijn de nodige maatregelen genomen om ervoor te zorgen dat er overal alternatieve teksten (element alt=””) toevoegt kunnen worden, of dat de juiste alternatieve tekst automatisch wordt ingevuld. Vooral het automatisch zetten van de juiste alternatieve teksten bij een afbeelding is een tijdrovende klus.

  • Voorbeeld 1) Alternatieve tekst voor afbeeldingen op vrije content pagina’s
    Het zetten van een alternatieve tekst bij een afbeelding op een vrij content veld is een kwestie van secure content management. Bij het toevoegen van een afbeelding is het in het door Integrace ontwikkeld content managementsysteem SiteManager eenvoudig om een alternatieve tekst in te voeren. 

  • Voorbeeld 2) Alternatieve tekst voor afbeeldingen op gegenereerde pagina’s
    Voor het zetten van een alternatieve tekst bij een afbeelding op een gegenereerde (automatisch opgebouwde) pagina moet de ontwikkelaar er voor zorgen dat de juiste alternatieve tekst op de afbeelding komt te staan in de webpagina. Bij Thuiswinkel.org betekende dit o.a. dat op de pagina waar het Thuiswinkel waarborg certificaat kan worden opgevraagd alle afbeeldingen automatisch de juiste alternatieve tekst krijgt.

  • Voorbeeld 3) Alternatieve tekst voor afbeeldingen op dynamische elementen
    Voor het zetten van een alternatieve tekst bij een afbeelding op een dynamisch element moet de ontwikkelaar er voorzorgen dat de juiste alternatieve tekst op de afbeelding komt te staan of ervoor zorgen dat de content manager eenvoudig een alternatieve tekst kan toevoegen. Bij Thuiswinkel.org betekende dit o.a. dat op de banner een alternatieve tekst kan worden toegevoegd door de content manager.

Op tijd gebaseerde media

Naast afbeeldingen maakt Thuiswinkel.org ook gebruik van YouTube-filmpjes. Deze video elementen bestaan uit zowel beeld als geluid (hiermee is het dus geen louter-videobeeld, waarin alleen beelden worden getoond) Hierbij ligt de verantwoordelijkheid bij de content manager om de juiste maatregelen te nemen. De content manager dient ervoor te zorgen dat de video is ondertiteld (captions) via een transcriptie. Gelukkig biedt YouTube tegenwoordig voldoende mogelijkheden om de ondertiteling toe te voegen aan een video.

Ook moet er een alternatief aangeboden worden voor een embedded video. Zorg ervoor dat de YouTube video is omgezet naar bijvoorbeeld een MP4 bestand. Er zijn diverse website die deze service aanbieden (zoek in Google op ‘YouTube to MP4)

Aanpasbaar

In de webrichtlijnen versie 2 staat bij richtlijn 1.3: Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur.

Het komt erop neer dat je ervoor moet zorgen dat hoe iets gepresenteerd wordt in je website ook logisch is voor een blinde of slechtziende bezoeker (en dus voor de software die zij gebruiken ter ondersteuning voor het lezen van de website). Het is een lastige richtlijn om aan te voldoen, omdat het voor een ziende duidelijk is hoe informatie met elkaar is gerelateerd. Dit betekent veel werk voor de ontwikkelaar die er “onderwater” in de templates ervoor moet zorgen dat de info en relaties goed staan.

  • Voorbeeld 1) Tabellen
    Zorg ervoor dat tabellen op de juiste manier zijn opgemaakt. Er moet dus gebruik worden gemaakt van de juiste tabel tags, zoals <th> table headers en <caption> table title. Verder is het is dus uit den boze om tabellen in te zetten om de opmaak (uitlijning) van je pagina te regelen.

  • Voorbeeld 2) Presentatie knoppen & links
    Zorg voor een consistente manier van presentatie van knoppen en links. Voor Thuiswinkel.org hebben we ervoor gezorgd dat alle knoppen met eenzelfde functie er hetzelfde eruit zien. Zo hebben we knoppen die een actie starten (bijv. zoek-button resulteert in een zoekopdracht), knoppen die een status kunnen starten of pauzeren (bijv. play and pause knop bij ledenlogo slider), knoppen die naar een pagina leiden waar je een actie kunt uitvoeren en knoppen die fungeren als naar vorige pagina (back) functie.

  • Voorbeeld 3) Geordende en ongeordende lijsten
    Zorg wanneer u een lijst maakt voor het juiste gebruik van de elementen <ul>, <ol>, <li>, <dl>, <dt> en <dd>. Ook hierbij geldt weer dat lijsten niet gebruikt mogen worden voor de opmaak.

  • Voorbeeld 4) Formulieren en pagina’s met formulier elementen
    Bij het maken van toegankelijke formulieren moet je op het volgende letten:
    Namen voor invoervelden en knoppen: Zorg voor expliciete associatie, een veld titel geven i.p.v. een tekstlabel, een knop een naamgeven en geen reset knop gebruiken.
    Groeperen van invoervelden
    Instructies en Foutmeldingen: Meld vooraf dat veld verplicht is en wat het invoer format is (bijv. dd-mm-jjjj, bij een datum) en uiteraard dat de foutmelding duidelijk aangeeft wat er niet correct is ingevoerd in het formulier.
    Voorbereiding en voorspelbaarheid: Geef de bezoeker uitleg wat wordt verwacht in te vullen en bied voldoende tijd om het formulier in te vullen.

  • Voorbeeld 5) Betekenisvolle volgorde
    Content dient in een betekenisvolle volgorde in de broncode te staan. De voorleessoftware van blinde bezoekers kan de informatie dan correct voorlezen.

Onderscheidbaar

Houd bij ontwerp onder andere rekening met gebruik van kleur. Zorg dat er voldoende contrast is tussen tekst en achtergrond; zodat de bezoeker ook de teksten met een achtergrondkleur goed kan blijven lezen. Ook is het belangrijk dat bijvoorbeeld foutmeldingen niet alleen in het rood worden weergegeven, maar dat het ook tekstueel wordt meegedeeld. 

Principe 2: Bedienbaar

Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.

Toetsenbordtoegankelijk

Alle functionaliteit van de content moet bedienbaar zijn via een toetsenbord. Hierbij moet u opletten dat er geen toestenbordval gecreëerd wordt. Een toetsenbordval ontstaat wanneer bezoekers in een (nieuw) element op een pagina komen, waar zij niet meer uit kunnen komen met gebruik van het toetsenbord. De bezoeker zit dan dus vast.

Een toetsenbordval ontstaat bijvoorbeeld bij het gebruik van YouTube video's  in de Firefox browser. In Internet Explorer en Chrome wordt de video in een HTML 5 video speler afgespeeld en kan de bezoeker via het toetsenbord verder navigeren in de website. In Firefox browser wordt de video echter afgespeeld in Flash en kan de bezoeker niet met het toetsenbord uit het filmpje. De bezoeker komt dan dus vast te zitten, en de website voldoet in dat geval niet aan het Drempelvrij criterium.

Integrace heeft het bovenstaande probleem opgelost door te checken in welke browser de bezoeker de website opent. Als dit via de Firefox browser is zorgen we ervoor dat het niet mogelijk is om met het toetsenbord in de video te komen, maar dat men over het element springt. Wanneer dit principe toegepast op de website moet u erop letten dat bezoekers de video op een alternatieve manier kunnen bekijken. Bijvoorbeeld door de video ook als MP4 aan te bieden (zie ook: Op tijd gebaseerde media) anders wordt niet voldaan aan principe 1 van de webrichtlijnen.

Genoeg tijd

Geef gebruikers genoeg tijd om content te lezen en te gebruiken. In de website van Thuiswinkel.org worden op de homepage en in andere pagina’s een dia voorstelling gebruikt om logo’s van Thuiswinkel.org leden te tonen. Er moet dus functionaliteit aanwezig zijn om deze dia voorstelling te kunnen starten en pauzeren.

Navigeerbaar

Lever manieren om gebruikers te helpen navigeren, content te vinden en te bepalen waar ze zijn. Voor de website van Thuiswinkel.org betekent dat er aan 4 succescriteria moest worden voldoen:

  1. Blokken omzeilen; We hebben ervoor gezorgd dat blinde bezoekers en toetsenbordgebruikers herhalende content kunnen overslaan, zodat zij direct bij de hoofdcontent kunnen komen. Als je navigeert met je toetsenbord krijg je een link te zien waarmee je direct naar de inhoud kan en een link naar de hoofdnavigatie.
  2. Pagina titel; Webpagina’s hebben titels die het onderwerp of doel beschrijven.
  3. Focus volgorde; Zorg dat de tabvolgorde door webpagina’s logisch is, wanneer men met het toetsenbord navigeert.
  4. Link doel; Biedt een duidelijke linktekst, die aangeeft waar je naartoe verwijst. Het is dus niet de bedoeling dat er staat “klik hier” of “lees verder” maar bijv. de volledige titel van het nieuwsbericht.

Principe 3: Begrijpelijk

Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.

Leesbaar

Maak tekstcontent leesbaar en begrijpelijk. Zorg er dus voor dat het duidelijk is in welke taal de pagina is geschreven door het ‘lang’ attribuut te gebruiken. In dit geval geven wordt er in de bron weergegeven dat de taal Nederlands is (‘nl’)

Voorspelbaar

Maak het uiterlijk en de bediening van webpagina's voorspelbaar. Dus als de bezoeker input geeft, dat het duidelijk is dat er wijziging in de pagina inhoud zal zijn. Dit hebben we o.a. toegepast bij het filteren op de pagina. Een bezoeker selecteert een filter en wordt er op geattendeerd dat de content zal wijzigen bij selectie.

Assistentie bij invoer

Help gebruikers om fouten te vermijden en ze te verbeteren. Dit wordt vooral toegepast in de formulieren die kunnen worden ingevuld. Indien de invoer niet correct is bijv. bij invoer datum er geen datum wordt ingegeven, wordt er duidelijk vermeld dat dit niet correct is. Verder wordt er d.m.v. een label aangegeven wat er moet worden ingevuld. Bijv. als er in een formulier de bedrijfsnaam kan worden ingevoerd staat op het invoerveld het label: “Vul hier uw bedrijfsnaam in”

Principe 4: Robuust

Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën.

Compatibel

Maximaliseer compatibiliteit met huidige en toekomstige user agents, met inbegrip van hulptechnologieën. Hierbij gaat het vooral om dat het parsen (verwerken/inlezen) van pagina’s in de browser en de hulpmiddelen van de bezoeker. Bijvoorbeeld de standaard widget van Kampyle is standaard niet compatibel. Hiervoor hebben we de code dus herschreven, zodat ook deze tool door Thuiswinkel.org kon worden blijven gebruikt.

Het laatste succescriterium waar aan moest worden voldaan, namelijk naam, rol, waarde, is een lastige. In dit succescriterium moet ervoor gezorgd worden dat voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulier-elementen, links en door scripts gegenereerde componenten), de naam (name) en rol (role) door software bepaald kunnen worden. Daarnaast moeten toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, ook door software bepaald kunnen worden. Kennisgeving van veranderingen in deze items moet beschikbaar zijn voor user agents, met inbegrip van hulptechnologieën.

Thuiswinkel.org = Drempelvrij

Het was geen gemakkelijke klus, maar de website van Thuiswinkel.org is Drempelvrij en werd op 25 van de 25 succescriteria voldoende beoordeeld.  Hierbij is aangetoond dat ook een complexe, grote website aan het Drempelvrij keurmerk kan voldoen. Mooi meegenomen is dat met het bouwen van de toegankelijke websites van het Keurmerkinstituut en Thuiswinkel.org, Integrace zichzelf heeft bewezen als toegankelijke webbouwer.