3 / 76
Tři weby ze 76 projektů, které mi prošly pod rukama při hodnocení letošního Interzenu zvýrazňují odkazy při ovládání klávesnicí.
O několik webů více používá odkazy pro přeskočení navigace, ale jen zlomek z nich ho dává k dispozici i uživatelům s klávesnicí či PDAčkem. Výsledek – máme co dohánět.
Ovládání webu klávesnicí
Zkuste si chvíli mačkat na svém webíku tab – okolo odkazů se vytvoří (nebo někdy vůbec nevytvoří) tečkovaná linka. Silnozrakému vycvičenému uživateli to stačí, ale kdybych měl o trochu horší zrak, tak si linky osobně na většině webů nevšimnu – přebijí ji jiné podněty.
Pro zlepšení tohoto klávesnicového stavu stačí málo – na konci ladění každého projektu si projít svůj CSS styl a přidat za každý odkaz :hover ještě dvě stejné definice s :active (pro IE) a :focus (pro moderní prohlížeče). Zabere to u 1k řádků CSS asi 15 minut koderského času – tedy něco jako vymočení se do rybníka u větších projektů, či flus do kaluže u menších.
Prakticky tedy definici #menu ul a:hover {} změníme na #menu ul
a:hover, #menu ul a:active, #menu ul a:focus {} pro všechny definice
vašeho CSS. Jestliže chcete pomoci klávesnicářům ještě více, tak dejte
definice active a focus stavu samostatně a invertujte barvu pozadí a textu
odkazu (v případě textových odkazů). Odkaz tak bude mnohem
výraznější.
Přeskakovací odkazy
Nevidomí, nevidomí, všude samí nevidomí. Vytvářet odkazy pro skok na významné bloky na webu je dobré pro nevidomé, ale i pro větší skupinu dalších uživatelů, kteří by je mohli využít. Třeba již zmínění klávesnicáři, či uživatelé PDA – to je ovšem musíte zobrazit v pravou chvíli.
5 pravidel pro přeskakovací odkazy:
- odkazy musí být vždy na začátku HTML stránky (jinak nemá praktický význam, nesmějte se, viděl jsem je na konci více než jednou)
- odkazy musí být skryty jinak než display:none, protože pak ho ignorují čtečky
- web nesmí používat TABINDEX (jinak si kliknete na přeskakovací odkaz a dostanete se opět do tabindexového koloběhu)
- odkazy se musí zobrazit při :focus a :active (např. tak, že si ho napozicujete doprostřed hlavičky – viz. třeba Klinické produkty)
- odkazy by se měly zobrazit i při vypnutých obrázcích / zapnutém CSS – pro výše zmíněná PDAčka (tj. je dobré ho ukrýt za nějakým jiným elementem přímo v hlavičce – ale osobně jsem toto zatím nikde nepoužil a svoje skryté odkazy pozicuju mimo obrazovku)
Pozn. na závěr: tato verze Filova blogu nemá žádné přeskakovací odkazy, zvýrazňování pro klávesnicáře, ani jiné podobné vychytávky. Sypu si popel na hlavu a vyřeším to s dalším redesignem. Aspoň vidíte, že redesign není vždy upgrade.. :-) – a potvrzuje to klesající úroveň blogu. Muhehe.
Související články
- Přístupnost: Přeskakovací odkazy (Filův blog)
- Přeskakovací odkazy nejsou jen pro nevidomé (David Špinar)
- Redesign CSS Notes (Mezzoblue.com)
Komentáře
Filosofe, hm… Zkoušel jsi tu svou teorii o active/focus ve skutečnosti? Co tak teď na vlastní kůži vidím, tak IE6 ani FF nic takového k tabovému přepínání mezi odkazy nepotřebuje… Nebo mi něco uniká?
[1] nu.. ale celý web není jen formulář, ne? A focus se týká i formulářových polí, když už jsme u toho..
[2] uniká, uniká.. když článek nestačí, zkus Google :-)
Vždycky jsem si říkal, k čemu je ten :active odkaz, když po kliknutí stejně trvá jen zlomek sekundy, kdy se nastyluje a pak se hned změní stránka. Nyní budu moct spoustě webdesignerů nadávat, až zase budu serfovat jen pomocí klávesnice a nebudu moci najít, kde jsem. Třeba a:active, a:focus { border: 2px solid #FF0000; } by měla být defaultní vlastnost každého prohlížeče nebo alespoň součást každého stylu. Díky Filosofe!
Popravdě, nemám chuť si to hledat, když to můžeš říct jednou větou… Chytrému napověz, říká se. Díky :-)
Jen přidám mé čerstvé pozorování – aby výše zmíněné (pro mě běžné) chování fungovalo v Safari, je třeba zatrhnout spešl políčko v opšns (v preferences->advanced). Defaultně se tabem v Safari protáčí jen formulářová pole.
//Safari 3.0.2 Win
[6] To v Opeře taky… Jen nevím, je li tam v opšns také nějaké zaškrtávátko. Třeba se taby prolítávaj nějak jinak, co já vím.
[7] v Opeře se mezi odkazy prochází přes Shift + šipky. Včetně šipek doleva a doprava. Nejde totiž o cyklení mezi odkazy v pořadí, v jakém jsou zapsány v dokumentu, ale o plnohodnotnou plošnou navigaci.
Tedy jako obvykle, Opera to dělá trošku jinak a o třídu lépe.
Přínosný článek, díky, ale přestaň už s tou sebelítostí (klesající úroveň blogu a tak)..
Sebelítost? Sebelítost? Já si z toho dělám nehoráznou **del :-) Zdravím tímto všechny své komentující, kteří měli chuť mi někdy něco podobného o mém blogu sdělit a sdělili :-)
Už to mám, pár vět jsem zřejmě musel překočit :-).
huh tohle jsem si musel prolistovat dvakrát :)
za mnohem horší vadu tohoto blogu považuju ten flek v tom modrym sloupečku tady napravo – hrozně to ruší. A ano, pro rejpaly je to bordel na monitoru, ale mě to vadí… :D
přiznám se, že na ovládání odkazů klávesnicí jsem u přihlášeného webu nedělal, a to proto, protože je tam formulář, který je primární akcí a při ovládání pouhou klávesnicí vlastně nejde z toho formuláře vyskočit, musel bych nastavovat nějaké tabindexy odkazům (a nebo nevím jak jinak). Takže jsem obětoval 0,1% lidí co nemají myš s cílem zvýšit akci u 99,9% lidí. Je mi líto.
Přeskakovací odkazy jsem konzultoval se sdružením nevidomých a byli s tím spokojeni