In deze nieuwsbrief
Drie websites verdienden de voorbije maand het label. Gijs Veyfeyken, onze langverwachte nieuwe collega stelt zich voor en in een technisch artikel verneemt u de naakte waarheid over verborgen tekst. We sluiten af met nieuws van het UWEM-front en de weblogberichten van de voorbije maand.
Vorige edities van de nieuwsbrief vindt u hier:
Suggesties en opmerkingen zijn welkom bij Roel Van Gils.
Nieuwe toegankelijke websites
Tijdens de voorbije vier weken behaalden drie websites het AnySurferlabel.
Brugge Bereikbaar
Op deze website vinden bewoners, bezoekers en zelfstandige ondernemers informatie over wegwerkzaamheden in Brugge. De klemtoon ligt op de grootschalige wegwerkzaamheden, maar daarnaast vindt u op deze website een overzicht van alle werken die een impact op de bereikbaarheid hebben.
Gemeente Ingelmunster
Sinds vorige maand heeft de gemeente Ingelmunster een website. De thematische indeling maakt het burgers makkelijker om de juiste informatie terug te vinden. Aan een e-loket wordt nog gewerkt.
Topsporthal
De hypermoderne Topsporthal Vlaanderen zet Vlaanderen op de wereldkaart van de indoorsporten. Op de bijbehorende website vindt u ondermeer een kalender, ranglijsten en informatie over het Wielercentrum Eddy Merckx.
Welkom, Gijs!
Onze strijd om het internet toegankelijker te maken voor surfers met een functiebeperking gaat onverminderd door. Bart en ikzelf zijn reuzeblij dat we er sinds twee weken een collega bij hebben die ons daarbij zal helpen. Hieronder stelt hij zichzelf voor.
Mijn naam is Gijs Veyfeyken. Als 26-jarige internetaddict en afgestudeerde in Communicatie en MultimediaDesign stort ik mij nu in de wereld van de webtoegankelijkheid.
Mijn hoofdtaak bestaat uit het screenen van sites en het schrijven van adviezen i.v.m. toegankelijkheid. Daarnaast volg ik het project 'ToegankelijkWeb' op. Dankzij dit meerjarige initiatief moeten alle intra- en internetsites van de Vlaamse overheid een stuk toegankelijker worden. Werk in overvloed dus :-)
En omdat ik toch tijd teveel heb (not!) geef ik ook nog part-time Photoshoples in het avondonderwijs. Verder heb ik verschillende freelance-opdrachten achter de rug en een tijdje in dienst van een webdesignbureau gewerkt.
De link met AnySurfer vindt u terug in mijn thesis: 'Multiple Sclerose en Multimedia'. Hierin toon ik aan hoe personen met MS (lees: diverse fysieke beperkingen) gebaat zijn bij het gebruik van internettoepassingen en hoe computers toegankelijk kunnen gemaakt worden voor deze doelgroep. Interesse? Geef me een seintje op gijs (apenstaartje) anysurfer (punt) be.
Hopelijk kan ik u in toekomstige nieuwsbrieven, op de site of op het weblog met mijn schrijven boeien.
Ik zie, ik zie wat jij niet ziet
Om tekst op een webpagina te verbergen, zijn er de CSS-eigenschappen 'display: none' en 'visibility: hidden'. In dit artikel willen we twee kanttekeningen maken bij het gebruik van deze CSS-technieken.
- Bedenk dat sommige bezoekers verborgen tekst toch te zien krijgen, ook als dat niet de bedoeling is.
- 'Display: none' en 'visibility: hidden' zijn onbetrouwbaar om tekst te verbergen die enkel bedoeld is voor screenreadergebruikers (zoals skip links, extra hoofdingen en andere verborgen informatie om de structuur van een pagina inzichtelijker te maken). Verderop in het artikel vertellen we hoe het wel moet.
Niet echt onzichtbaar
Tekst die je verbergt met 'display: none' of 'visibility: hidden' is onzichtbaar op het scherm. Bij 'display: none' lijkt het alsof de tekst er nooit geweest is en als je 'visibility: hidden' gebruikt, neemt de tekst wel de voorbehouden ruimte in beslag, maar is er niets te zien.
In geen van deze gevallen verdwijnt de tekst echter uit de HTML-bron of het Document Object Model. De tekst komt immers weer tevoorschijn bij het uitschakelen van CSS, in browsers die geen of weinig ondersteuning hebben voor CSS (smartphones, PDA's en tekstbrowsers) en in een aantal screenreaders die CSS negeren. En als je pech hebt, duikt je verborgen tekst ook op in de resultaatpagina's van zoekmachines.
Tekst waarvan je echt niet wilt dat je bezoekers ze te zien krijgen, haal je dus best weg uit de broncode. Je kunt ook HTML-commentaartags gebruiken zodat ze enkel zichtbaar zijn als de broncode van een pagina wordt opgevraagd. Blinden die een screenreader gebruiken, krijgen commentaartags uiteraard ook niet voorgelezen.
Niet zichtbaar, wel hoorbaar
In een aantal gevallen wil je tekst toevoegen die niet zichtbaar hoeft te zijn op het scherm, maar het voor blinden eenvoudiger maakt om te navigeren of om de structuur van een webpagina te begrijpen. Ook hiervoor zijn 'display: none' en 'visibility: hidden' niet goed geschikt. Steeds meer screenreaders (zoals Jaws en Supernova) zijn zich namelijk bewust van de mogelijkheden van CSS en negeren ook verborgen tekst. Ze redeneren dat tekst die niet zichtbaar mag zijn op het scherm ook niet voorgelezen hoeft te worden of op de brailleleesregel moet verschijnen.
Eigenlijk zou dit helemaal geen issue zijn als screenreaders eindelijk het gebruik van CSS media types zouden ondersteunen en dus enkel stijlbladen zouden hanteren die gemarkeerd zijn met het media type 'braille' of 'aural'. Zover is het helaas nog niet en daarom moeten we een 'hack' gebruiken om tekst visueel te verbergen, maar die een screenreader niet associeert met het verbergen van tekst.
.hidden {
position: absolute;
left: 0px;
top: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Met deze CSS-klasse kan je ieder HTML-element buiten het visuele bereik van de webpagina positioneren en voorkomen dat het een fysieke plaats op het scherm inneemt. Onzichtbaar dus, maar eigenlijk ook weer niet. Deze combinatie van CSS-eigenschappen is door WebAIM getest en goed bevonden. Screenreaders (en ook de meeste zoekmachines) trappen erin.
En in de praktijk?
Niet alleen blinden hebben moeite met surfen. We pleiten er dan ook voor om niet al te screenreaderspecifiek te ontwerpen. Een link om de navigatie over te slaan (een 'skip link') is bijvoorbeeld ook nuttig voor slechtzienden die hele grote letters nodig hebben, voor wie een klein beeldscherm gebruikt of de computer bedient met spraakbesturing.
Enkele voorbeelden waarbij het invoegen van extra HTML-code voor screenreaders wel interessant kan zijn:
- Betekenisloze links als 'Lees verder' uitbreiden met een informatief gedeelte. Een mooi voorbeeld vind je op de website van Sint-Niklaas. Ga in de broncode maar eens op zoek naar de 'Lees Verder'-links.
- Extra verborgen label-tags toevoegen aan opgesplitste formuliervelden zoals rekeningnummers, het rijksregisternummer of telefoonnummers. De toegankelijkheidsrichtlijnen stellen immers dat elk formulierlement een eigen label-tag moet krijgen. Een voorbeeld vind je op de website van Dexia Direct Net.
Opgelet met extra CSS-definities voor Print-stylesheets!
We zeiden al dat de ondersteuning voor media types nog steeds heel gebrekkig is in moderne screenreaders. Ze pikken bijvoorbeeld ook de CSS-definities op uit de stylesheets die het media type 'Print' kregen. Als je bijvoorbeeld de navigatieblokken en het zoekveld verbergt in je Print-stylesheet (een prima idee vanuit usability-oogpunt) en hiervoor 'display: none' gebruikt, is het best mogelijk dat blinde bezoekers ook geen navigatie of zoekveld meer opmerken.
Dit los je eenvoudig op door je CSS-selectors voor de printversie steeds in een afzonderlijk CSS-bestand te stoppen (en dus niet onderaan toe te voegen in je andere stylesheets of rechtstreeks in de head-sectie van je webpagina's op te nemen).
Nog vragen of twijfels? Bel of mail ons. Onze contactgegevens vindt u op de site.
Europees toegankelijkheidslabel
In de nieuwsbrief van januari hadden we het al over de totstandkoming van een Europees webtoegankelijkheidslabel. Die boot wil AnySurfer uiteraard niet missen. Een eerste stap is nu gezet met de voltooiing van onze convergentietabel. In dit document geven we aan wat de verschillen zijn tussen de testmethodologie van AnySurfer en die van de Unified Web Evaluation Methodology (UWEM).
Het engagement van AnySurfer om aan dit Europese label mee te werken is nu ook vastgelegd in een 'Letter of Understanding' waarmee we aansluiten bij Braillenet uit Parijs en Teleservicios uit Madrid.
Intussen op het weblog
Ons weblog is in de eerste plaats bedoeld voor webwerkers: webdesigners, webontwikkelaars en redacteurs. De berichten op het weblog verraden soms de persoonlijke interesses van onze medewerkers, zijn af en toe technisch, maar soms ook grappig. In de nieuwsbrief sommen we de koppen van de berichten van de voorbije 30 dagen op. U kunt meteen doorklikken naar de volledige berichten:
- 12/04/07: Over ARIA op A List Apart
- 23/03/07: Open source screenreader
- 19/03/07: IBM maakt YouTube toegankelijker voor blinden