Voor Windows is er een gratis en opensource screenreader Non visual desktop access (NVDA) die je kunt gebruiken om je website eens te beluisteren. De Nederlandse stem die erbij zit, is wel van mindere kwaliteit. We raden de versie voor USB-sticks aan. Omdat je die niet moet installeren, kan er ook niets fout lopen op je computer. Sinds onze vorige blogpost over NVDA zijn er heel wat verbeteringen in het product.

Een van de commerciële pakketten is JAWS. JAWS is 40 minuten als demoversie te gebruiken. Daarna moet je de computer opnieuw opstarten om er verder mee te kunnen werken. Download JAWS versie 12 in het Nederlands. Standaard zit er geen Nederlandse stem bij maar die is wel gratis te downloaden. Ga naar Help, Webbronnen, RealSpeak Solo Direct download pagina.

Gebruikers van Lion voor Mac hoeven al helemaal geen screenreader te installeren, want deze is ingebouwd in het besturingssysteem (VoiceOver). Druk op command+f5 en je computer begint te praten. Standaard praat hij Engels maar via de VoiceOver-instellingen kan je de Nederlandse stem Ellen activeren. Lees meer over VoiceOver, de screenreader van Apple.

WYSIWYG staat voor What You See Is What You Get. De gebruiker werkt in een interface die gelijkt op de pagina zoals die er in de webbrowser zal uitzien.

Welke WYSIWYG-editor?

Er bestaan geen cijfers die aantonen welke editors het meest gebruikt worden. Hier volgt een vergelijking van de twee editors waar we het meest mee in contact komen, namelijk Tiny MCE en CKEditor.

Enerzijds moet de WYSIWYG-editor inhoud produceren die het mogelijk maakt om aan de AnySurfer Checklist 2.0 te voldoen, en dit zonder dat de gebruiker van de editor kennis heeft van HTML. Anderzijds is het ook belangrijk dat de editor waar mee gewerkt wordt, zelf toegankelijk is.

Test 1: correcte HTML

Voor deze test heb ik een pagina gemaakt die valideert volgens de W3C validator. De test bestaat eruit deze pagina na te maken in CKEditor (screenshot CKEditor) en TinyMCE (screenshot TinyMCE). In dit document staan HTML elementen waarmee je al een redelijk uitgebreide pagina kan maken.

Beide editors slagen voor deze test, de HTML valideert. Er zijn echter wel een aantal zaken die opvallen:

• Bij nesting van lijstjes kan het wel eens mis gaan. Het hangt ervan af hoe je dit doet. Als je achteraf item selecteert en het inspringen vergroot, kan het wel eens fout lopen. De geneste lijst staat dan tusssen 2 li- elementen en niet in het li-element (fout voorbeeld):
  <ul>
