Keyboard accessibility – You've been doing it wrong

Keyboard AccessibilityYou’ve been doing it wrong.

Roel Van Gils ([email protected])

vrijdag 24 juni 2011

mailto:[email protected]

mailto:[email protected]

Over Mij

★ Ik ben Roel

★ AnySurfer

★ Ik maak websites (in ruil voor geld)sinds 2000. Freelance sinds 2003.


keyboard accessibility

★ Een fundamenteel onderdeel van een toegankelijke siteWCAG 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 fout


Hoe voorkomen?MUIS AAN DE KANTeN TEST HET ZELF!


Chrome / MAC


SAFARI & FIREFOX / MAC


★ Stay focused★ tabindex★ roles & states★ keyboard trap★ video controls★ skip links★ don’t!★ BUT, WAIT?★ CONCLUSIE & VRAGEN


/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */

/* remember to define focus styles! */:focus {! outline: 0;}


http://meyerweb.com/eric/tools/css/reset/


/* 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: ?????;} */




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 gebruiken


outline: none=

cursor: none


a.button { display: block; width: 100px; height: 50px; background: url(button.png) 0 0; text-indent: -10000px;}


Zonder extra CSS

a:focus { overflow: hidden;}

a:focus { outline: none; + extra stijlen!}


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; }


Vaak vergeten

★ Ook aanklikbare afbeeldingen (zoals banners) moeten een focus-indicatie krijgen.

★ <a href="…"><img src="…"></a>

★ Border, outline, glow, …


<a href="…" onfocus="this.blur()">WTF?!</a>

remove dotted outlines internet explorer


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)


hoe werkt het ook alweer?

★ Eerst worden alle elementen mét tabindex overlopen (oplopend: 1 → 32767)

★ Daarna worden alle elementen zonder tabindex overlopen.


<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>


Uw gegevens Gegevens van uw partner

Naam Naam

Voornaam Voornaam

Vegetarisch? Vegetarisch?✔ ✔

Verstuur

Home | Inschrijven | Over ons | Contact

Inschrijven


Uw gegevens Gegevens van uw partner

Naam Naam

Voornaam Voornaam

Vegetarisch? Vegetarisch?✔ ✔

Verstuur

Home | Inschrijven | Over ons | Contact

Inschrijven

tabindex="1"

tabindex="2"

tabindex="3"

tabindex="4"

tabindex="5"

tabindex="6"


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 gooien


tabindex‘GEHeime’ wapens


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 filteren


<h2><a href="/monopoly"></h2><a href=”/monopoly"><img src="…"></img></a>

<a href="/monopoly">Lees verder></a>


tabindex="-1"tabindex="-1"

tabindex="-1"

tabindex="-1"

tabindex="-1"

tabindex="-1"


<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>


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”


<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>


1

2

3

4


Internet Explorer 8 Firefox 4

Jaws 12


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?


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 activeren


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 vriend


$.fn.fixclick = function() { $(this) .attr('tabindex','0') .keyup(function(e) { if (e.keyCode == 13) $(this).click(); });};


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)


voorbeelden

★ Roles: role="…"

alert, button, dialog, menu, slider, tab…

★ States: aria-…="…"

required, busy,live,selected, describedby…


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.


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.


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.


<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>


<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>


<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>


Firefox 4 & Jaws 12


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 gebruiker


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)


1

3

4

2

65

8 9

10

7

Text


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 webpagina


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 hack


http://www.w3.org/TR/WCAG-TECHS/FLASH17.html




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)


http://simplyaccessible.com/article/keyboard-accessible-youtube-controls/






mogelijkheid 2

★ JWPlayer met HTML-knoppen

http://examples.anysurfer.be/opleiding_video/dragon_demo_accessible_JW5_JWembedder_yt.html


http://examples.anysurfer.be/opleiding_video/dragon_demo_accessible_JW5_JWembedder_yt.html#








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!


<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>


<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>


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 :focus


Don’t 1/4select="multiple"


<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>


<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>


Don’t 2/4accesskeys


<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>


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 events


Alt Alt + F, Alt + E, Alt + V, Al + D, …

Shfit + Alt ✔

Ctrl Ctrl + C, Ctrl + V, …

Shift + Esc ✔

Ctrl + ⌥ ✔

TOETSENCOMBINATIEbrowser CONFLICTEN


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)


accesskeys = flawed BY DESIGN


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 widgets


Don’t 3/4jump menus


Dus

★ Neem niet klakkeloos scripts over (zeker geen DreamWeaver-scripts)

★ Voorzie een bevestigingsknop bij een jump menu.

★ Of gebruik geen jump menu’s


Don’t 4/4Gewoon is al gek genoeg


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.


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 fallback


1. :focus {outline: none} is evil2. Screenreaders lezen je DOM, niet je HTML-bron3. tabindex="0" en tabindex="-1" zijn je vrienden4. Bereikbaar != activeerbaar (gebruik keyUp

event 13, 37, 38, 39 en 40)5. WAI-ARIA lost niet al je problemen op6. De enige écht toegankelijke video controls zijn

native of zitten buiten het Flash-object7. Maak je skip links zichtbaar8. Accesskeys zijn waardeloos9. Gebruik je gezond verstand10. Twijfels? Muis aan de kant en test het zelf


?vrijdag 24 juni 2011

Keyboard accessibility – You've been doing it wrong

Technology

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