Nawigowanie po witrynie przy pomocy klawiatury

Question

Aktualnie pracuję nad zapewnieniem witrynie dobrej nawigacji klawiaturą. Nie jestem tak do końca pewny czy wybrałem dobre rozwiązanie. Zaznaczę, że menu nawigacji przyjmuje dwie postacie. Zwykłej poziomej listy linków i dla mniejszych szerokości rozwijane menu - tzw. hamburger. Proszę mnie poprawić jeśli coś będzie niewłaściwe.

 

Zacznijmy od zdefiniowania zachowania klawiszy.

1. Przycisk tab prowadzi nas do następnego elementu.

2. Strzałki góra, dół przewijają stronę do góry i na dół.

3. Strzałka w lewo - poprzedni element, strzałka w prawo następny element.

4. Enter - wiadomo przejście do lokalizacji wskazywanej przez odnośnik lub aktywacja przycisku itd.

W moim chromie z automatu działa wszystko oprócz punktu nr 3.

No i pytania. Czy należałoby zdefiniować jeszcze jakieś zachowania dla klawiszy? Czy są różnice w domyślnych ustawieniach przeglądarek? Czy da się coś takiego ogarnąć bez JS czy pisać skrypt rozpoznający klawisze ? Jakie są wasze doświadczenia w tym temacie?

Answer 1

Dopóki nie implementujesz dodatkowych skrótów klawiszowych (np. jak w edytorze tu na forum), to domyślne zachowanie przeglądarki jest w pełni wystarczające.

Comments

Ale focus i tak wskoczy na przycisk, nie zostanie natomiast podana żadna informacja użytkownikowi, gdzie jest.

A przycisk jest przecież elementem interaktywnym. Użytkownik czytnika ekranowego może go użyć, żeby rozwinąć menu.

---

Ale focus i tak wskoczy na przycisk, nie zostanie natomiast podana żadna informacja użytkownikowi, gdzie jest.

Skoro tak to ja widzę następujące rozwiązanie.

Focus nigdy nie wskakuje na przycisk rozwijający tylko automatycznie focusuje się na pierwszej pozycji z rozwijanego menu - rozwijając jednocześnie całe menu. Może być?

 

A przycisk jest przecież elementem interaktywnym. Użytkownik czytnika ekranowego może go użyć, żeby rozwinąć menu.

Nawet bez niego i tak ma dostęp do linków nawigacyjnych. 

---

Nie, nie może być, bo wykluczasz potencjalnych użytkowników klawiatury.

Kurczę, to jest prosta rzec​​​z a Ty ja komplikujesz do granic absurdu. Ukryj menu dla wszystkich i daj przycisk do jego otwarcia. Tyle. To najbardziej dostępny sposób.

---

Na szybko przygotowałem małe demo. Pomińmy fakt, że menu nie zwija się gdy focus przechodzi na elementy nie z menu nawigacyjnego.

http://sh194765.website.pl/kontakt.php

Pytanie. W jaki sposób w moim demo wykluczam potencjalnych użytkowników klawiatury?

Druga kwestia. W Twoim scenariuszu użytkownik musi wykonać więcej akcji i poświęcić więcej czasu aby dojść do celu ponieważ musi najpierw rozwinąć menu. W moim scenariuszu dzieje się to szybciej i łatwiej. Pytanie czy warto się gimnastykować.

---

IMO nie warto. Wzorzec z przyciskiem menu jest na tyle popularny, że userzy są do niego przyzwyczajeni.