<li>a</li>
<li>b</li>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
<li>c</li>
</ul>
• Als je in TinyMCE een datatabel wil invoegen met tabelhoofdingen <th> en een titel <caption>, moet je achteraf via eigenschappen van de tabelcel, het celtype veranderen van data naar header. CKEditor voorziet al het gebruik van tabelhoofdingen bij de aanmaak van een tabel. Zeker voor redacteurs die geen HTML-kennis hebben, is het een extra drempel om th-elementen in TinyMCE te gebruiken.
• Soms kunnen extra plugins of instellingen ervoor zorgen dat de gebruiker geen toegankelijkheidsproblemen kan veroorzaken. Zo kan je de gebruiker aanraden het alt-attribuut in te vullen van een afbeelding. Als de afbeelding decoratief is, kan hij het alt-attribuut dan leeg laten (alt=”").
• Het is aangeraden dat de ‘full-option’ toolbar niet gebruikt wordt. De mogelijkheid om te onderlijnen (u-tag) kan voor verwarring zorgen, links zijn doorgaans onderlijnd. Tekst uitvullen (justify) wordt ook beter weggelaten, dit verminderd de leesbaarheid. Andere mogelijkheden zoals de kleur en achtergrond van tekst kunnen aanpassen, het lettertype en de lettergrootte, kan de leesbaarheid van tekst bemoeilijken. Dergelijke zaken worden beter vastgelegd in de CSS. Plugins zoals het invoegen van flash, kunnen voorzien worden als het echt nodig is.

We kunnen besluiten dat beide editors in staat zijn HTML te produceren die semantisch correct is. Ook na het aanpassen en verwijderen van code, blijft de code valideren.

Test 2: toegankelijkheid

Beide editors hebben een toolbar waar tal van iconen kunnen instaan. Het is relatief simpel om extra toolbars of extra iconen te tonen of te verbergen. In de filosofie van AnySurfer is het natuurlijk belangrijk dat deze toolbars zelf ook gebruiksvriendelijk en toegankelijk zijn.

CKEditor slaagt het best voor deze test. Op hun website is er zelfs een document te vinden over toegankelijkheid van de editor met het toetsenbord. Zo is het mogelijk om in de toolbars te navigeren met diverse sneltoetsen zonder dat hiervoor extra code moet voorzien worden.

Bij TinyMCE is het ook mogelijk maar de procedure is veel omslachtiger. Bij de test slagen we er niet in om de voorgestelde sneltoetsen werkende te krijgen (getest in Windows 7 en Mac OS X Lion met Internet Explorer 9 en Firefox 7). Daarenboven zijn de sneltoetsen niet in elk besturingssysteem hetzelfde, iets waar CKEditor wel aan gedacht heeft.

Besluit

CKEditor komt het best uit onze test. Hij is toegankelijk in gebruik en een redacteur zonder technische kennis kan er toegankelijke pagina’s mee publiceren. Je kan alvast een voorbeeld met CKEditor bekijken welke toolbars  nodig zijn om de demo pagina te maken.
Een editor biedt helaas nooit garanties. De beste garantie blijft een gebruiker met kennis van webtoegankelijkheid.

Deze stelling sluit echter niet uit dat men met andere editors ook correcte HTML kan maken die zelf ook toegankelijk zijn.

Voorlopig is het nog verwarring alom als er iemand “Bart” roept, maar dat zal wel wennen. We wensen Bart heel veel succes en bedanken iedereen die de vacature heeft helpen verspreiden.

Enkele bekende voorbeelden, er bestaan tientallen varianten:

• webAIM’s WAVE toolbar
• AChecker
• FAE Functional Accessibility Evaluator

Waarom zijn hun resultaten waardeloos zonder menselijke aandacht?

Vergelijk het met taal. Je schrijft een artikel dat volgens de ingebouwde spellingscontrole van het programma geen enkele fout bevat. Wil dat zeggen dat je een artikel hebt geschreven dat voor iedereen begrijpelijk is en correct is opgebouwd? Neen. De spellingscontrole kan je enkel helpen om puur grammatische fouten te verbeteren.

We zijn grote voorstander van valide code, webstandaarden zijn er niet voor niets. Maar een website waarvan elke pagina valideert, is niet per definitie een gebruiksvriendelijke of toegankelijke website.

• Een testtool kan je bijvoorbeeld groen licht geven omdat alle afbeeldingen een alt-attribuut bevatten. Maar enkel een mens kan zien of die alternatieve omschrijvingen voor blinden en zoekmachines ook werkelijk overeenkomen met hetgeen er in de afbeelding wordt weergegeven.
• Enkel een mens weet welke afbeeldingen best als decoratief worden beschouwd en dus een leeg alt-attribuut moeten krijgen (alt=”“).
• Een script kan nagaan of je pagina’s koppen bevatten (H1, H2, H3 enz.) maar enkel een mens kan nagaan of die een logische en hiërarchische structuur weergeven.
• …

Wil dat zeggen dat testtools voor toegankelijkheid waardeloos zijn. Natuurlijk niet. Ze kunnen je helpen in de juiste richting kijken. Maar vertrouw ze nooit blindelings. Train jezelf in webtoegankelijkheid (onze checklist is een interessant startpunt). Wanneer je de noden en potentiële problemen van al je bezoekers kent, hoef je niet te vertrouwen op geautomatiseerde testtools.

Accessibility expert Joe Dolson vat het mooi samen:

“This isn’t to say that automated testing doesn’t have a place; but it should never be considered the deciding factor for accessibility.”

Als de site in kwestie het AnySurferlabel draagt, mag je het ons laten weten. Stuur ons een mailtje of richt je direct naar de website eigenaar en zet ons in kopie.

Heeft de site geen label, probeer dan de website eigenaar te contacteren. Natuurlijk mag je naar ons verwijzen voor meer technische uitleg om toegankelijkheidsproblemen te verhelpen.

Wanneer je een probleem wil melden, is het belangrijk dat je alle informatie geeft die een webbouwer (mogelijk) nodig heeft om het probleem te verhelpen.

• Je contactgegevens zodat men bijkomende vragen kan stellen of kan melden wanneer het probleem is verholpen.
• Wat je probeerde te doen op de site, wat je verwachtte en wat er gebeurde. Beschrijf eventueel de stappen die nodig zijn om het probleem te reproduceren en stuur de URL mee van de pagina waar het probleem zich voordoet.
• Vermeld welke apparatuur je gebruikt:
  • Besturingssysteem: bv. Windows 7 of Mac OS Lion
  • Browser: bv. FireFox 4, Internet Explorer 8, Opera 11 of Chrome 13
  • Eventuele hulpmiddelen: bv. screenreader JAWS 9, vergrotingssoftware ZoomText 9.1 of spraakherkenningssoftware Dragon 10

Gerelateerde blogpost: Toegankelijkheidsproblemen melden via Fix the web

Meer informatie en tips in het Engels:

• Contacting Organizations about Inaccessible Websites
• Users Must Become Their Own Advocates

• Er is een nieuwe versie van Tax-on-web in de maak. De site is nog niet live, maar de ontwikkelaars vragen jou om de toepassing in aanbouw alvast uit te testen en feedback te geven om de toegankelijkheid ervan te verbeteren.
• Een webdesigner mailt je met de vraag of dat nieuwe fancy lightbox-script wel zo bruikbaar is voor blinde bezoekers. Om daarop te antwoorden, moet je eerst wat tests doen met verschillende screenreaders. Je beslist om je bevindingen neer te pennen in een artikel en publiceert het op de website.
• Volgende week geef je een technische opleiding aan een team ontwikkelaars. Je zoekt nog wat nieuwe voorbeelden om het verhaal bij het ijkpunt ‘Website is bruikbaar zonder muis’ kracht bij te zetten.
• Je krijgt een mailtje van een oplettende klant die je laat weten dat zijn auditrapport er niet zo netjes uitziet in de laatste versie van Opera. Dat zet je snel even recht door de CSS van het rapport aan te passen.
• Samen met een collega zoek je naar een manier om automatisch facturen te genereren vanuit TeamDesk, onze online CRM applicatie.
• In je mailbox zit een complexe vraag over formuliervalidatie. De vraagsteller wil je antwoord graag in het Engels omdat de site in India wordt ontwikkeld.
• Je legt de laatste hand aan het auditrapport voor een nieuw museum. Je leest het nog eens na, overlegt een aantal zaken met je collega’s en verstuurt het naar de klant. In onze databank vul je de nodige gegevens in zodat de factuur opgemaakt kan worden.
• Een klant mailt trots met de melding dat alle gevraagde aanpassingen aan haar website zijn uitgevoerd. Je plant de validatie voor vrijdag in want volgende week wordt de site voorgesteld op een persconferentie.
• Je collega’s hebben een suggestie voor een nieuwe feature in onze rapportage-toepassing. Je onderzoekt hoe haalbaar het is en duikt vervolgens in de PHP-code.
• Je las op Twitter dat er een leuk nieuw boek over HTML 5 verschenen is. Na goedkeuring, bestel je het boek zelf op de website van Amazon. Op de treinrit naar huis verdiep je je in het boek.

De back-end is relatief toegankelijk, waardoor ik dit voorbeeldformulier kon maken. Verplichte velden zijn tekstueel aangegeven en ook de foutmeldingen zijn duidelijk. Het enquêteformulier heeft helaas geen labeltags. Als deze toegevoegd worden, kunnen we deze website zeker aanraden om eenvoudige enquêtes mee op te zetten. Er is momenteel keuze uit 5 formuliervelden, dus het kan niet zo moeilijk zijn om in die templates labeltags toe te voegen.

Enkele persoonlijke favorieten voor windows:

• Sneltoetsen: Elk softwareprogramma heeft sneltoetsen (keyboard shortcuts) die u in staat stellen om met een toetscombinatie een functie uit te voeren. Dit bespaart u tijd en inspanning omdat u niet hoeft te wisselen tussen toetsenbord en muis. Iedereen kent de combo’s voor kopiëren [ctrl C] en plakken [ctrl V] in Windows. Eens u begint te wisselen tussen vensters met [alt-tab], gaat u waarschijnlijk nooit meer de muis hiervoor gebruiken. Iets minder bekend zijn venster sluiten [alt F4] en naar de adresbalk van de browser gaan [alt D].
• Mouse gestures & FireGestures: Met deze Firefox add-ons kan u door middel van een muisbeweging bijvoorbeeld een pagina teruggaan (beweeg van rechts naar links terwijl u de rechter muisknop ingedrukt houdt) of naar het vorige tabblad springen (beweeg omhoog en dan van rechts naar links terwijl u de rechter muisknop ingedrukt houdt).
• NoSquint: Een Firefox add-on waarmee u de tekstgrootte en de kleur van tekst, links en achtergrond per website kan aanpassen aan uw eigen voorkeuren. NoSquint onthoudt uw voorkeur zodat u dit niet telkens opnieuw hoeft aan te passen.
• Camera Mouse: Software waarmee u de muis kunt besturen door uw hoofd te bewegen. U moet wel over een webcam beschikken.

Een aanrader van Roel:

• Readability met deze add-on kunt u rustig de inhoud van een pagina lezen omdat het al de rest (reclame, navigatie enz.) verbergt.

Om u op weg te helpen wil ik u graag attent maken op de volgende sites met nog meer tips en links.

In het Nederlands:

• Leesbaar Internet van Accessibility.nl
• 25 tips voor Internet Explorer van seniorennet.be

In het Engels:

• Better Web Browsing: Tips for Customizing Your Computer by the W3C
• Firefox Accessibility Add-ons (a collection of add-ons for Firefox)

Kent u ook een website met handige tips om uw computer of browser aan te passen, laat ze dan achter in het commentaarveld.

Op de website van de conferentie kan je nu het resultaat vinden: Lees mijn abstract (PDF) of herbeluister de presentatie (MP3).

Apple gaat er dus vanuit dat zijn gebruikers altijd de muis hanteren en dat ze enkel met de tabtoets door formulieren willen kunnen navigeren. Logisch maar helaas ontoegankelijk uitgangspunt. Toch is er een simpele oplossing. Onder Systeemvoorkeuren > Toetsenbord > tabblad Toetscombinaties kan je bij ‘Uitgebreide toetsenbordfuncties’ kiezen voor ‘Alle regelaars‘. Heropstarten vereist. Hierdoor kun je met de tabtoets alle elementen bereiken in programma’s en browsers onder Mac OS. Spijtig dat dit niet de standaard instelling is.