Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

středa 9. června 2010

Zvýrazňujete odkazy při ovládání webu z klávesnice?

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.

Související odkazy

7 komentářů:

Sed řekl(a)...

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?

Aleš Rubáš řekl(a)...

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

Radek Pavlíček řekl(a)...

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

Sed řekl(a)...

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

Radek Pavlíček řekl(a)...

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

Fidelis řekl(a)...

Aj moj web zvyraznuje odkazy, ktore maju fokus hoci grafik, ktory mi web navrhol to povazuje za ohavny zlocin :-)

Anonymní řekl(a)...

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.