Waarom webpagina’s toegankelijk maken?

• De produktiviteit van een webpagina stijgt indien de pagina gebruiksvriendelijk is voor iedereen, ook anders-validen.
  • Gebruiksviendelijkheid van een site testen kost gemiddeld 10% van het project budget. Daartegenover staat een ROI van iets minder dan 100%.
    Return on Investment for Usability
  • Agenten worden elke dag betaald om te zoeken op de EKMS en QMS. Een goede interface beperkt de nodige trainingen, een zorgt voor een kortere tijd nodig om taken uit te voeren.
    Do Productivity Increases Generate Economic Gains?
  • Extra: Does CSS provide higher ROI than straight HTML?
• Findability verhogen van de inhoud.
  • Het gebruik van ALTernatieve teksten voor beelden verhoogt de mogelijkheid om verschillende types van gegevens terug te vinden.
  • Search engines die de betekenis van HTML elementen begrijpen (vb. Google) kunnen betere resultaten opleveren.
  • Het word findability werd geïntroduceerd door Peter Morville en verwijst naar informatie systemen waarin gegevens gestructureerd worden met het doel de resultaten van een search engine te verbeteren. The Age of Findability
• Inhoud weergeven onafhankelijk van de technologie.
  • Rekening houdend met het aantal browsers en software paketten die een webpagina kan weergeven, is het vrijwel onmogelijk om voor elke programma een uitzondering te maken. Gebruik van een algemene standaard zoals HTML en CSS geeft webdesigners een referentie die geldt voor elke programma dat een webpagina kan weergeven.
  • Device Independence Principles
• Sociale verantwoordelijkheid.
  • Een bedrijf dat sociale verantwoordelijkheid toont tegenover zijn werknemers versterkt zijn positie als werkgever en maakt de werkplek aantrekkelijk voor anders-valide mensen.
• Gerechtelijk aansprakelijkheid verminderen.
  • Op dit moment zijn er verschillende rechtszaken aan de gang waarin anders-validen en mensenrechtenorganisaties bedrijven aanklagen omdat hun website niet toegankelijk is voor ander-validen.
  • Verschillende landen die webtoegankelijkheid opgenomen hebben in de wetgeving zijn: Amerika, Canada, Autralie, Engeland, Nederland, Denemarken, Frankrijk, ….
    AU- CA – DE – DK – ES – EU – FI – FR – HK – IN – IT – JA – NZ – PT – UK – US
  • Extra: Europa: e-Accessibility, Web Accessibility
  • Extra: National Federation of the Blinds Sues AOL

Hoe gebruiken anders-validen een website?

Anders-validen is een vrij algemene term die weinig betekenis heeft. Willen we een pagina toegankelijk maken voor een bepaalde handicap, moet het type handicap duidelijk vernoemt worden. Om een document gebruiksvriendelijk te maken moeten we weten hoe hij of zij het document gebruikt, wat er verwacht wordt en het kennisniveau van de gebruiker. Een website bouwen met deze 3 elementen in het achterhoofd kan ervoor zorgen dat de gebruiker de website als positief en gebruikvriendelijk ervaart. Een website toegankelijk maken is niet meer of minder dan de gebruiksvriendelijkheid voor specifieke gebruikers, anders-validen, op te krikken. Dit betekent echter niet dat andere gebruikers genegeerd worden, in tegendeel, de meeste aanpassingen hebben positieve gevolgen voor de algemene gebruiksvriendelijkheid van de website.

Blind of slecht-ziend

Blinden zijn vanaf het begin sterk aanwezig in de internet gemeenschap omdat daar (het virtuele) hun beperkingen niet gelden. De grote groei van het internet en de commerciële belangen zorgden ervoor dat het internet alsmaar meer gericht werd op het visuele en minder toegankelijk werd voor anders-validen in het algemeen.
Blinden gebruiken verschillende applicaties en toestellen afhankelijk van hun voorkeur. Zo bestaan er braille toetsenborden waarop een tekst lijn per lijn wordt “afgedrukt”. Dit wordt meestal gebruikt in combinatie met de webbrowser Lynx. Anderen gebruiken speechbrowsers bovenop een browser (voornamelijk IE).
Iemand die slecht-ziet, dat kan gaan van bijna niets-zien tot het gebruik van een bril, kan gebruik maken van vergrotende programma’s en de mogelijkheden van de browser en CSS.

Hoe navigeren?

