Fronteers — vakvereniging voor front-end developers

Webrichtlijn 52 & 53: Tabben tussen links

Voorzie in een logische volgorde van de links op de pagina. Gebruik het tabindex attribuut om van de standaard tabvolgorde van links af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van de pagina door toetsenbordgebruikers. (R-pd.8.9) Maak het tabben naar links niet onmogelijk. Verwijder niet de focus rectangle rondom een link of de mogelijkheid tot focus op een link. (R-pd.8.10)

Wanneer gebruik jij het tabindex attribuut? Is onderstaande code een goede case, omdat gebruikers misschien verwachten dat je na je gebruikersnaam kunt tabben naar je wachtwoord? Of zou je de volgorde van de markup wijzigen?

<p>
 <label for="user">Gebruikersnaam:</label>
 <input type="text" name="user" id="user" tabindex="1">
</p>
<p>
 <label for="pass">Wachtwoord:</label>
 (<a href="/wachtwoord-vergeten" tabindex="3">vergeten?</a>)
 <input type="password" name="pass" id="pass" tabindex="2">
</p>

Begrijp jij nog welke waardes je het attribuut mag geven? Tussen 1 en 32768? Tussen 0 and 32767? Of ook negatieve waardes?

Hoeveel designers en/of opdrachtgevers en/of marketingafdelingen willen de focus rectangle nog steeds niet accepteren? Ga je de discussie aan, of geef je toe en doe je :focus { outline: none; } of iets wat erop lijkt? Of het nog mooiere onfocus="this.blur()" en equivalenten?

En is dit alles wel ons probleem? Moeten we gebruikers die graag met het toetsenbord door een site navigeren niet gewoon uitleggen hoe spatial navigation werkt?

Of kunnen we niet gewoon een site compleet opnieuw maken? Eentje speciaal voor gebruikers die graag tabben?

Reacties

1 Blaise Kal op 24-09-2008 om 00:11 uur:
Volgens mij zijn gebruikers die met tab navigeren ook wel gewend om een keer extra op tab te rammen als er nog een hyperlinkje tussen twee velden zit. Ik hecht daarom niet zo'n waarde aan tabindex, maar als ik het zou gebruiken dan zou ik het doen zoals in dit voorbeeld.
2 Koen Willems op 24-09-2008 om 01:58 uur:
Op http://www.regels-stadskanaal.nl/ heb ik redelijk intensief gebruik gemaakt van de tabindex.
Waarom? Welnu, de Webrichtlijnen verlangen ook dat de content in volgorde van belangrijkheid wordt geplaats.
Dat bracht met zich mee dat ik de belangrijkste menu-onderdelen ergens onderaan in de source heb geplaatst.
Voor mensen die visueel surfen heb ik die vervolgens weer met stylesheets bovenaan op het scherm geplaatst.

Navigeren met de Tab-toets gaf, naar mijn mening, door deze volgorde in de source een onlogisch volgorde.
Vandaar de toepassing van tabindex.

Wat de focus rectangle betreft: daar ben ik snel klaar mee. Gewoon stylen dat ding! (met een achtergrondkleurtje of zo).
Ik vind de focus rectangle op een scherm in het algemeen te weinig nadrukkelijk aanwezig. Door de focus te stylen kun je juist de orientatie van een gebruiker die het toetsenbord hanteert vergroten.

(Ik moet er wel bij zeggen: als je niet oppast met die tabindex kom je van het een in het ander.)
3 Kilian Valkhof op 24-09-2008 om 11:51 uur:
Ik gebruik tabindex eigelijk nooit, zoals Koen zegt moet je het héél goed in te gaten houden om niet alsnog verwarring te zaaien onder je gebruikers.

Ik code mijn sites altijd visueel, omdat ik denk dat dat de correcte manier is. Iets wat visueel bovenaanstaat zou dat ook in de source moeten staan; websites blijven een visueel medium.

Verder geef ik focus meestal dezelfde stijl als :hover, en haal ik de outline inderdaad weg. Mijn hover styles vallen meer op dan een soort van 1px outline.
4 Koen Willems op 25-09-2008 om 00:42 uur:
@Kilian: maar als jij je html op basis van de volgorde waarop ze op het scherm komen bouwt, kom je dus in het gedrang met http://webrichtlijnen.nl/handleiding/ontwikkeling/productie/paginastructuur/body/.

Da's nou net het punt. Als je die webrichtlijn volgt kom je, afhankelijk van je design best wel vaak problemen/uitdagingen tegen.

Voordeel van de sourcevolgorde op basis van belangrijkheid dat je niet snel een verkeerde heading-hierarchie krijgt.

Wat de sourcevolgorde betreft: daar is overigens wel wat onderzoek naar gedaan, zie http://www.usability.com.au/resources/source-order.cfm
5 Sander A op 25-09-2008 om 01:09 uur:
@Koen:
Is een "direct naar navigatie"-linkje niet een beter plan? Het voorkomt in ieder geval een hoop mogelijke problemen lijkt me.
6 Krijn Hoetmer op 25-09-2008 om 08:00 uur:
Eens met Sander A. Weg met R-pd.6.2! :)
7 Kor Dwarshuis op 25-09-2008 om 08:27 uur:
Ik zou het bijna met Krijn eens zijn maar ik vind R-pd.6.2 toch een zekere schoonheid hebben, hoor Krijn.

