Skróty klawiszowe

Aplikacje webowe [i biurkowe też], oraz strony Internetowe robimy zwykle pod swoje upodobania i potrzeby.
Opcje w menu umieszczamy tam gdzie wydają się nam logiczne, ikonki robimy zrozumiałe dla nas samych, ogólnie jako autorzy zwykle jesteśmy też projektantami. Później to samo robią testy. Czasem do głosu dopuszcza się też kogoś od User Experience i Usability.
I zwykle wszystko ładnie działa, bo wszystkie osoby zaangażowane w projektowanie, wykonanie i testowanie mają pewną umiejętność.

Wszyscy widzimy.

Tylko, że w rzeczywistości około 0.6% ogółu ludzi na Ziemi jest niewidoma, a 2% ma problemy z widzeniem. Ich jedyny kontakt z komputerem to często praca ze screen readerem, a to oznacza że komputer próbuje opowiedzieć jak wygląda ekran aplikacji, czy strona web [dla wszystkich developerów przydatna może być wtyczka Fangs do Firefoksa, która potrafi przedstawić stronę tak jak zostanie ona opisana przez jeden z najpopularniejszych screen readerów JAWS].

Co możemy zrobić jako developerzy by choć trochę ułatwić życie ludziom, którzy Internet poznają dzięki screen readerowi? Możemy pokusić się o dodanie skrótów klawiszowych do naszej web aplikacji. Zyskają na tym także reszta użytkowników.

W tym celu używamy atrybutu accesskey, który dostępny jest dla TAGów: A, AREA, BUTTON, INPUT, LABEL, LEGEND i TEXTAREA [btw. nie mam pojęcia co to za TAG ten LEGEND].

Dodając accesskey do linka robimy to tak:
<a href="adres" accesskey="a">Treść linka</a>

Od teraz w IE kliknięcie lewy ALT-A, a w Firefoksie lewy ALT-SHIFT-A, spowoduje w IE to, że link zyska fokus, a w Fireofoksie spowoduje aktywowanie linka.
W celu sprawienia by w IE i Firefoksie accesskey działało tak samo robimy to tak:
<a href="adres" accesskey="a" onfocus="document.location.href=this.href">Treść linka</a>

Dzięki kodowi podpiętemu pod onfocus adres wskazywany przez ten link zostanie załadowany do bieżącego okna.

Czasem jednak jest tak, że na stronie mamy pewne elementy, które są odsłaniane dynamicznie przez JavaScript w momencie najechania na inny element myszką albo coś podobnego... Wtedy problemem jest to, że nawet gdy przypiszemy accesskey to nic nie zyskamy bo przeglądarka będzie ignorować accesskey póty, puki element nie będzie widoczny.
Wtedy lepszym rozwiązaniem może być stworzenie niewidocznego linka, który wywoła odpowiednią reakcję. Jeżeli tło naszej strony jest białe można zrobić to tak:
<a href="adres" accesskey="a" onfocus="document.location.href=this.href" style="position:absolute;top:0px;left:0px;z-index:-1;font-size:0pt" color="white">Treść linka</a>

Chyba trochę przydługi wstęp by "sprzedać" zainteresowanym sztuczkę, ale z drugiej strony warto.


Podobne posty^beta
Lepszy test mniejszy i dokładniejszy, niż większy i ogólniejszy ;-)
Android, lokalizacja i koszty
Windows 8 - błeee, ciągle błeeee
Data binding w Polymerze jest oszukany ;-)
Nie ma to jak klawiatura ;-)