Via het keyboard

• TAB toets om het volgende element actief te maken
• ENTER toets om een link te volgen
• ALT-[0-9][a-z] accesskey gedefinieerd in het HTML document

Mogelijke problemen:

• Afbeeldingen, video, diagrammen en grafieken die niet op een alternatieve manier wordt omschreven (via alt-tekst of audio)
• Geen logische leesvolgorde wanneer de tabel functie wordt uitgeschakeld waardoor alle tekst naast elkaar wordt gezet.
• Frames die geen ‘no frames’ alternatief hebben
• Websites en formulieren die niet met de tabtoets toegankelijk zijn
• Links naar andere documenten zoals Excel, Word en PDF documenten die niet aanekondigd worden.

Figure 1: Braille leesregel

Figure 2: Schermafdruk van de Lynx webbrowser.

Motorische handicap

Mensen met een motorische handicap zijn afhankelijk van het gebruik van een speciale muis/toetsenbord, een zogenaamde hoofd-muis, spraakherkenning etc. Zij hebben ook meer tijd nodig om formulieren in te vullen.

Hoe navigeren?

Via geproken commando’s

• TAB-toets, ENTER-toets (Voice Express, L&H)
• De tekst van de link uitspreken om deze te volgen (JAWS)

Via bewegingen

• Hoofd- of oogbewegingen die geregistreerd worden door camera’s.

Mogelijke problemen:

• tijd-gelimiteerde reacties in websites: animaties waarop metn kan klikken
• autorefreshment
• geen mogelijkheden om met toetsenbord te navigeren in plaats van de muis
• kleine vlakken zijn moeilijk aan te klikken

Figure 3: Monitor met camera’s die de oogbeweging registreren om zo commando’s op te vangen en de computer te besturen.

Andere handicaps

• slechtziend
• kleurenblind
• doof
• slechthorend
• dyslexie
• concentratieproblemen
• verstandelijke handicaps
• leeftijd gerelateerde handicaps

Deze handicaps kunnen we niet behandelen.

Documenten: semantische structuur versus visuele structuur

Het oorspronkelijk idee van Tim Berners Lee, een Belg die het internet heeft ontworpen, is ontstaat uit het probleem dat informatie van andere departementen binen het CERN niet beschikbaar was. Elke departement had een eigen formaat en specifieke software om die documenten te tonen.
Had het CERN een onafhankelijk formaat dat door alle afdelingen gebruikt werd, dan was het probleem van de baan. Informatie raadplegen kon dan, zonder de meestal omslachtige software te installeren.
Het resultaat is HTML. HTML-documenten zijn in de eerste plaats tekstdocument die met de meest eenvoudige teksteditor geopend en gelezen kunnen worden. Deze documenten zijn maximaal toegankelijk in technologische termen (niet noodzakelijk voor anders-validen) .
De commerciële oorlog tussen Netscape en Microsoft om HTML in een bepaalde richting te duwen resulteerde in HTML3 waarin meerdere malen gezondigd werd tegen het oorspronkelijke principe.
Er onstonden browser specifieke extensies waardoor documenten onbereikbaar werden voor iemand met een “foute” browser. Vandaar de gekende kleine lettertjes: Enkel geschikt voor IE / Netscape.

Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”
-Tim Berners-Lee in Technology Review, July 1996

Maximale toegankelijkheid betekent dat een document op het internet door iedereen gelezen, gezien of gehoord kan worden, onafhankelijk van de gebruikte technologie, onafhankelijk van zijn beperkingen. Dan spreken we over oude browsers zoals Mosaic, speechbrowsers zoals JAWS en Home Page Reader, handheld browsers, tekstbrowsers (Lynx) enz… de lijst kan zo nog even doorgaan
Als je de lijst indeelt blijkt dat niet iedereen gebruik maakt van visueel verrrijkte systemen en dat die lijst enorm lang is. Een handheld, een speechbrowsers of een tekstbrowser zijn enkele voorbeelden van niet visuele software die toegang verschaffen tot documenten op het internet. Het feit dat die lijst zo lang is maakt het onmogelijk om iedereen en elk programma te ondersteunen. Tenzij er een standaard bestaat waar iedereen het over eens is, bvb HTML4.01

Visuele structuur

