Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

Zobrazují se příspěvky se štítkemklávesnice. Zobrazit všechny příspěvky
Zobrazují se příspěvky se štítkemklávesnice. Zobrazit všechny příspěvky

neděle 8. září 2013

Twitter zlepšuje přístupnost svého webového rozhraní z klávesnice

Během posledního roku byla vylepšena přístupnost webového rozhraní Twitteru. Jednou z věcí, u které došlo ke zlepšení, je interakce s časovou osou pomocí klávesnice. Ačkoliv je ovládání z klávesnice často považováno spíše za nadstavbovou či pokročilou funkci, opak je pravdou a pro uživatele, kteří nemohou používat myš, je možnost plnohodnotně ovládat aplikaci z klávesnice naprosto zásadní.

Twitter nabízí uživatelům makro-navigaci mezi jednotlivými tweety pomocí kláves j a k a mikro-navigaci v rámci tweetu pomocí Tab a Shift+Tab. Tabulátor lze samozřejmě použít standardně pro pohyb po všech odkazech na stránce, ale tento způsob by byl při práci s časovou osou poněkud zdlouhavý, takže zjednodušení pohybu mezi jednotlivými tweety je velmi přínosné.

Video: Navigation Explanation

Při ovládání z klávesnice je také důležité mít dostatečně zvýrazněnou položku, která je právě aktivní (má focus). I v této věci došlo ke zlepšení a vybraný tweet je orámován.

Pokud jste si ještě ovládání Twitteru z klávesnice nevyzkoušeli, tak směle do toho. Pokud používáte Windows a některý ze screen readerů (například JAWS), je ale třeba vypnout Virtuální kurzor, aby vám vše fungovalo tak, jak má.

Některé klávesové zkratky pro práci ve webovém rozhraní Twitteru

  • Enter Otevřít detaily
  • g f Přejít na uživatele...
  • j Další tweet
  • k Předchozí tweet
  • Mezerník/Shift mezerník Stránka dolů/nahoru
  • / Hledat (při českém rozložení klávesnice ´ [čárka pro dlouhé hlásky na alfanumerické klávesnici] -)
  • . Načíst nové tweety a posun na nejnovější z nich
  • ? Nápověda (při českém rozložení klávesnice Shift +´ [čárka pro dlouhé hlásky na alfanumerické klávesnici]). Obsah dialogu s nápovědou je pro odečítač obrazovky s virtuálním kurzorem nepřístupný, je možné jej přečíst JAWS kurzorem.

Video: Browsing Tweets Using Screen Reader

Tým, který má ve Twitteru přístupnost na starost, má také oficiální Twitter účet. Ten najdete na @a11yteam a kromě sledování aktuálních informací o novinkách v přístupnosti Twitteru je také možné jim touto cestou posílat náměty na další vylepšení přístupnosti.

Související odkazy

Děkuji Martinu Kleinovi za spolupráci při přípravě tohoho článku.

úterý 11. září 2012

Osnovy fulltextového vyhledávání Seznamu pomáhají i přístupnosti

Osnovy fulltextového vyhledávání Seznamu vám pomohou nejen zvýšit míru prokliku, ale i zlepší přístupnost. O co jde?

Pokud uvedete dostatečné množství oddílů textu na stránce rozumnými (smysluplnými) nadpisy, z nadpisů uděláte kotvy (přiřadíte jim jednoznačné ID) a odkážete na ně pomocí vnitřních odkazů ve zdrojovém HTML kódu stránky, pak se výběr odkazů na podkapitoly zobrazí v přirozených výsledcích vyhledávání na Seznamu. Vyzkoušejte si to například na dotazu [freddie mercury site:wikipedia.org]

A jak s tím souvisí přístupnost?

