Nawigowanie po witrynie przy pomocy klawiatury

pytanie zadane 8 stycznia 2018 w HTML i CSS przez Artek Stary wyjadacz (11,800 p.)

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?

1 odpowiedź

odpowiedź 8 stycznia 2018 przez Comandeer Guru (600,810 p.)
wybrane 8 stycznia 2018 przez Artek

Najlepsza

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.

Pokaż 15 poprzednich komentarzy

komentarz 9 stycznia 2018 przez Comandeer Guru (600,810 p.)

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.

komentarz 9 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

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.

komentarz 9 stycznia 2018 przez Comandeer Guru (600,810 p.)

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

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

komentarz 9 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

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