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 (607,060 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.

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

No o.k Temat powraca gdyż latem powiedziałeś mi, że nawigacja klawiaturą jest mocno zepsuta.

https://forum.pasja-informatyki.pl/269946/ocena-strony-i-kodu-po-poprawkach

Problemem wtedy było to, że focus skakał po menu mobilnym nawet gdy było ono niewidoczne - problem ten został rozwiązany. Oprócz tego focus leciał od prawej do lewej - również to poprawiłem.

Skoro twierdzisz, że domyślne ustawienia przeglądarki wystarczą to cieszy mnie to - wiadomo mniej roboty. Właściwie zostaje tylko kwestia menu - hamburgera.

Mobilne, rozwijane menu hamburger pojawia się przy szerokościach mniejszych niż 490px. Oczywiście pojawia się nierozwinięte. Focus na odnośnikach do innej części witryny jest niewidoczny w tej sytuacji. Pytanie czy jest to problem? Czy warto w takiej sytuacji gdy ekran ma mniej niż 490px przejmować się nawigacją klawiaturą?

komentarz 8 stycznia 2018 przez Comandeer Guru (607,060 p.)

Jeśli przycisk do otwierania menu będzie focusowalny, to wówczas przecież po otwarciu menu będzie się można po nim poruszać przy pomocy klawiatury.

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

Naturalnie. Chodziło mi bardziej o to czy przy takiej szerokości ekranu ktokolwiek korzysta z nawigacji klawiaturą. Nie wiem bo nie korzystam z urządzeń mobilnych. Zawsze miałem stary telefon i laptopa.

komentarz 8 stycznia 2018 przez Comandeer Guru (607,060 p.)

Z klawiatury niekoniecznie, ale czytniki ekranowe w tej samej kolejności czytają treść.

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

O.K czyli jeżeli przycisk rozwijający dla menu mobilnego nie będzie focusowalny za pomocą klawiatury to nie będzie to problemem?

Kod html wygląda tak.


<nav class="menu">
 
       <div aria-hidden="true" class="mobile-menu-controler"> 
	       <span class="fa activate-hamburger floated-right fa-bars"></span> <button class="roll-down-button floated-right activate-hamburger" id="hamburger-button" type="button">rozwiń</button>
	       <span class="fa fa-phone phone-for-mobile-menu"></span> <a class="phone-for-mobile-menu number-digits" href="tel:+48-880-738-284">+48-880-738-284</a>  
	   </div>
	
       <ul id="hamburger-list" class="main-menu">
            <li class="flexbox-navigation-item"><img class="logo-big" src="/img/logo.jpg" alt="" /></li>
		    <li class="flexbox-navigation-item"><a class="navigation-item" href="index.html"><span class="fa hamburger-menu-decoration additional-description fa-building" aria-hidden="true"></span>Firma <span class="additional-description"> - krótko o nas</span></a></li>
		    <li class="flexbox-navigation-item"><a class="navigation-item" href="serwis.html"><span class="fa hamburger-menu-decoration fa-wrench additional-description" aria-hidden="true"></span>Serwis <span class="additional-description"> - zakres usług</span></a></li>
		    <li class="flexbox-navigation-item"><a class="navigation-item" href="aktualnosci.html"><span class="fa hamburger-menu-decoration additional-description fa-newspaper-o" aria-hidden="true"></span>Aktualności <span class="additional-description"> -  co nowego?</span></a></li>
		    <li class="flexbox-navigation-item"><a class="navigation-item" href="kontakt.php"><span class="fa hamburger-menu-decoration additional-description fa-volume-control-phone" aria-hidden="true"></span>Kontakt <span class="additional-description"> - porozmawiaj z nami</span></a></li>
       </ul>
</nav>

Zmieniam tylko style w zależności od szerokości ekranu. No i zmieniam też wysokość przy rozwijaniu w menu mobilnym - JS-em

komentarz 8 stycznia 2018 przez Comandeer Guru (607,060 p.)

Nie, nie, ma być focusowalny, żeby dało się rozwinąć menu.

Poza tym obecnie przycisk jest niedostępny dla czytników ekranowych, przez co nawigacja też nie będzie. Kod przycisku powinien wyglądać nieco inaczej:

<div class="mobile-menu-controler"> 
    <button class="roll-down-button floated-right activate-hamburger" id="hamburger-button" type="button"><span class="fa activate-hamburger floated-right fa-bars" aria-hidden="true"></span>rozwiń</button>
    <span class="fa fa-phone phone-for-mobile-menu" aria-hidden="true"></span> <a class="phone-for-mobile-menu number-digits" href="tel:+48-880-738-284">+48-880-738-284</a>  
</div>

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

No tak, przycisk jest niedostępny - zrobiłem to celowo. No bo po co niby czytnikowi ekranowemu przycisk rozwijający menu mobilne? Przecież może od razu przejść do łączy nawigacyjnych niezależnie od tego czy menu jest desktopowe czy mobilne. To ma znaczenie tylko dla "wizualnego" użytkownika. No bynajmniej tak mi się wydaje.

Druga kwestia. Twierdzisz, że przycisk powinien być focusowalny, czyli na małych ekranach też nawiguje się przy pomocy klawiatury? Jeżeli tak to powinienem zrobić tak aby przycisk rozwijania był focusowalny gdy jest mobilne menu i niefocusowalny gdy jest desktopowe menu. Da się to zrobić bez JS-a? Czy JS-em zmieniać atrybut tabindex? A może inaczej?

komentarz 8 stycznia 2018 przez Comandeer Guru (607,060 p.)

No bo po co niby czytnikowi ekranowemu przycisk rozwijający menu mobilne? Przecież może od razu przejść do łączy nawigacyjnych niezależnie od tego czy menu jest desktopowe czy mobilne. To ma znaczenie tylko dla "wizualnego" użytkownika. No bynajmniej tak mi się wydaje.

Czytnik ekranowy respektuje CSS, dlatego jeśli coś jest ukryte, jest też ukryte dla czytnika (pomijając specjalne techniki ukrywania dla "normalnych" użytkowników, ale z pokazywaniem dla czytnika ekranowego).

Druga kwestia. Twierdzisz, że przycisk powinien być focusowalny, czyli na małych ekranach też nawiguje się przy pomocy klawiatury? Jeżeli tak to powinienem zrobić tak aby przycisk rozwijania był focusowalny gdy jest mobilne menu i niefocusowalny gdy jest desktopowe menu. Da się to zrobić bez JS-a? Czy JS-em zmieniać atrybut tabindex? A może inaczej?

Przycisk to przycisk. W HTML-u tak naprawdę istnieją tylko dwa elementy interaktywne (pomijając pola formularzy): przycisk i link. Do wykonywania akcji (np. otwarcia menu) stosuje się przyciski, do przechodzenia na inne strony – linki. W tym wypadku przycisk otwierania menu powinien być button – i to rozwiązuje sprawę, ponieważ ten element jest focusowalny z założenia.

Użycie odpowiedniego znacznika jest też ważne z powodu drzewka dostępności, w którym dla czytników ekranowych i innych technologii asystujących przeglądarka przekazuje informacje, czym są poszczególne elementy strony. Zrobienie przycisku menu na przycisku informuje czytnik ekranowy, że powinien powiedzieć userowi, że ten element da się kliknąć, co wykona taką i taką akcję.

A problem z niefocusowalnością przycisku załatwia ukrycie go. Ukryty element nie jest focusowalny.

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

A problem z niefocusowalnością przycisku załatwia ukrycie go. Ukryty element nie jest focusowalny.

Jeżeli jest niefocusowalny to jak wyjaśnisz, że w starej wersji focusuje się na odnośnikach na ukrytym menu mobilnym? Tzn. focusu nie widać, ale de facto jest bo wyświetla się adres na dole, można przejść do konkretnej strony i widać to też po tym ile razy trzeba nacisnąć tab.

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

Czytnik ekranowy respektuje CSS, dlatego jeśli coś jest ukryte, jest też ukryte dla czytnika (pomijając specjalne techniki ukrywania dla "normalnych" użytkowników, ale z pokazywaniem dla czytnika ekranowego).

Czyli od czego to dokładnie zależy? Wiem, że istnieje np. klasa visually-hidden - niewidoczna, ale dostępna dla czytników ekranowych. Jak ustawię wysokość kontenera na 0 i dam overflow hidden to czytnik to przeczyta?

Przycisk to przycisk. W HTML-u tak naprawdę istnieją tylko dwa elementy interaktywne (pomijając pola formularzy): przycisk i link. Do wykonywania akcji (np. otwarcia menu) stosuje się przyciski, do przechodzenia na inne strony – linki. W tym wypadku przycisk otwierania menu powinien być button – i to rozwiązuje sprawę, ponieważ ten element jest focusowalny z założenia.

No, ale chodziło mi o to czy ktokolwiek korzysta z nawigacji za pomocą klawiatury przy tak małym ekranie < 490px.

komentarz 9 stycznia 2018 przez Comandeer Guru (607,060 p.)

Jeżeli jest niefocusowalny to jak wyjaśnisz, że w starej wersji focusuje się na odnośnikach na ukrytym menu mobilnym?

Ukryty = mający atrybut [hidden] lub w stylach display: none/visibility: hidden.

Czyli od czego to dokładnie zależy? Wiem, że istnieje np. klasa visually-hidden - niewidoczna, ale dostępna dla czytników ekranowych. Jak ustawię wysokość kontenera na 0 i dam overflow hidden to czytnik to przeczyta?

Patrz wyżej. I tak, przeczyta.

No, ale chodziło mi o to czy ktokolwiek korzysta z nawigacji za pomocą klawiatury przy tak małym ekranie < 490px.

Nie wiem, ale odpowiedź najprawdopodobniej brzmi: tak. Niemniej to, w jaki sposób się nawiguje przy pomocy klawiatury, oddaje m.in. to, w jaki sposób działa czytnik ekranowy – można tu wyprowadzić sporo analogii.

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

Spoko. Tak się składa, że menu jest niewidoczne ponieważ ma wysokość równą zero. Zatem:

1.Dodanie atrybutu aria-hidden=true divowi klasy "mobile-menu-controler" we wcześniej wklejonym kodzie nie będzie problemem gdyż czytniki i tak przeczyta listę odnośników następującą po nim.


<nav class="menu">
  
       <div aria-hidden="true" class="mobile-menu-controler"> 
           <span class="fa activate-hamburger floated-right fa-bars"></span> <button class="roll-down-button floated-right activate-hamburger" id="hamburger-button" type="button">rozwiń</button>
           <span class="fa fa-phone phone-for-mobile-menu"></span> <a class="phone-for-mobile-menu number-digits" href="tel:+48-880-738-284">+48-880-738-284</a>  
       </div>
     
       <ul id="hamburger-list" class="main-menu">
            <li class="flexbox-navigation-item"><img class="logo-big" src="/img/logo.jpg" alt="" /></li>
            <li class="flexbox-navigation-item"><a class="navigation-item" href="index.html"><span class="fa hamburger-menu-decoration additional-description fa-building" aria-hidden="true"></span>Firma <span class="additional-description"> - krótko o nas</span></a></li>
            <li class="flexbox-navigation-item"><a class="navigation-item" href="serwis.html"><span class="fa hamburger-menu-decoration fa-wrench additional-description" aria-hidden="true"></span>Serwis <span class="additional-description"> - zakres usług</span></a></li>
            <li class="flexbox-navigation-item"><a class="navigation-item" href="aktualnosci.html"><span class="fa hamburger-menu-decoration additional-description fa-newspaper-o" aria-hidden="true"></span>Aktualności <span class="additional-description"> -  co nowego?</span></a></li>
            <li class="flexbox-navigation-item"><a class="navigation-item" href="kontakt.php"><span class="fa hamburger-menu-decoration additional-description fa-volume-control-phone" aria-hidden="true"></span>Kontakt <span class="additional-description"> - porozmawiaj z nami</span></a></li>
       </ul>
</nav>

2.Ukrywanie przycisku uniemożliwi focusowanie go.

3.Focus powinieć być dostępny dla przycisku rozwijającego o ile ten jest widoczny.

komentarz 9 stycznia 2018 przez Comandeer Guru (607,060 p.)

A co z użytkownikami słabo widzącymi, którzy używają czytników ekranowych jako pomocy przy nawigacji? Wówczas czytnik zacznie im czytać coś, czego nie ma na ekranie, co może spowodować ich zagubienie.

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

Kiedy miałby im czytać coś czego nie ma na ekranie?

komentarz 9 stycznia 2018 przez Comandeer Guru (607,060 p.)

Masz działający przycisk menu. Czemu na wszelkie możliwe sposoby chcesz komplikować sprawę? Co Ci szkodzi, żeby ten przycisk po prostu działał?

Robisz założenia, że użytkownik czytnika ekranowego jest albo niewidomy, albo nie ma dostępu do klawiatury. A niektóre smartfony mają stacje dokujące z fizycznymi klawiaturami. Jedna z podstawowych zasad dostępności brzmi: nie robić założeń.

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

Skoro korzysta z czytnika ekranowego to po co mu ten przycisk skoro i tak będzie miał dostęp do linków nawigacyjnych? Jak to zostawię to będzie kolejna pozycja do przeskoczenia, która w tym wypadku nic nie wnosi.

komentarz 9 stycznia 2018 przez Comandeer Guru (607,060 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 (607,060 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ć.