O tom, že správné vyznačování nadpisů patří dnes k základním kamenům přístupnosti, netřeba hovořit. Pokud jste doposud nadpisy na stránce moc neřešili, pak s příchodem osnov máte o důvod víc se jimi zabývat a smysluplné nadpisy na stránce používat. Způsob, jakým se osnovy tvoří, je také přínosný pro uživatele, kteří ovládají počítač pouze z klávesnice, ale nemají k dispozici žádnou asistivní technologii, která by jim umožnila rychlý a efektivní pohyb po stránce. Možnost rychlého přesunu na jednotlivé části stránky tedy určitě přivítají. Dalším benefitem je pak jednoznačně strukturování textu, kdy se u takto vytvořeného textu dá předpokládat, že bude pro návštěvníky přehlednější a čitelnější.

Jak na osnovy?

  • Umístěte krátké a výstižné nadpisy nad jednotlivé části stránky.
  • Každému nadpisu přiřaďte jednoznačné ID.
  • Na nadpisy odkažte pomocí odkazů uvnitř samotné stránky.

Osobně jsem velmi rád za další pěkný a praktický příklad toho, jak je přístupnost velmi úzce provázána s dalšími oblastmi tvorby webu.

Související odkazy

pondělí 31. října 2011

Apple jako kompenzační pomůcka pro zrakově postižené - 3. díl

V dnešním díle seriálu Romana Kabelky o přístupnosti Apple produktů se budeme věnovat klávesnici. Ta je pro nevidomé uživatele důležitým vstupním zařízením a proto jí Roman věnoval celý jeden díl.

Dříve než se pustíme do probírání operačního systému Mac OS X a odečítače VoiceOver, popíšeme si typické rozložení klávesnice, s nímž se na Macintoshích můžeme setkat. Liší se totiž od standardních PC klávesnic hned v několika ohledech, tu více, tu méně viditelných. Asi nejrozšířenější je klávesnice notebookového typu zabudovaná ve všech MacBoocích a v přenosné bezdrátové Apple Wireless Keyboard dodávané např. k iMacům.

Klávesnice má klávesy s nízkým zdvihem a plochým profilem. Každá z nich je zapuštěna do krytu zvlášť a mezi jednotlivými klávesami je tak jasně hmatatelná mezera. Pro zvýšení přehlednosti jsou klávesnice všech nových MacBooků navíc podsvícené.

Alfanumerické klávesy a kurzorové šipky

Alfanumerické klávesy v druhé až páté řadě klávesnice mají standardní podobu včetně hmatového odlišení písmen F a J. Rovněž klávesy Shift, Capslock, Tabulátor, Backspace a ENTER mají svou obvyklou polohu. Enter je orientovaný na výšku přes třetí a čtvrtou řadu kláves. Ve třetí řadě, kde obvykle bývá pokračování klávesy Enter tvořící jeho typický tvar obráceného písmene L, je umístěna klávesa pro přehlásky, jež typicky bývá vedle Backspace, pokud je zmenšený. Levý Shift má poloviční velikost a vedle něj zprava je umístěna klávesa pro obrácené lomítko.

Za bližší prozkoumání stojí první a šestá řada kláves. V první řadě zcela napravo jsou čtyři úzké klávesy uspořádané do obráceného písmene T představující kurzorové šipky. Protože horní a dolní šipka mají společný otvor v krytu klávesnice, jsou pro lepší hmatnost jejich přiléhající strany zaoblené.

Přeřaďovače CMD, Alt a CTRL

Jako na každé klávesnici, i zde největší klávesou je mezerník. Ten však není obklopen klávesami Alt, jak tomu je zvykem na běžných PC klávesnicích, ale klávesami CMD (Command). Mají na sobě symbol Apple a jsou analogické ke klávesám Windows. V prostředí Mac OS X se ovšem používaj pro vyvolávání klávesových zkratek aplikací. V prostředí Windows k tomuto účelu slouží klávesy CTRL. Tuto podobnost lze ostatně s úspěchem přenést do prostředí Mac OS X - CMD+C kopíruje, CMD+V vkládá, CMD+S ukládá, CMD+O otevírá apod.

