• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Keyboard accessibility – You've been doing it wrong
 

Keyboard accessibility – You've been doing it wrong

on

  • 2,890 views

Op de #fronteers meetup van 23 juni 2011 vertelde ik een uurtje over de typische valkuilen in verband met keyboard accessibility. Wat loopt er zoals mis en wat doe je eraan?

Op de #fronteers meetup van 23 juni 2011 vertelde ik een uurtje over de typische valkuilen in verband met keyboard accessibility. Wat loopt er zoals mis en wat doe je eraan?

Statistics

Views

Total Views
2,890
Views on SlideShare
2,889
Embed Views
1

Actions

Likes
10
Downloads
18
Comments
2

1 Embed 1

http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Keyboard accessibility – You've been doing it wrong Keyboard accessibility – You've been doing it wrong Presentation Transcript

    • Keyboard Accessibility You’ve been doing it wrong. Roel Van Gils (roel@catchup.be)vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • Over Mij ★ Ik ben Roel ★ AnySurfer ★ Ik maak websites (in ruil voor geld) sinds 2000. Freelance sinds 2003.vrijdag 24 juni 2011
    • keyboard accessibility ★ Een fundamenteel onderdeel van een toegankelijke site WCAG Guideline 2.1: “Keyboard Accessible: Make all functionality available from a keyboard” ★ Voor bezoekers met een motorische of visuele handicap, muishaters, mobiele (!) surfers en power users ★ Het lijkt een no-brainer, maar toch gaat het vaak foutvrijdag 24 juni 2011
    • Hoe voorkomen? MUIS AAN DE KANT eN TEST HET ZELF!vrijdag 24 juni 2011
    • Chrome / MACvrijdag 24 juni 2011
    • SAFARI & FIREFOX / MACvrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ /* remember to define focus styles! */ :focus { ! outline: 0; }vrijdag 24 juni 2011
    • /* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE: WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ /* remember to define visible focus styles! :focus { ! outline: ?????; } */vrijdag 24 juni 2011
    • Twee soorten mensen ★ Mensen die reset.css in al hun projecten gebruiken en zich niet bewust zijn van het probleem ★ Mensen die een afkeer hebben van de ‘dotted outline’ en doelbewust geen focus- stijlen gebruikenvrijdag 24 juni 2011
    • outline: none = cursor: nonevrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • a.button { display: block; width: 100px; height: 50px; background: url(button.png) 0 0; text-indent: -10000px; }vrijdag 24 juni 2011
    • Zonder extra CSS a:focus { overflow: hidden; } a:focus { outline: none; + extra stijlen! }vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • a.button { display: block; width: 100px; height: 50px; background: url(button.sprite.png) 0 0; text-indent: -10000px; } a.button:hover, a.button:focus { outline: none; background: url(button.sprite.png) 0 -50px; }vrijdag 24 juni 2011
    • Vaak vergeten ★ Ook aanklikbare afbeeldingen (zoals banners) moeten een focus-indicatie krijgen. ★ <a href="…"><img src="…"></a> ★ Border, outline, glow, …vrijdag 24 juni 2011
    • <!-- ‘Fix’ voor IE 6 --> <a href="…" onfocus="this.blur()">WTF?!</a>vrijdag 24 juni 2011
    • remove dotted outlines internet explorervrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • onthoud ★ Stijl je je :hover? Stijl dan ook je :focus ★ Wees creatief, maar vertrouw niet enkel op kleur ★ Vergeet gelinkte afbeeldingen niet! ★ Vertrouw geen forum posts uit 2003. Weet welke code je gebruikt (reset.css, grid frameworks en boilerplates)vrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • hoe werkt het ook alweer? ★ Eerst worden alle elementen mét tabindex overlopen (oplopend: 1 → 32767) ★ Daarna worden alle elementen zonder tabindex overlopen.vrijdag 24 juni 2011
    • <a href="…">Hoedje van papier</a> <a tabindex=”4” href="…">Vier</a> <a tabindex=”3” href="…">Drie</a> <a tabindex=”2” href="…">Twee</a> <a tabindex=”1” href="…">Een</a>vrijdag 24 juni 2011
    • Home | Inschrijven | Over ons | Contact Inschrijven Uw gegevens Gegevens van uw partner Naam Naam Voornaam Voornaam ✔ Vegetarisch? ✔ Vegetarisch? Verstuurvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • Home | Inschrijven | Over ons | Contact Inschrijven Uw gegevens Gegevens van uw partner Naam tabindex="1" Naam tabindex="4" Voornaam tabindex="2" Voornaam tabindex="5" tabindex="3" tabindex="6" ✔ Vegetarisch? ✔ Vegetarisch? Verstuurvrijdag 24 juni 2011
    • wanneer nuttig? ★ Als je broncode logisch is opgebouwd, is een tabindex bijna altijd overbodig. ★ Nuttig voor ★ Legacy code (tabellen) ★ ‘Content first’ of navigatieblokken samenvoegen zonder de broncode overhoop te hoeven gooienvrijdag 24 juni 2011
    • tabindex ‘GEHeime’ wapensvrijdag 24 juni 2011
    • tabindex="-1" ★ Voorkom dat een link of formulierelement gefocust kan worden ★ element.focus() blijft gewoon werken ★ In combinatie met JavaScript: een handig hulpmiddel voor het bouwen van UI widgets met ARIA-ondersteuning ★ Ook handig om dubbele links te filterenvrijdag 24 juni 2011
    • <a href=”/monopoly"><img src="…"></img></a> <h2><a href="/monopoly"></h2> <a href="/monopoly">Lees verder></a>vrijdag 24 juni 2011
    • tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1"vrijdag 24 juni 2011
    • <a href="/monopoly"> <h2> Zet Tongeren op het nieuwste spelbord van Monopoly </h2> <figure>   <img src="monopoly.png" alt="Monopoly" />   <figcaption>Spelbord</figcaption> </figure> <p> Tongeren komt in aanmerking om een plaats te veroveren op het spelbord van de nieuwste editie van Monopoly België. </p> <p class="more">Lees meer…</p> </a>vrijdag 24 juni 2011
    • linktekst = optelsom van alle tekst (en alt- attributen tussen <a> en </a> “Zet Tongeren op het nieuwste spelbord van Monopoly Monopoly Spelbord Tongeren komt in aanmerking om een plaats te veroveren op het spelbord van de nieuwste editie van Monopoly België. Lees meer”vrijdag 24 juni 2011
    • <a href="/monopoly"> <h2> Zet Tongeren op het nieuwste spelbord van Monopoly </h2> <figure>   <img src="monopoly.png" alt="Monopoly" />   <figcaption>Spelbord</figcaption> </figure> <p> Tongeren komt in aanmerking om een plaats te veroveren op het <a href=”/spelbord”>spelbord</a> van de nieuwste editie van Monopoly België. </p> <p class="more">Lees meer…</p> </a>vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • 1 2 3 4vrijdag 24 juni 2011
    • Jaws 12 Internet Explorer 8 Firefox 4vrijdag 24 juni 2011
    • DUS, BLOCK LEVEL <a> ★ Lange (verwarrende) links in linklijst van Jaws, NVDA en VoiceOver. ★ Nested links → ‘DOM Vomit’ → verwart screenreaders én je eigen scripts ★ Mogelijk alternatief: CSS (truc met position: absolute, z-index en overlappende transparante padding) ★ Gevolgen voor je SEO?vrijdag 24 juni 2011
    • tabindex="0" ★ Geef alles focus: headings, tabelcellen, afbeeldingen etc. zonder de tabvolgorde te beïnvloeden. ★ Nuttig om pagina-onderdelen te kunnen bereiken waar een actie aan vasthangt en die niet standaard bereikbaar zijn. ★ Voor ‘gewone’ links, gebruik je uiteraard <a href=”...”> ★ Ook gebruiken als je <span role="button"> gebruikt (!) ★ Addertje onder het gras: kunnen focussen betekent niet noodzakelijk kunnen activerenvrijdag 24 juni 2011
    • bereiken != activeren ★ Dat je op Enter kan klikken om op een link te klikken of op spatie om een checkbox aan te vinken, is een browser feature ★ Geef je een tabindex=”0” aan een *ander* element (div, span), dan wordt het *jouw* verantwoordelijkheid ★ KeyUp event 13 (Enter) is je vriendvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • $.fn.fixclick = function() { $(this) .attr(tabindex,0) .keyup(function(e) { if (e.keyCode == 13) $(this).click(); }); };vrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • wat is WAI-ARIA? ★ Web Acessibility Initiative - Accessible Rich Internet Applications ★ Sinds 18 januari: W3C Candidate Recommendation ★ Een set afspraken (classNames) om de rol, de status en de eigenschappen van custom UI widgets kenbaar te maken aan AT ★ Een extra laag je semantiek (zoals microformats)vrijdag 24 juni 2011
    • voorbeelden ★ Roles: role="…" alert, button, dialog, menu, slider, tab … ★ States: aria-…="…" required, busy,live,selected, describedby …vrijdag 24 juni 2011
    • In de praktijk ★ Dezelfde <ul> kan een lijst met tabbladen, een tree view of zelfs een volume slider zijn. Met de juiste role en state kondigt een screenreader de juiste zaken aan. ★ Het enige wat je screenreader doet, is switchen naar Application mode.vrijdag 24 juni 2011
    • BROWSE-modus ★ Je surft met een ‘onzichtbare cursor’ op een virtuele, vereenvoudigde kopie van het DOM ★ Alle toetsaanslagen gaan naar de screenreader ★ h = volgende heading ★ u = volgende niet-bezochte link ★ v = volgende bezochte link ★ → = volgende letter (of woord) ★ ↓ = volgende ‘lijn’ (meestal DOM-node) ★ etc.vrijdag 24 juni 2011
    • Applicatie-modus ★ Ook wel ‘Forms mode’ of ‘Focus mode’ genoemd ★ Toetsaanslagen gaan gewoon naar de browser, maar er is wel audio- en braille-feedback. ★ De screenreader beslist zelf wanneer er geschakeld moet worden tussen browse- en applicatiemodus. Bvb.: ★ Als je in een formulierveld terecht komt ★ Als je in een ARIA-enabled widget terechtkomt ★ Ah ja, want anders worden je keyUp() events niet gedetecteerd en kan je geen letter h of l intikken in een tekstveld etc.vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • <div id="tabs"> <ul class="tabsList"> <li id="tab-first" class="current">Eerste Tab</li> <li id="tab-second">Tweede Tab</li> <li id="tab-third">Derde Tab</li> </ul> <div class="tabPanel" style="display: block;"> <h1>Dit is de titel van het eerste tabblad</h1> <p>…</p> </div> <div class="tabPanel" style="display: block;"> <h1>Dit is de titel van het tweede tabblad</h1> <p>…</p> </div> <div class="tabPanel" style="display: block;"> <h1>Dit is de titel van het derder tabblad</h1> <p>…</p> </div> </div>vrijdag 24 juni 2011
    • <div id="tabs"> <ul class="tabsList" role="tablist"> <li id="tab-first" role="tab" aria-selected="true” class="current">Eerste Tab</li> <li id="tab-second" role="tab" aria-selected="false">Tweede Tab</li> <li id="tab-third" role="tab" aria-selected="false">Derde Tab</li> </ul> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: block;" aria-labelledby="tab-first"> <h1>Dit is de titel van het eerste tabblad</h1> <p>…</p> </div> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: none;" aria-labelledby="tab-second"> <h1>Dit is de titel van het tweede tabblad</h1> <p>…</p> </div> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: none;" aria-labelledby="tab-third"> <h1>Dit is de titel van het derder tabblad</h1> <p>…</p> </div> </div>vrijdag 24 juni 2011
    • <div id="tabs"> <ul class="tabsList" role="tablist"> <li id="tab-first" role="tab" aria-selected="true" tabindex="0” class="current">Eerste Tab</li> <li id="tab-second" role="tab" aria-selected="false" tabindex="-1">Tweede Tab</li> <li id="tab-third" role="tab" aria-selected="false" tabindex="-1">Derde Tab</ li> </ul> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: block;" aria-labelledby="tab-first"> <h1>Dit is de titel van het eerste tabblad</h1> <p>…</p> </div> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: none;" aria-labelledby="tab-second"> <h1>Dit is de titel van het tweede tabblad</h1> <p>…</p> </div> <div class="tabPanel" role="tabpanel" aria-hidden="false" style="display: none;" aria-labelledby="tab-third"> <h1>Dit is de titel van het derder tabblad</h1> <p>…</p> </div> </div>vrijdag 24 juni 2011
    • Firefox 4 & Jaws 12vrijdag 24 juni 2011
    • DUS ★ ARIA is geen magische oplossing ★ Je moet nog steeds zelf je keyUp() events scripten (maar dat deed je sowieso al voor keyboard users *zonder* screenreader!) ★ ARIA helpt screenreaders alleen door: ★ naar applicatiemodus te switchen ★ Nuttige semantische info te communiceren aan de gebruikervrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • het probleem ★ In IE (<object>) en FF 4 (<embed>) kan je wel *in* een Flash-object tabben ★ In andere browsers moet je op het object klikken (met de muis!) voor je er met het toetsenbord in kan navigeren ★ Sowieso beland je in een eindeloze loop *binnen* het Flash-object (als deze hotspots bevat tenminste)vrijdag 24 juni 2011
    • 1 7 8 9 Text 2 3 4 5 6 10vrijdag 24 juni 2011
    • workaround ★ Geef het Flash-object een tabindex="0" en plaats een verborgen link (met een id) net boven en onder het Flash-object ★ Gebruik SWFFocus.as (ActionScript class) in je FLA-project ★ Die detecteert het einde van een tabcyclus en voert een een stukje JavaScript (focus()) uit op de webpaginavrijdag 24 juni 2011
    • SWFFocus.as ★ Meer info en download: http://www.w3.org/ TR/WCAG-TECHS/FLASH17.html ★ Probleem: het werkt enkel met je eigen Flash movies ★ Het is een hackvrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • Mogelijkheid 1 ★ Voeg <button>’s toe onder je filmpje ★ Gebruik de YouTube of DailyMotion API voor play, pause, rewind en om het volume te regelen. ★ Stijl de <button>’s en positioneer ze netjes bovenop de Flash controls (gebruik een wrapper <div> als positioning context)vrijdag 24 juni 2011
    • http://simplyaccessible.com/article/keyboard- accessible-youtube-controls/vrijdag 24 juni 2011
    • mogelijkheid 2 ★ JWPlayer met HTML-knoppen http://examples.anysurfer.be/ opleiding_video/ dragon_demo_accessible_JW5_JWembedd er_yt.htmlvrijdag 24 juni 2011
    • HTML 5 video? ★ Native controls zijn in alle browsers behoorlijk toegankelijk ★ … behalve in Safari 5 :( Kwestie van tijd ★ Maar! Je kan de knoppen wel scripten natuurlijk :) ★ DOEN!vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • <p class="skiplink"><a href="#inhoud">Naar inhoud</a></p> <nav> <ul> <li><a href="…">Lorem</a></li> <li><a href="…">Ipsum</a></li> <li><a href="…">Dolor</a></li> </ul> </nav> <section id="content"> <h1>Ah, de échte inhoud!</h1> <p>Etiam porta sem malesuada magna mollis euismod.</p> </section>vrijdag 24 juni 2011
    • <p class="skiplink"><a href="#navigatie">Naar inhoud</a></p> <section> <h1>Content first? Beter voor je SEO?</h1> <p>Etiam porta sem malesuada magna mollis euismod.</p> </section> <nav id="navigatie”> <ul> <li><a href="…">Lorem</a></li> <li><a href="…">Ipsum</a></li> <li><a href="…">Dolor</a></li> </ul> </nav>vrijdag 24 juni 2011
    • de waarheid over skip links ★ Blinden hebben geen skip links nodig op voowaarde dat je pagina netjes is opgebouwd (koppen en lijsten) ★ Toch kunnen ze nuttig zijn! Maak ze dan wel voor iedereen zichtbaar (voor mobiele surfers, voor slechtzienden) of desnoods zichtbaar bij :focusvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • Don’t 1/4 select="multiple"vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • <select multiple> <optgroup label="Justitie"> <option value="1">Veiligheid</option> <option value="2">Privacy</option> <option value="3">Organisatie</option> <option value="4">Slachtoffers</option> </optgroup> </select>vrijdag 24 juni 2011
    • <fieldset> <legend>Justitie</legend> <label> <input type="checkbox" /> Veiligheid </label> <label> <input type="checkbox" /> Privacy </label> <label> <input type="checkbox" /> Organisatie </label> <label> <input type="checkbox" /> Slachtoffers </label> </fieldset>vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • Don’t 2/4 accesskeysvrijdag 24 juni 2011
    • <nav> <ul> <li> <a accesskey="h" href="/">Home</a> </li> <li> <a accesskey="d" href="/diensten">Home</a> </li> <li> <a accesskey="c" href="/contact">Contact</a> </li> </ul> </nav>vrijdag 24 juni 2011
    • Problemen ★ Geen afspraken of standaarden ★ Welke modifier keys? ★ Welke accesskeys voor welk soort links? ★ Vroeg of laat conflicteren ze ★ Met browser shortcuts ★ Met AT shortcuts ★ Met keyUp eventsvrijdag 24 juni 2011
    • browser TOETSENCOMBINATIE CONFLICTEN Alt Alt + F, Alt + E, Alt + V, Al + D, … Shfit + Alt ✔ Ctrl Ctrl + C, Ctrl + V, … Shift + Esc ✔ Ctrl + ⌥ ✔vrijdag 24 juni 2011
    • meer problemen ★ In alle browsers, behalve Opera, wordt voorrang gegeven aan accesskeys ★ Geen enkele browser, behalve Opera, nodigt ze (native) aan. ★ Language issues (Nederlands: Alt + e, Alt +w, Alt + b, Alt + f, Alt + x, Alt + h)vrijdag 24 juni 2011
    • accesskeys = flawed BY DESIGNvrijdag 24 juni 2011
    • en keyup() events dan? ★ Maak ze optioneel (zoals Gmail het doet), want ze kunnen ook conflicteren met AT shortcuts. Neem ‘u’: ★ Gmail → Terug naar lijst met conversaties ★ Jaws → Volgende niet-bezochte link ★ Uitzondering: Esc (voor lightboxes) en als onderdeel van ARIA widgetsvrijdag 24 juni 2011
    • Don’t 3/4 jump menusvrijdag 24 juni 2011
    • <script language="JavaScript"> function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location="+selObj.options [selObj.selectedIndex].value+""); if (restore) selObj.selectedIndex=0; } </script> <select name="select" onChange="MM_jumpMenu(parent,this,1)"> <option value="/nl" lang=”nl” hreflang=”nl”> Nederlands </option> <option value="/fr" lang=”fr” hreflang=”fr”> Français </option> <option value="/en" lang=”en” hreflang=”en”> English </option> </select> ! !vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • Dus ★ Neem niet klakkeloos scripts over (zeker geen DreamWeaver-scripts) ★ Voorzie een bevestigingsknop bij een jump menu. ★ Of gebruik geen jump menu’svrijdag 24 juni 2011
    • Don’t 4/4 Gewoon is al gek genoegvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • DUS ★ Liever niet. ★ Als je klant blijft aandringen: ★ Met CSS (en/of JavaScript) kan je ieder uitklapmenu toetsenbordvriendelijk maken. ★ Maar is dat wel altijd nodig? Niet als het submenu herhaald wordt op de onderliggende pagina.vrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • DUS ★ Fully keyboard accessible? Niet nodig! ★ Vermeld de datumnotatie (zoals dd/mm/jjjj) ★ Laat mensen een datum intikken (geen disabled-attribuut op het tekstveld!) ★ Go native (HTML 5), maar zorg voor een fallbackvrijdag 24 juni 2011
    • ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
    • vrijdag 24 juni 2011
    • 1. :focus {outline: none} is evil 2. Screenreaders lezen je DOM, niet je HTML-bron 3. tabindex="0" en tabindex="-1" zijn je vrienden 4. Bereikbaar != activeerbaar (gebruik keyUp event 13, 37, 38, 39 en 40) 5. WAI-ARIA lost niet al je problemen op 6. De enige écht toegankelijke video controls zijn native of zitten buiten het Flash-object 7. Maak je skip links zichtbaar 8. Accesskeys zijn waardeloos 9. Gebruik je gezond verstand 10. Twijfels? Muis aan de kant en test het zelfvrijdag 24 juni 2011
    • vrijdag 24 juni 2011 ?