In deze nieuwsbrief
Dexia DirectNet en vijf andere websites verdienden de voorbije weken het label. In een technisch artikel ontrafelen we de geheimen van het tabindex-attribuut en we nodigen u uit op een gratis werkbijeenkomst in Brussel.
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 liefst zes websites het AnySurferlabel.
Dexia DirectNet
Met gepaste trots heeft Dexia vorige week aangekondigd dat DirectNet, Dexia’s webtoepassing voor online-bankieren, het AnySurferlabel heeft verdiend.
In onze nieuwsbrief van november las je al dat online bankieren voor blinden en slechtzienden pas interessant wordt als ook de apparaatjes voor beveiligde toegang (zoals een kaartlezer of een digipass) toegankelijk gemaakt worden. Klanten van Dexia kunnen nu gratis zo’n sprekende digipass met een extra groot schermpje bekomen. Ben je zelf klant bij Dexia? Doe hierover dan navraag bij je kantoor.
Website Dexia DirectNet (enkel voor Dexia-klanten)
Woon- en Zorgcentrum Heilig Hart
Het woon- en zorgcentrum Heilig Hart is een residentiële ouderenvoorziening uit Oudenaarde en biedt huisvesting aan 144 bewoners.
Op de site vind je alle informatie omtrent de zorg- en dienstverlening en het leven binnen de voorziening. Je kan er praktische gegevens opzoeken over de dagprijzen, kosten, de kamers etc. U krijgt eveneens een beeld van het sfeervol woon- en leefklimaat aan de hand van vele foto's en een overzicht van de activiteiten.
Welzijn en Justitie
Complementair aan het federaal veiligheids- en strafuitvoeringsbeleid voert de Vlaamse regering een omvattend welzijnsgericht beleid rond criminaliteit, onveiligheid en slachtofferzorg. Op de website lees je er alles over.
Algemeen beleid Onderwijs en Vorming
Op deze website vind je beleidsbrieven, beleidsnota’s en toespraken van de Vlaamse minister van onderwijs.
Taaladvies (intranet)
Op deze Intranetsite vinden Vlaamse ambtenaren een schat aan taaltips.
Website Taaladvies (enkel beschikbaar op het interne netwerk van het ministerie van de Vlaamse Gemeenschap)
Education in Flanders
Op deze website vinden geïnteresseerden Engelstalige informatie over het Vlaams onderwijslandschap, het gebruik van ICT in ons onderwijs en informatie over The Belgian Department Of Education of the Dutch speaking Community.
Gratis werkbijeenkomst webtoegankelijkheid in Brussel
Met de eigen opgedane ervaring in het achterhoofd, organiseert SoCiuS (Steunpunt voor Sociaal-Cultureel Volwassenenwerk) op 29 maart een werkbijeenkomst voor organisaties die op problemen of knelpunten stuiten bij het behalen van het AnySurferlabel.
De gratis bijeenkomst vindt plaats in de kantoren van SoCiuS, Gallaitstraat 86 te Brussel.
Op het programma:
- Toelichting bij het concept door Roel Van Gils
- Illustratie van de problematiek met socius.be als gevalsstudie
- Inventaris van vragen en problemen bij de aanwezige organisaties
- Afspraken omtrent opvolging
Deze bijeenkomst richt zich op de eerste plaats tot webmasters en webverantwoordelijken van organisaties voor personen met een handicap. Maar ook andere organisaties met belangstelling voor het thema zijn welkom. Vanuit SoCiuS zal deze bijeenkomst begeleid worden door de ICT-coördinator/webmaster Hugo Callens.
Meer informatie en een inschrijvingsformulier op de website van Socius
Kijk uit met die tabindex!
In onze richtlijnenset is een ijkpunt gewijd aan het tabindex-attribuut: Tabvolgorde stemt overeen met de zichtbare structuur. We merken dat dit HTML-attribuut vaak verkeerd gebruikt wordt. In dit artikel proberen we daarom een en ander te verduidelijken.
Hoe werkt het?
De tabvolgorde is de volgorde waarin elementen focus krijgen als je de muis aan de kant legt en de tab-toets gebruikt om over een pagina te navigeren. Dat is de manier waarop blinden ondermeer surfen.
Met het tabindex-attribuut kan de maker van een website bepalen in welke volgorde pagina-elementen focus krijgen. Voorbeelden vind je hier: Forms in HTML documents.
De enige HTML-elementen die een tabindex-attribuut kunnen krijgen, zijn <a> en <area> voor hyperlinks, <button>, <input>, <select> en <textarea> voor formulierelementen en <object> voor het inbedden van multimedia.
Als het tabindex-attribuut niet is gebruikt, zal bij toetsenbordnavigatie elk van deze elementen afwisselend focus krijgen en in de volgorde waarin ze in de broncode voorkomen. Meestal is dit een logische volgorde en is het aanbrengen van tabindexes dus overbodig.
Waar schuilt het gevaar?
Het tabindex-attribuut is een hulpmiddel voor die enkele gevallen waarin de logische tabvolgorde niet overeenstemt met de volgorde in de broncode. Dit zal doorgaans het gevolg zijn van een layoutbeslissing. Op deze ijkpuntpagina vindt u een uitgewerkt voorbeeld.
Het is raadzaam om geen tabindexes te gebruiken als de tabvolgorde in orde is. Het gevaar is namelijk dat men aan enkele formuliervelden een tabindex vergeet toe te kennen. Browsers zitten zo in elkaar dat eerst alle elementen met een tabindex-attribuut worden doorlopen in oplopende volgorde en daarna pas alle elementen zonder tabindex-attribuut. Als elk formulierelement behalve de verzendknop een tabindex krijgt, kan men het formulier probleemloos invullen, maar drukt men na het laatste formulierveld op tab, dan komt men niet bij de verzendknop terecht zoals verwacht, maar bij de allereerste hyperlink op de pagina. Heel vervelend is dat.
Een voorbeeld
Nemen we even www.google.be als voorbeeld.
1. Tabindex is niet gebruikt.
Een toetsenbordgebruiker moet zes keer op tab drukken voordat hij bij het invoerveld komt. Achtereenvolgens gaat de focus naar de links aanmelden, afbeeldingen, discussiegroepen, nieuws en meer. Daarna bereiken we het invoerveld en daarna de zoekknop.
2. Het invoerveld en de zoekknop krijgen tabindex="1"
Na de eerste druk op de tabtoets komt men nu bij het invoerveld terecht en daarna bij de zoekknop. Drukt men nogmaals op tab, dan bereikt men de link aanmelden.
3. Alle formuliervelden krijgen een tabindex-attribuut
Behalve het invoerveld en de zoekknop zijn er echter nog formuliervelden op deze pagina. Wie een screenreader of een sterke vergroting gebruikt, heeft met de vorige twee methoden waarschijnlijk niet opgemerkt dat er ook nog een keuze is tussen ‘zoeken op Internet’, ‘zoeken in het Nederlands’ en ‘zoeken in Belgische pagina's’.
De oplossing is om het invoerveld tabindex="1" te geven, de drie radiobuttons tabindex="2" en beide knoppen tabindex="3".
Als een toetsenbordgebruiker nu de site bezoekt, komt hij bij de eerste druk op de tabtoets terecht in het invoerveld, vervolgens kan hij zijn keuze specificeren en daarna de zoekknop activeren. Dit lijkt ons de meest logische tabvolgorde voor Google.be. Hoewel de radio-buttons elders in de broncode staan, kunnen we ze met behulp van tabindex toch focus geven op de meest logische plaats in de tabvolgorde.
Samengevat
- De meeste formulieren hebben geen tabindex nodig.
- Besef dat elementen met een tabindex-attribuut altijd eerst focus krijgen en pas daarna de andere elementen van het document. Dat kan leiden tot onverwachte bokkesprongen als niet alle in aanmerking komende elementen een tabindex gekregen hebben.
- Als je tabindexes toevoegt aan formulierelementen, let er dan op dat je geen enkel element van het type <a>, <area>, <button>, <input>, <select>, <textarea> of <object> vergeet.
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:
- 13/03/07: Aanwezigheid van lettertypes detecteren met JavaScript
- 13/03/07: Accessify.com op XWSW 2007
- 12/03/07: Straffe kaakspieren
- 09/03/07: Over het samenspel tussen CSS en JavaScript
- 05/03/07: DocArch zoekt een nieuwe collega
- 22/02/07: Opleiding Mediacentrum
- 19/02/07: Kleurendetector voor je GSM
- 14/02/07: Graceful Degradation versus Progessive Enhancement