Websites, zoals we die vandaag kennen, zijn grafisch rijke documenten waarin felle kleuren, animaties, geluiden en interactieve elementen samensmelten tot een virtuele ervaring. Althans voor degene die die kleuren en animaties kunnen waarnemen, die geluiden kunne horen, degen die de juiste technologie hebben.
Het visuele aspect van een document is in weze geen structuur maar enkel een specifieke weergave van een docment. Indien dat document weinig of geen interne structuur heeft kan dit opgevangen worden door gafische aanduidingen. De funtie van een bepaalde hoofding leiden we meestal af uit het feit dat de tekst in een groter lettertype wordt weergegeven, dat er meer witte ruimte is voorzien, …
Al deze typografische conventies hebben geen betekenis voor een blinde. De visuele weergave van een hoofding is geen structurele indeling.

doc_vis_structuur.html

Semantische structuur

Wanneer we in MS Word een groot document opmaken maken we gebruik van hoofdingen, tabellen, lijsten en voetnoten. Alhoewel de meeste mensen dit enkel als een visuele indeling ervaren, wordt het document gestructureerd. . Een verhandeling van 100 pagina’s krijgt verschillende niveau’s met hoofdingen, voetnoten en tabellen en nadat alles geschreven en verbeterd is, kan je aan de lay-out werken van de lijst met stijlen die in het document gebruikt worden. De stijlen zijn onafhankelijk van de structuur gedefinieerd en kunnen verschillen indien een collega een ander standaard template (normal.dot) op zijn pc heeft staan. De structuur met de hoofdingen blijft echter zichtbaar.
Bij het maken van webpagina’s moet je gelijkaardig te werk gaan om een vlot toegankelijk document te maken. De 91 elementen die in de HTML specificatie vernoemd worden, zijn meer dan voldoende om semantisch rijk documenten te maken.
Gebruik een H1 element om een hoofding aan te duiden, een LI element om een lijst te maken, een TABLE element om tabulaire gegevens te ordenen, een P element om een paragraaf te maken.
Gebruik geen H2 hoofding bij het aanvangen van een document omdat je een kleiner hoofding wil, gebruik geen BLOCKQUOTE om tekst te laten inspringen, gebruik geen block-elementen (DIV, P, H1-5) elementen om ruimte te scheppen, maak gebruik van ALT attributen bij beelden, enz…
doc_sem_structuur.html

Voordelen van semantische structuur voor anders-validen

Speechbrowsers kunnen een webpagina voorlezen. Daarbij maken ze gebruik van de code en van de afbeelding op het scherm. Meestal is het mechanisme om de pagina te lezen een combinatie van beide.
Indien semantische markup wordt gebruikt, functioneren de elementen als aanduidingen voor de speechbrowser. Een hoofding kan bijvoorbeeld met een luidere stem of een andere intonatie uitgesproken worden. Hoofdingen, tabellen en links worden aangekondigd. Attributen met extra gegevens over een elementen (zoals ALT voor een IMG element) worden eveneens uitgesproken.

In previous versions, JAWS could be instructed to tell you when text attributes, fonts, or colors changed. It even told you when you tabbed or arrowed between different control types (e.g., from an edit field to a button). However, the method of feedback was always through speech which could occasionally become too verbose.
JAWS 5.0 has made a major break through in Windows screen reading because it now allows all kinds of information to be user-definable. Imagine being able to tell JAWS to:

• Speak bolded text in a different voice.
• Announce a meaningful message when text was italicized and underlined (such as link).
• Read all text in a particular font or color in a different language.
• Change the pitch as the font size changed.
• Use a sound to indicate that you were focused on an edit field.
• Use different sounds to indicate the state of a checkbox.
• Speak a meaningful message when text in a particular color was encountered.
• Read quoted text in a different voice.
• Use sounds to indicate capitalization.
• Indicate different amounts of indentation using sounds.
• Indicate HTML attributes on the Web using sounds or messages etc.

Extra: www.freedomscientific.com

Headings, lists, paragraphs, quotes, and inline elements such as strong and em should not be replaced with non-semantic elements like div, span or centre used with id attributes such as “heading1” to identify the element. Although this uses CSS to style the text to look like headings, lists, paragraphs, or inline elements, it is not correctly marked up as such.
Extra: www.dmag.org.uk

