Wpadki i wypadki #10

Kiedy już wszyscy zwątpili – łącznie ze mną – oto jest: nowy odcinek Wpadek i wypadków!

Dzisiaj będzie bardzo krótko, o wzorcu, który bardzo często można spotkać na stronach – menu hamburgerowym. Czyli tak naprawdę przycisku, który otwiera menu, Choć jest na niemal każdej stronie, bardzo często jest zrobiony źle i w sposób niedostępny. Przyjrzyjmy się kilku przypadkom:

1. <div>
   	<span class="lines"></span>
   </div>

   Tutaj nie ma za bardzo o czym mówić: to nawet nie jest przycisk. A to oznacza, że taki element nie jest odpowiednio przedstawiany w drzewku dostepności, nie jest dostępny z poziomu klawiatury (ani przy pomocy Tab, ani przy próbie „kliknięcia” spacją czy Entererem.), nie jest też focusowalny. Innymi słowy: zawodzi na całej linii.

   Kolejnym problemem jest fakt, że element jest pusty, co sprawia, że nie ma żadnej etykiety wewnątrz drzewka dostępności.

2. <button>☰</button>

   Zdecydowanie lepiej. Pojawił się przycisk! Ale niestety, jego zawartość jest całkowicie nieczytelna dla czytników ekranowych – z powodu tego, że użyty znaczek Unicode ma mocno określone znaczenie. To tzw. trigram for heaven i tak też jest czytany przez czytniki ekranowe.

   Dodatkowo przyciskowi brakuje odpowiednich atrybutów ARIA, wskazujących na to, czy menu jest rozwinięte, czy nie.

3. <button aria-expanded="false">Menu</button>
   <nav>[…]</nav>

   Tu wszystko wygląda dobrze, prawda? A właśnie, że nie! Problemem jest tutaj fakt, że przycisk znajduje się poza elementem nav, który kontroluje. To sprawia, że użytkownik czytnika ekranowego nawigujący przy pomocy tzw. landmarks może trafić do pustego elementu (menu będzie ukryte, a przycisk gdzie indziej). W przypadku, gdy przycisk jest wewnątrz nav, użytkownik wie, jak włączyć menu.

Poprawne implementacje przycisku otwierającego menu mogą wyglądać tak: codepenowa wersja oraz wersja na JSFiddle. A najlepiej o nich opowiada Heydon Pickering. Po polsku z kolei robiła to Małgorzata Młynarczyk, autorka Internetu bez barier.