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.

2 myśli w temacie “Wpadki i wypadki #10”

  1. Z Twojego JSFiddlowego przykładu można span.nav__toggler-icon wywalić i dodać pseudoelement bezpośrednio do buttona https://jsfiddle.net/stLjmoc9/1/ . Chociaż nie wiem czy to ma jakieś znaczenie. Ale chyba lepiej mieć mniej elementów w DOMie niż więcej, a tym bardziej pustych.

    Z animowanym też można coś wymyślić bez zbędnych spanów. Kiedyś kombinowałem jak to zrobić, np tutaj https://m51.pl/ . Chociaż teraz widzę, że mam błąd – button jest poza nav. I trochę też tekst jest nie do końca ukryty.

    1. Nie bardzo widzę sens w specjalnym kombinowaniu, żeby tylko pozbyć się jednego elementu.

      Co do przykładu z JSFiddle: nie można. Zauważ, że element z ikonką ma [aria-hidden=true], co sprawia, że ikonka nie jest czytana. W przypadku, gdy przeniesiesz to bezpośrednio do przycisku, jego etykieta z „Open/close menu” zmieni się na „Trigram for heaven open/close menu”. Bardzo fajnie widać to w inspektorze dostępności w Firefoksie.

      W sumie lekko zaktualizowałem ten przykład, żeby zawsze pokazywał etykietę. Samą etykietę też zmieniłem, na „Menu”.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.