Maar dan wil ik, als ik een overheidssite zou bouwen, wel een veto hebben over het grafisch ontwerp, en inspraak in de eisen van de klant. Anders word ik gek.

Maar goed, ik heb mijn frustratie al uitgesproken bij betreffende richtlijn zie ik, en dit is een beetje off topic dus ik stop.
8 Sander A op 25-09-2008 om 18:35 uur:
Hmm, bedoelde eigenlijk meer iets in de trant van "Weg met R-pd.8.9". Zeker met advanced layout in CSS 3 zie ik geen problemen met R-pd.6.2.
9 Henri op 25-09-2008 om 22:12 uur:
Ik ben nog steeds niet echt heel erg overtuigd van het nut van tabindex.

Ik sluit me aan bij eerdere reacties: verwarring bij bezoekers. Ik weet niet hoe jullie het doen, maar bijv. links klik ik altijd aan. Daar heb ik geen tabtoets voor nodig. Tabben lijkt me alleen relevant bij formulieren. Ik sluit me aan bij Blaise.
10 Arjan op 26-09-2008 om 16:58 uur:
Van mij mogen ze wel een soort van tabnext attribuut maken, waarmee je voor een link of invulveld kunt aangeven naar welk element (ID) de focus moet springen als je op tabt ramt.

(Heeft wel als implicatie dat je een soort van vicieuze cirkel kan krijgen, maar dat moet je gewoon niet doen.)
11 Krijn Hoetmer op 26-09-2008 om 17:08 uur:
Iets als op http://www.css3.info/preview/focus-navigation/ misschien?
12 Koen Willems op 27-09-2008 om 02:00 uur:
@Sander A
Een "direct naar navigatie"-linkje is sowieso een goed idee, maar dat lost op zich het probleem van de tab-volgorde niet op.
Als de source immers in volgorde van belangrijkheid staat en die volgorde vervolgens met CSS weer is omgegooid, krijg je een onlogische tab-volgorde (althans, dat vind ik).

@Henri
Dat kan wel zijn, maar er zijn nu eenmaal mensen die geen muis kunnen of willen gebruiken.
13 Sander A op 27-09-2008 om 03:05 uur:
@Koen:
Hoezo dan (er even van uitgaande dat je alleen de volgorde van de content en de navigatie omdraait)?

Met zo'n "direct naar content"-link kan de bezoeker dan toch kiezen waar hij/zij als eerste doorheen wil tabben: door de content (die onderaan in de code staat), of de content die als eerste komt.

Als je nog meer zaken omgooit qua volgorde heb je wellicht ook meer "direct naar..."-linkjes nodig.
14 Koen Willems op 27-09-2008 om 23:34 uur:
@Sander A
Jouw oplossing komt op zich tegemoet aan een aantal bezwaren. In die zin zou ik het sub-optimaal willen noemen.

Je hebt een volgorde die voor het navigeren met het toetsenbord niet logisch is, maar laat dmv. 'direct naar'-hyperlinks de bezoeker een keuze maken/'het corrigeren'.

Laat ik het zo zeggen: dat is me niet perfect genoeg.
Wij moeten voor een logische volgorde zorgdragen, niet onze bezoekers.
(Ik zou er haast emotioneel van worden :-) )
15 Kor Dwarshuis op 27-09-2008 om 23:55 uur:
@Koen: gewoon doen! :-)
16 Koen Willems op 28-09-2008 om 01:03 uur:
@Kor:
:-)

Overigens, we hebben het hier ook nog over het niet verwijderen van de focus(-rectangle).
Wat die focus betreft wil ik nog even kwijt dat wat mij betreft het stylen van de focus (en active) een absolute must is.
Met name veel rijksoverheidswebsites lijken er om te wedijveren die focus zoveel mogelijk te verdoezelen. Dat maakt de orientatie op een pagina haast onmogelijk.
Zie bijvoorbeeld op http://www.minvws.nl of http://www.minbzk.nl/

dus niet bijvoorbeeld:

a:hover {
color: #333;
background-color: #FFEFC9;
text-decoration: none;
border-bottom: 1px solid #666;
}

maar:

a:hover, a:active, a:focus {
color: #333;
background-color: #FFEFC9;
text-decoration: none;
border-bottom: 1px solid #666;
}

Een hele kleine moeite, waar je veel (toetsenbord-)gebruikers een groot plezier mee doet.

Het staat helaas niet in de webrichtlijnen, maar het had er in moeten staan naar mijn overtuiging!
17 Kor Dwarshuis op 29-09-2008 om 18:05 uur:
Vergeet de webrichtlijnen en de tabindex! Volgens de overheid moeten we met Flash ("breed geaccepteerde standaard") bezig:
http://www.communicatieplein.nl/Actueel/Nieuwsbrieven/Communicatieplein_Nieuwsbrieven/17_september_2008/_Webdesign_kan_rijker_en_spannender_zijn_dan_print
18 Arjan op 29-09-2008 om 20:34 uur:
Krijn: Hmm, die focus navigation lijkt me erg veel werk. Dan liever gewoon allemaal overgaan op de Opera-way-of-tabbing :)

Wat heeft iedereen toch met 'focus rectangles'. Die gestippelde lijntjes heten outlines, en zijn niet perse een rechthoek of vierkant. (Ze kunnen voor hetzelfde geld in de vorm van het Fronteers logo voorkomen.)

Verder: wat Koen zei over de :focus en :active pseudo-state.
Plaats een reactie