Vím, psal už o tom před časem Filosof. Ale protože se tento neduh stále nedaří vymýtit a navíc mám pocit, že se v poslední době stále častěji setkávám s weby, které ovládání z klávesnice moc neřeší, určitě neuškodí malé opáčko a rozšíření tématu.
O co jde?
Existuje celá řada uživatelů, kteří ovládají web pouze z klávesnice:- nevidomí,
- slabozrací,
- tělesně postižení,
- lidé, kteří pochopili, že když mají ruce na klávesnici, je snazší zadat příkaz z klávesnice než hledat myš ;-)
- atp.
Prakticky všem (pominu-li nevidomé uživatele) velmi pomůže, když při ovládání webu z klávesnice ví, na kterém odkazu či prvku právě mají kurzor.
V čem je problém?
Řada tvůrců webů bohužel u odkazů ošetřuje pouze stav :hover. Tím sice pomohou těm, kteří k ovládání webu používají myš (což je samozřejmě také důležité), ale pokud současně v CSS není definován i :active (pro IE < 7) a :focus (pro moderní prohlížeče), jsou ti, kteří používají jen klávesnici, při práci s webem nahraní, protože mají velký problém zjistit, který prvek má právě focus. Ostatně, zkuste si svůj web projít pomocí tabulátoru a hned zjistíte, zda se na něm při ovládání jen z klávesnice zorientujete a budete vědět, kde máte kurzor.
Pokud chce být tvůrce webu na uživatele, kteří používají pouze klávesnici, obzvlášť zlý, doplní do CSS k :hover, :active či :focus vlastnost outline: none. Tím spolehlivě zruší i systémem doplňované zvýraznění pomocí tečkovaného rámečku.
Jak z toho ven?
Řešení je naštěstí velmi jednoduché. Nepoužívat outline: 0 a u každého :hover přidat ještě dvě stejné definice s :active a :focus, případně je možné dát definice :active a :focus stavu samostatně a u textových odkazů invertovat barvu pozadí a barvu textu odkazu.
Pěkně vyřešené zvýraznění odkazů při procházení z klávesnice najdete například na blindfriendly.cz, vlada.cz nebo nette.org, opak je pak k vidění na prakticky všech ostatních webech ;-)
Takže - až budete příště definovat :hover, nezapomeňte přidat :active a :focus.
7 komentářů:
Můžu se zeptat, k čemu je pro ovládání z klávesnice dobré mít definován :active? Pokud tedy dobře chápu ten komentář (a je to jediný důvod) "pro IE < 7", znamenáto, že existuje někdo, kdo ovládá web klávesnicí, a používá zastaralý software?
Dobrý článek a souhlas, nejlepší řešení je, když s tímto tvůrce webu pracuje a postará se to to.
Nicméně, používejte chytrý prohlížeč, ten to udělá za Vás a na všech webech (testováno v Safari).
@Sed - ano, důvodem jsou prohlížeče IE 7 a starší, IE 8 už umí :focus. A jak se tak dívám, v článku jsem udělal drobnou chybu, nemá tam být <, ale <=.
@Aleš - ano, souhlasím, vhodně zvolený prohlížeč může řadu věcí z oblasti přístupnosti vyřešit. Nezapomínejme ale, že ne každý uživatel si umí v případě potřeby takto pomoci.
@Radek: znamená to tedy, že pokud nepoužívám :active, může být můj web někomu nepoužitelný? Já totiž :active nepoužívám vůbec.
@Sed - ano, ale musí být současně splněno několik podmínek - takový uživatel ovládá web výhradně z klávesnice a používá prohlížeč IE <= 7.
Aj moj web zvyraznuje odkazy, ktore maju fokus hoci grafik, ktory mi web navrhol to povazuje za ohavny zlocin :-)
Je to zrovna týden, co jsem si tenhle problém uvědomil. Díky za článek, kterým dáváte najevo, že to opravdu není zbytečnost.
Okomentovat