Dále od mezerníku, tj. vlevo od levého CMD a vpravo od pravého CMD, se nachází klávesy Alt nazývané také někdy Option. Slouží jako další přeřaďovač ke klávesovým příkazům a v kombinaci s alfanumerickými klávesami dovolují napsat znaky, které se nevyskytují na běžné lokální (české) klávesnici. S výhodou lze tak psát kombinací Alt+ě znak @ nebo Alt+ů znak ;, což odpovídá nejčastěji ekvivalentům pozic na počítačové anglické klávesnici.

Ještě více vlevo od levého Altu je jediná klávesa CTRL, neboť v prostředí Mac OS X nemá takový význam jako ve Windows. Nejčastěji používanou funkcí je v kombinaci s tlačítkem myši/trackpadu kontextový klik. Pro nás přecejen má význam větší, neboť v kombinaci s Altem tvoří základ pro klávesové zkratky odečítače VoiceOver. Kombinace CTRL+Alt je pro klávesové zkratky VoiceOveru tak častá, že se tato dvojice kláves také někdy označuje písmeny VO. Např. pro příkaz nápovědy klávesnice CTRL+Alt+K můžeme tedy někdy najít popis VO+K.

Modifikátor FN a funkční klávesy

Nakonec zcela vlevo v první řadě se nachází modifikátor FN měnící význam některých kláves tak, aby suplovaly klávesy, jež na klávesnici nenajdeme. Např. kombinací FN+Backspace simulujeme klávesu Delete, FN+Levá šipka Home atd.

Šestá řada kláves při horním okraji klávesnice má poloviční výšku a obsahuje funkční klávesy. Zcela vlevo je klávesa Escape, poté vpravo od ní funkční klávesy F1 až F12 a úplně na konec klávesa Eject. Mezi klávesou Escape a čtveřicemi funkčních kláves nejsou obvyklé mezery, tudíž orientace v řadě je do jisté míry ztížena. Zatímco Escape slouží k obvyklému účelu, tj. opuštění dialogu či zrušení akce, Eject, jak už název napovídá, se používá pro vysunutí CD nebo DVD z mechaniky. Funkční klávesy ve výchozím nastavení mají na sebe namapované rozšířené funkce systému a pro jejich standardní funkci je nutné k nim přistisknout klávesu FN. Je-li tedy např. řečeno, že odečítač VoiceOver se spouští klávesovou zkratkou CMD+F5, je ve skutečnosti u nově koupených Maců třeba stisknout FN+CMD+F5. V předvolbách klávesnice ovšem lze standardní funkci a rozšířenou funkci přehodit, tj. rozšířené funkce se vyvolávají až v kombinaci s klávesou FN. Toto chování je pro nás vhodnější, jelikož VoiceOver řadu svých příkazů mapuje právě na funkční klávesy.

Přehled suplovaných kláves

Delete
FN+Backspace
Home
FN+Levá kurzorová šipka
End
FN+Pravá kurzorová šipka
Page Up
FN+Horní kurzorová šipka
Page Down
FN+Dolní kurzorová šipka

Přehled rozšířených funkcí

Snížit jas displeje
[FN+]F1
Zvýšit jas displeje
[FN+]F2
Funkce Mission Control pro správu ploch
[FN+]F3
Funkce DashBoard pro práci s widgety (miniaplikacemi)
[FN+]F4
Snížit podsvícení klávesnice
[FN+]F5
Zvýšit podsvícení klávesnice
[FN+]F6
Přehrávat předchozí stopu v přehrávači
[FN+]F7
Spustit/pozastavit přehrávání v přehrávači
[FN+]F8
Přehrávat další stopu v přehrávači
[FN+]F9
Zapnout/vypnout zvuk
[FN+]F10
Snížit hlasitost zvuku
[FN+]F11
Zvýšit hlasitost zvuku
[FN+]F12
Vysunutí CD/DVD
Eject
Uspání počítače
CMD+Alt+Eject

Další díly seriálu

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