Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Keyboard Accessibility                          You’ve been doing it wrong.                              Roel Van Gils (ro...
vrijdag 24 juni 2011
Over Mij                       ★ Ik ben Roel                       ★ AnySurfer                       ★ Ik maak websites (i...
keyboard accessibility                 ★ Een fundamenteel onderdeel van een                       toegankelijke site      ...
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 tr...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
vrijdag 24 juni 2011
/* http://meyerweb.com/eric/tools/css/reset/ */              /* v1.0 | 20080212 */              /* remember to define focu...
/* http://meyerweb.com/eric/tools/css/reset/                 v2.0b1 | 201101                 NOTE: WORK IN PROGRESS       ...
Twee soorten mensen                       ★ Mensen die reset.css in al hun projecten                         gebruiken en ...
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...
Zonder extra CSS                       a:focus {                         overflow: hidden;                       }        ...
vrijdag 24 juni 2011
a.button {             display: block;             width: 100px; height: 50px;             background: url(button.sprite.p...
Vaak vergeten                       ★ Ook aanklikbare afbeeldingen (zoals                         banners) moeten een focu...
<!-- ‘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 ve...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
hoe werkt het ook alweer?                       ★ Eerst worden alle elementen mét tabindex                         overlop...
<a          href="…">Hoedje van papier</a>           <a          tabindex=”4” href="…">Vier</a>           <a          tabi...
Home | Inschrijven | Over ons | Contact            Inschrijven                           Uw gegevens              Gegevens...
vrijdag 24 juni 2011
Home | Inschrijven | Over ons | Contact            Inschrijven                              Uw gegevens                  G...
wanneer nuttig?                       ★ Als je broncode logisch is opgebouwd, is een                         tabindex bijn...
tabindex                       ‘GEHeime’ wapensvrijdag 24 juni 2011
tabindex="-1"                       ★ Voorkom dat een link of formulierelement                         gefocust kan worden...
<a href=”/monopoly"><img src="…"></img></a>     <h2><a href="/monopoly"></h2>                                             ...
tabindex="-1"   tabindex="-1"            tabindex="-1"   tabindex="-1"            tabindex="-1"   tabindex="-1"vrijdag 24 ...
<a href="/monopoly">             <h2>                Zet Tongeren op het nieuwste spelbord                van Monopoly    ...
linktekst = optelsom van alle tekst (en alt-                              attributen tussen <a> en </a>              “Zet ...
<a href="/monopoly">             <h2>                Zet Tongeren op het nieuwste spelbord                van Monopoly    ...
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...
tabindex="0"              ★ Geef alles focus: headings, tabelcellen, afbeeldingen etc.                       zonder de tab...
bereiken != activeren                       ★ Dat je op Enter kan klikken om op een link                         te klikke...
vrijdag 24 juni 2011
$.fn.fixclick = function() {                        $(this)                        .attr(tabindex,0)                      ...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
wat is WAI-ARIA?                       ★ Web Acessibility Initiative - Accessible Rich                         Internet Ap...
voorbeelden                       ★ Roles: role="…"                        alert, button, dialog, menu, slider, tab       ...
In de praktijk                       ★ Dezelfde <ul> kan een lijst met tabbladen,                         een tree view of...
BROWSE-modus                       ★ Je surft met een ‘onzichtbare cursor’ op een virtuele,                          veree...
Applicatie-modus                       ★ Ook wel ‘Forms mode’ of ‘Focus mode’ genoemd                       ★ Toetsaanslag...
vrijdag 24 juni 2011
<div id="tabs">             <ul class="tabsList">               <li id="tab-first" class="current">Eerste Tab</li>        ...
<div id="tabs">             <ul class="tabsList" role="tablist">               <li id="tab-first" role="tab" aria-selected...
<div id="tabs">             <ul class="tabsList" role="tablist">               <li id="tab-first" role="tab" aria-selected...
Firefox 4 & Jaws 12vrijdag 24 juni 2011
DUS                       ★ ARIA is geen magische oplossing                       ★ Je moet nog steeds zelf je keyUp() eve...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
het probleem                       ★ In IE (<object>) en FF 4 (<embed>) kan je                         wel *in* een Flash-...
1                           7                       8           9                                Text                     ...
workaround                       ★ Geef het Flash-object een tabindex="0"                         en plaats een verborgen ...
SWFFocus.as                       ★ Meer info en download: http://www.w3.org/                         TR/WCAG-TECHS/FLASH1...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
vrijdag 24 juni 2011
Mogelijkheid 1                       ★ Voeg <button>’s toe onder je filmpje                       ★ Gebruik de YouTube of ...
http://simplyaccessible.com/article/keyboard-                                accessible-youtube-controls/vrijdag 24 juni 2...
mogelijkheid 2                       ★ JWPlayer met HTML-knoppen                         http://examples.anysurfer.be/    ...
HTML 5 video?                       ★ Native controls zijn in alle browsers                         behoorlijk toegankelij...
vrijdag 24 juni 2011
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
<p class="skiplink"><a href="#inhoud">Naar inhoud</a></p>           <nav>             <ul>               <li><a href="…">L...
<p class="skiplink"><a href="#navigatie">Naar inhoud</a></p>           <section>             <h1>Content first? Beter voor...
de waarheid over skip links                       ★ Blinden hebben geen skip links nodig op                         voowaa...
vrijdag 24 juni 2011
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
Don’t 1/4                       select="multiple"vrijdag 24 juni 2011
vrijdag 24 juni 2011
<select multiple>             <optgroup label="Justitie">               <option value="1">Veiligheid</option>             ...
<fieldset>             <legend>Justitie</legend>             <label>               <input type="checkbox" />              ...
vrijdag 24 juni 2011
Don’t 2/4                       accesskeysvrijdag 24 juni 2011
<nav>            <ul>             <li>              <a accesskey="h" href="/">Home</a>             </li>             <li> ...
Problemen                       ★ Geen afspraken of standaarden                         ★ Welke modifier keys?            ...
browser   TOETSENCOMBINATIE              CONFLICTEN                                  Alt                Alt + F, Alt + E, ...
meer problemen                       ★ In alle browsers, behalve Opera, wordt                         voorrang gegeven aan...
accesskeys = flawed BY DESIGNvrijdag 24 juni 2011
en keyup() events dan?                       ★ Maak ze optioneel (zoals Gmail het doet),                         want ze k...
Don’t 3/4                       jump menusvrijdag 24 juni 2011
<script language="JavaScript">             function MM_jumpMenu(targ,selObj,restore){ //v3.0             eval(targ+".locat...
vrijdag 24 juni 2011
Dus                       ★ Neem niet klakkeloos scripts over (zeker                         geen DreamWeaver-scripts)    ...
Don’t 4/4                       Gewoon is al gek genoegvrijdag 24 juni 2011
vrijdag 24 juni 2011
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
vrijdag 24 juni 2011
DUS                       ★ Liever niet.                       ★ Als je klant blijft aandringen:                         ★...
vrijdag 24 juni 2011
DUS                       ★ Fully keyboard accessible? Niet nodig!                       ★ Vermeld de datumnotatie (zoals ...
★ Stay focused                       ★ tabindex                       ★ roles & states                       ★ keyboard tr...
vrijdag 24 juni 2011
1.  :focus {outline: none} is evil                       2.  Screenreaders lezen je DOM, niet je HTML-bron                ...
vrijdag 24 juni 2011                       ?
Upcoming SlideShare
Loading in …5
×

Keyboard accessibility – You've been doing it wrong

3,061 views

Published on

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?

Published in: Technology, Design

Keyboard accessibility – You've been doing it wrong

  1. 1. Keyboard Accessibility You’ve been doing it wrong. Roel Van Gils (roel@catchup.be)vrijdag 24 juni 2011
  2. 2. vrijdag 24 juni 2011
  3. 3. Over Mij ★ Ik ben Roel ★ AnySurfer ★ Ik maak websites (in ruil voor geld) sinds 2000. Freelance sinds 2003.vrijdag 24 juni 2011
  4. 4. 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
  5. 5. Hoe voorkomen? MUIS AAN DE KANT eN TEST HET ZELF!vrijdag 24 juni 2011
  6. 6. Chrome / MACvrijdag 24 juni 2011
  7. 7. SAFARI & FIREFOX / MACvrijdag 24 juni 2011
  8. 8. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  9. 9. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  10. 10. vrijdag 24 juni 2011
  11. 11. /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ /* remember to define focus styles! */ :focus { ! outline: 0; }vrijdag 24 juni 2011
  12. 12. /* 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
  13. 13. 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
  14. 14. outline: none = cursor: nonevrijdag 24 juni 2011
  15. 15. vrijdag 24 juni 2011
  16. 16. a.button { display: block; width: 100px; height: 50px; background: url(button.png) 0 0; text-indent: -10000px; }vrijdag 24 juni 2011
  17. 17. Zonder extra CSS a:focus { overflow: hidden; } a:focus { outline: none; + extra stijlen! }vrijdag 24 juni 2011
  18. 18. vrijdag 24 juni 2011
  19. 19. 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
  20. 20. Vaak vergeten ★ Ook aanklikbare afbeeldingen (zoals banners) moeten een focus-indicatie krijgen. ★ <a href="…"><img src="…"></a> ★ Border, outline, glow, …vrijdag 24 juni 2011
  21. 21. <!-- ‘Fix’ voor IE 6 --> <a href="…" onfocus="this.blur()">WTF?!</a>vrijdag 24 juni 2011
  22. 22. remove dotted outlines internet explorervrijdag 24 juni 2011
  23. 23. vrijdag 24 juni 2011
  24. 24. vrijdag 24 juni 2011
  25. 25. 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
  26. 26. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  27. 27. 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
  28. 28. <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
  29. 29. Home | Inschrijven | Over ons | Contact Inschrijven Uw gegevens Gegevens van uw partner Naam Naam Voornaam Voornaam ✔ Vegetarisch? ✔ Vegetarisch? Verstuurvrijdag 24 juni 2011
  30. 30. vrijdag 24 juni 2011
  31. 31. 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
  32. 32. 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
  33. 33. tabindex ‘GEHeime’ wapensvrijdag 24 juni 2011
  34. 34. 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
  35. 35. <a href=”/monopoly"><img src="…"></img></a> <h2><a href="/monopoly"></h2> <a href="/monopoly">Lees verder></a>vrijdag 24 juni 2011
  36. 36. tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1" tabindex="-1"vrijdag 24 juni 2011
  37. 37. <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
  38. 38. 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
  39. 39. <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
  40. 40. vrijdag 24 juni 2011
  41. 41. 1 2 3 4vrijdag 24 juni 2011
  42. 42. Jaws 12 Internet Explorer 8 Firefox 4vrijdag 24 juni 2011
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. vrijdag 24 juni 2011
  47. 47. $.fn.fixclick = function() { $(this) .attr(tabindex,0) .keyup(function(e) { if (e.keyCode == 13) $(this).click(); }); };vrijdag 24 juni 2011
  48. 48. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  49. 49. 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
  50. 50. voorbeelden ★ Roles: role="…" alert, button, dialog, menu, slider, tab … ★ States: aria-…="…" required, busy,live,selected, describedby …vrijdag 24 juni 2011
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. vrijdag 24 juni 2011
  55. 55. <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
  56. 56. <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
  57. 57. <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
  58. 58. Firefox 4 & Jaws 12vrijdag 24 juni 2011
  59. 59. 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
  60. 60. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  61. 61. 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
  62. 62. 1 7 8 9 Text 2 3 4 5 6 10vrijdag 24 juni 2011
  63. 63. 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
  64. 64. 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
  65. 65. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  66. 66. vrijdag 24 juni 2011
  67. 67. 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
  68. 68. http://simplyaccessible.com/article/keyboard- accessible-youtube-controls/vrijdag 24 juni 2011
  69. 69. mogelijkheid 2 ★ JWPlayer met HTML-knoppen http://examples.anysurfer.be/ opleiding_video/ dragon_demo_accessible_JW5_JWembedd er_yt.htmlvrijdag 24 juni 2011
  70. 70. 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
  71. 71. vrijdag 24 juni 2011
  72. 72. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  73. 73. <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
  74. 74. <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
  75. 75. 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
  76. 76. vrijdag 24 juni 2011
  77. 77. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  78. 78. Don’t 1/4 select="multiple"vrijdag 24 juni 2011
  79. 79. vrijdag 24 juni 2011
  80. 80. <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
  81. 81. <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
  82. 82. vrijdag 24 juni 2011
  83. 83. Don’t 2/4 accesskeysvrijdag 24 juni 2011
  84. 84. <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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. accesskeys = flawed BY DESIGNvrijdag 24 juni 2011
  89. 89. 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
  90. 90. Don’t 3/4 jump menusvrijdag 24 juni 2011
  91. 91. <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
  92. 92. vrijdag 24 juni 2011
  93. 93. 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
  94. 94. Don’t 4/4 Gewoon is al gek genoegvrijdag 24 juni 2011
  95. 95. vrijdag 24 juni 2011
  96. 96. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  97. 97. vrijdag 24 juni 2011
  98. 98. 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
  99. 99. vrijdag 24 juni 2011
  100. 100. 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
  101. 101. ★ Stay focused ★ tabindex ★ roles & states ★ keyboard trap ★ video controls ★ skip links ★ don’t! ★ BUT, WAIT? ★ CONCLUSIE & VRAGENvrijdag 24 juni 2011
  102. 102. vrijdag 24 juni 2011
  103. 103. 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
  104. 104. vrijdag 24 juni 2011 ?

×