For an example of the <span> tag being used to style text to appear like a heading, see http://www.mcu.org.uk/articles/cssaccessproblems.
People accessing the internet by visual means alone can get a quick overview of the content of a page just by looking at the headings. People browsing the web using text-to-speech devices may also be able to navigate from heading to heading if the device can detect headings – but without appropriate markup this cannot be achieved.
Speech enabled browsers can also use explicit verbal intonation when they encounter text enclosed between HTML header tags (<h1> </h1>). This instructs the program to pause before and after a heading, and read it more slowly than the rest of the text. This helps to makes the document much clearer to understand.2

Personas

Websites ontwikkelen voor mensen die we niet kennen is vaak zeer moeilijk. Daarom hebben webdesigners en usability specialisten en marketing techniek overgenomen : peronas. Dit zijn omschrijvingen van personen die een website kunnen bezoeken. Ik zal regelmatig verwijzen naar An en Koen, 2 anders-validen met een andere achtergrond.

An

An is 21 jaar en studeert psychologie. Volgend jaar is haar laatste jaar. Zij is verlamd en zit in een gemotoriseerde rolstoel en veel praten is vermoeiend voor haar. Haar vader kocht haar een speechbrowser, Voice Express waarmee zij voornamelijk emails schrijft en af en toe ook een verhandeling. Omdat de bibliotheek zo ver is en moeilijk bereikbaar, bestelt zij boeken via het internet. Op de website van de universiteit kan zij inloggen met een gebruikersnaam en een wachtwoord. Om te navigeren geeft zij gesporken commando’s. Sommige sites zijn zeer vermoeiend omdat zij over elke navigatielink moet springen die bij de aanvang van het document worden getoond. Dit zijn soms wel 30 links.
Zij gebruikt een Siemens laptop, een headset, IE5, Office2000 en Voice Express 5.

Koen

Koen is 29 jaar en 3de lijns UNIX support. Hij is enkele jaren geleden blind geworden door een ongeval . Daar hij zeer vaardig was met het toetsenbord, is hij overgeschakeld op een braille leesregel en gebruikt hij de tekstbrowser Lynx, hij is tenslotte een UNIX admin. Via deze aangepaste technologie heeft hij vrijwel geen moeite om zijn functie verder uit te oefenen. Sommige internet en intranet pagina’s zal hij vermijden omdat de navigatie te omslachtig is, een collega zoekt het dan op en stuurt de informatie dan via email.

Technieken

HTML heeft 91 elementen en alle mogelijkheden om een HTML document toegankelijk te maken . Dit aspect is bij de conceptie van HTML bewust ingebouwd.

Beelden: IMG

Guideline 1. Provide equivalent alternatives to auditory and visual content.

Beelden hebben steeds een belangrijke rol gespeeld op het internet en zijn mede verantwoordelijk voor het success van het medium. Beelden worden echter niet alleen gebruikt om foto’s te tonen, maar ook als grafisch element zoals een pijl, knoppen, hoofdingen, of grafieken, partituren, kaarten, enz…

An en Koen openen een pagina waarin beelden zonder alt-tekst opgenomen zijn.

1. An ziet de beelden die IE laadt en heeft geen probleem
2. Koen daarentegen ziet geen beelden en krijgt enkel de naam van het bestand te horen. Omdat de tekstbrowser Lynx geen beeld kan weergeven moet de applicatie kiezen tussen gegevens die wel beschikbaar zijn, zoals de naam van het bestand.
3. Zou Koen een speechbrowser gebruiken dan heeft hij nog steeds hetzelfde probleem want zijn speechbrowser kan dat beeld ook niet interpreteren.

Het IMG element voorziet 3 attributen die een alternatieve tekst kunnen bieden.

Hieronder staat een IMG element met enkele attributen.

   <img
   src=”path/to/file/filename.extension”
   alt=”alternatieve tekst”
   title=”tooltip”
   lang=”taal ”
   londesc=”path/to/file/omschrijving.txt”
   border=”1”
   widht=”20”
   height=”20”
   name=”myImage”
   id=”myImage”
   class=”navImage”>

ALT= alternatieve tekst

Dit attribuut is verplicht volgende specificaties van HTMl4.01.

De eenvoudigste van de drie is het ALT attribuut. De inhoud van dit attribuut wordt weergegeven indien het laden van een jpg file wat langer duurt, wanneer de gebruiker het laden van beelden heeft uitgezet, of wanneer de gebruiker een niet-grafische browser gebruikt.

Alle browsers van vandaag hebben de mogelijkheid om beelden te vermijden, bijvoorbeeld om via een inbelverbinding geen onnodige bandbreedte te gebruiken.

