Keyboard accessibility – You've been doing it wrong

Keyboard Accessibility
You’ve been doing it wrong.
Roel Van Gils (roel@catchup.be)

vrijdag 24 juni 2011

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

Hoe voorkomen?
MUIS AAN DE KANT
eN 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/
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>


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
Uw gegevens Gegevens van uw partner

Naam tabindex="1"
Naam tabindex="4"

Voornaam tabindex="2"
Voornaam tabindex="5"

tabindex="3" tabindex="6"

✔ Vegetarisch? ✔ Vegetarisch?

Verstuur


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


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

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


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


Jaws 12

Internet Explorer 8 Firefox 4


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>
<h1>Dit is de titel van het tweede tabblad</h1>
<p>…</p>
</div>
<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">
<p>…</p>
</div>
none;" aria-labelledby="tab-second">
<p>…</p>
</div>
none;" aria-labelledby="tab-third">
<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>
block;" aria-labelledby="tab-first">
<p>…</p>
</div>
none;" aria-labelledby="tab-second">
<p>…</p>
</div>
none;" aria-labelledby="tab-third">
<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

7

8 9

Text

2
3
4

5
6

10


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


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_JWembedd
er_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/4
select="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>
Privacy
</label>
<label>
Organisatie
</label>
<label>
Slachtoffers
</label>
</fieldset>


Don’t 2/4
accesskeys


<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


browser TOETSENCOMBINATIE CONFLICTEN

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

Shfit + Alt ✔

Ctrl Ctrl + C, Ctrl + V, …

Shift + Esc ✔

Ctrl + ⌥ ✔


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/4
jump 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/4
Gewoon 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 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 zelf


?

Keyboard accessibility – You've been doing it wrong

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Keyboard accessibility – You've been doing it wrong