Accesskey - małe, a cieszy
04 listopada 2005
Znajomy się mnie ostatnio spytał o ten magiczny wyraz, także po opublikowaniu tego designu bloga parę osób było trochę zaskoczonych. Wydaje się, że spora część Internetu jakoś nie dostrzega, po pierwsze ułatwień i zwiększenia dostępności dla niepełnosprawnych, po drugie zwiększenia prostoty i możliwości obsługi strony przez gości.
Oczywiście warto przypomnieć, że accesskey nie jest tagiem, tylko atrybutem. Może być aplikowany dla linków <a/> i map obrazków <area/>. Przykładowe użycie:
<a href="strona.html" accesskey="1">Strona</a>
Skróty klawiaturowe najlepiej definiować dla cyfr, najmniej one popsują szyki, gdy ktoś jest przyzwyczajony używać któregoś skrótu do opcji w samej przeglądarce. W systemie Windows naciśnij Alt + klawisz dostępu; dla komputerów Macintosh możesz nacisnąć Ctrl + klawisz dostępu. W niektórych przeglądarkach (np. w Mozilli) wystarczy nacisnąć daną kombinację klawiszy w innych (np. Internet Explorer) wymagane jest jeszcze naciśnięcie klawisza Enter. Zdarzają się także przypadki bardziej skomplikowane - np. w przeglądarce Opera aktywacja skrótu następuje przez naciśnięcie Shift + Esc i dopiero potem odpowiedniego klawisza dostępu. Samo wsparcie dla atrybutu jest w Internet Explorerze od 4.0 w górę i Netscape 6.0 w górę, nie licząc nowoczesnych przeglądarek.
Można się też (i co jest coraz częściej wykorzystywane) odwoływać do elementów formularza. Dla <input/> i <textarea/> można się odwołać od razu przez wstawienie atrybutu, bądź też skorzystanie z <label/>. Etykietka jest potrzebna, jeśli chcemy odwołać się do <select/>, wstawienie go do znacznika listy wyboru popsuje poprawność kodu. Na chwilę obecną nie ma wsparcia dla <option/>, a szkoda. :) Dla elementów <button/> i <input type="submit"/> (albo reset) wywołanie klawiszem spowoduje ich wciśnięcie. Dla radiobutton, checkbox zaznaczanie.
Z powodu niewidoczności tego parametru, powinno się zaznaczyć w jakiś sposób, że zdefiniowaliśmy skróty klawiaturowe na swojej stronie. W Operze 8.5 nie dopatrzyłem się przyjaznego rozwiązania (pomimo, że taka jest prodostępnościowa), ale nie wykluczam pomyłki, nie jestem związany z tą przeglądarką. Mozilla i Firefox potrafią jedynie wskazać we właściwościach strony tabelkę.
Jednak warto odrobić pracę domową za przeglądarki, bo nie każda ma taką fajną opcję jak Konqueror. Najczęściej stosuje się stylowanie - znacznik prezentacyjny, jak <b/>, bądź zaakcentowanie <em/> - zwykle jako podkreślenie, nawiązując do wyglądu kontrolek systemowych. Można też podać w etykietce tekstowej dodatkową informację, bądź skorzystać z generowania treści przez CSS. Jeśli wiemy, że agent użytkownika ma wsparcie dla JavaScript, możemy dodać kod który wylistuje w jakimś pływającym panelu wszystkie elementy z atrybutem accesskey. Bardzo oryginalnie wygląda z połączniem accesskey'a flaga dla linków :focus - można symulować stuknięcie w wirtualny przycisk interfejsu.
Wszystkie te pomysły przygotowałem na mojej stronie testowej accesskeys, zapraszam. :)
Przykładowy kod do panelu ze skrótami można też uruchomić przez Greasemonkey, tak ostatnio przeze mnie wychwalany. ;)
Jam Łasica RF 3
05 listopada 2005, 00:39
Ktos 11
05 listopada 2005, 11:02
mcv 12
05 listopada 2005, 11:50