De eerste vereiste is dus een alternatieve tekst die wanneer er geen beeld wordt weergegeven in de plaats van het beeld komt. Om het visuele aspect niet verwaarlozen gebruik je best een korte tekst die past in de ruimte die het beeld inneemt op de pagina.

Het is dus geen volledige of uitputtend omschrijving.

Zaken om te vermijden

• Speechbrowser kunnen aangeven dat er een beeld in heet document staat. Het woord “image” of “beeld” herhalen in de ALT tekst is overbodig.
• De naam van het bestand is meestal onbeduidend voor het beeld. Let op voor programma’s die standaard de naam van het bestand invullen als ALT tekst.
• Gebruik geen tekst om aan te duiden dat het beeld geladen wordt.

Voorbeelden

Bayeraspirin

TITLE=tooltip

Het title attribuut is geldig voor bijna alle HTMl elementen en dient als begeleidende informatie die opgeroepen kan worden door de gebruiker. Zowel browsers als speechbrowser kunnen deze informatie weergeven. Opera en iCab geven de informatie weer in de statusbar, IE als een tooltip en JAWS leest het samen met de ALT tekst.

Voorbeelden

Joe Clark

LONGDESC=een uitgebreidde omschrijving

Dit attribuut kan gebruikt worden om een omschrijving te geven van het beeld. De browser moet een link weerge ven naar het documetn waarin de omschrijving wordt gegeven. Op dit moment ondersteunen alleen iCab (Mac), Mozilla, NS6+ dit attribuut. IE herkent dit attribuut niet.

Gebruik van beelden in een menu, lijsten ea.

In een menu

Indien mogelijk gebruik een combinatie van gewone link tekst en CSS om grafische aspecten toe te voegen.

In een lijst

Gebruik een echt lijst met het UL of OL element. Indien niet mogelijk en er toch gebruik gemaakt wordt van een beeld gevolgd door een link, gebruik dan het ALT attribuut op het beeld om een lijst item aan te duiden: *.

Spacer

Kleine beelden om elementen op een specifiek plaats te krijgen moet je absoluut vermijden. Gebruik CSS of indien niet mogelijk TABLE elementen om alles op de juiste plaats te krijgen. Indien dit echt niet mogelijk is, gebruik dan een leeg ALT attribuut (geen spatie!).

Thumbnails

Deze kleine beelden verwijzen naar een groter te laden beeld. Extra informatie over het beeld in een Alt en TITLE attribuut kunnen de gebruiker aansporen om heet grotere beeld te laden. Eventueel de grootte van het te laden beeld toevoegen aan het TITLE attribuut.

Buttons

Indien een beeld ipv een standaard knop gebruikt wordt, moet ook dit beeld voorzien worden van een ALT attribuut.

Beelden die over heel de pagina herhaald worden

Beelden die bijvoorbeeld deel uit maken van een banner en die ruimte scheppen tussen functionele elementen hebben geen nood aan een ALT attribuut. Voorzie een ALT tekst voor het eerste beeld en gebruik een leeg ALT attribuut voor de volgende beelden.

Tekst

Elke webpagina is een eenvoudig tekstbestand dat door een browser op een specifieke manier wordt weergegegeven. Maar wat is tekst?

TAAL

Tekst maakt gebruik van een specifieke taal. Speechbrowsers herkennen het LANG attribuut van het HTML element en van andere elementen en kunnen een andere woordenboek laden met een stem om die taal uit te spreken.

Het gebruik van de attributen LANG en HREFLANG kunnen een speechbrowser helpen om de juiste woordenboek aan te spreken.

<html lang=”en”>
<a href=”sompage.com” hreflang=”nl”>

Hoofdingen en paragraphen

Tekst wordt opgedeeld in hoofdingen, maak gebruik van H1 tot H6 elementen, en paragaphen, maak gebruik van het P element.

ACRONYM en ABBR

Afkortingen en acroniemen worden in correcte technische teksten eerst voluit geschreven waarna de afkorting wordt gebruikt. De lezer weet dan wat de afkorting betekent als het in de verdere tekst wordt gebruikt.

Ook HTML kan dit weergeven:


<abbr title=”cascading Style Sheet”>CSS</abbr>


IE ondersteunt dit element niet maar je kan dit omzielen met een SPAN element.

<abbr title=”cascading Style Sheet”> <span title=”cascading Style Sheet”>CSS</span></abbr>