Stworzy długi, szczegółowy i angażujący artykuł dla strony internetowej firmy projektującej strony internetowe zatytułowany:
Hamburger Menu: Friend or Foe?
Usiądźcie wygodnie, drodzy projektanci stron internetowych, bo mam dla was prawdziwą ucztę. Dziś przejdziemy przez wszystkie niuanse dotyczące jednego z najbardziej kontrowersyjnych elementów interfejsów użytkownika – hamburger menu.
Według ekspertów, hamburger menu to jeden z tych elementów, gdzie często widzimy złe praktyki. Otóż, jeśli nie wierzycie, wystarczy przez jeden dzień surfować po sieci z czytnikiem ekranu lub używając wyłącznie klawiatury, a z pewnością doświadczycie podobnych problemów. Nie martwcie się jednak, razem znajdziemy sposób, aby uniknąć tych pułapek i stworzyć hamburger menu, który będzie funkcjonalny i przystępny.
Zanim w ogóle pomyślicie o najlepszym sposobie implementacji hamburger menu, powinniście zadać sobie jedno kluczowe pytanie – czy jest ono w ogóle potrzebne? Istnieje wiele alternatywnych wzorców nawigacji responsywnej, które możecie rozważyć. Ostatnio też obserwujemy trend, by używać hamburger menu nawet na dużych ekranach – co owszem, może wyglądać efektownie, ale oznacza, że użytkownicy muszą kliknąć dwa razy, by przejść do jednej z wyświetlonych opcji. Dlatego jeśli jest miejsce, lepiej od razu pokazać wszystkie elementy nawigacji, a ukrywać je za przyciskiem hamburger menu tylko na małych ekranach.
Ale dobra, załóżmy, że hamburger menu jest najlepszym wyborem dla waszej strony. Co wtedy należy wziąć pod uwagę podczas jego implementacji?
Ikona Hamburger Menu
Zacznijmy od samej ikony, zwanej też navicon. Wielu używa do jej reprezentacji znaków Unicode, takich jak IDENTICAL TO U2261 lub TRIGRAM FOR HEAVEN U2630, aby pokazać trzy linie. Niestety, ten zabieg ma dwa poważne problemy:
- Nie wszystkie przeglądarki i czcionki obsługują te znaki Unicode, więc użytkownicy zobaczą zamiast nich po prostu kwadrat (tzw. “tofu” lub zastępczy glyf).
- Czytniki ekranu mogą odczytywać te znaki Unicode dosłownie, np. jako “trygram nieba”, zamiast po prostu “menu”.
Kolejne niepoprawne rozwiązanie to użycie czcionki ikonowej. Nie róbcie tego! Poważnie, czcionki ikonowe to przeżytek.
Zamiast tego, oto kilka dobrych sposobów na reprezentację hamburger menu:
- Użycie obrazka
<img>z pustym atrybutem alt, ponieważ jest to czysto dekoracyjny element. - Odtworzenie ikon za pomocą CSS, wykorzystując np. box-shadow, gradient lub obramowania.
- Użycie bezpośrednio w HTML-u znacznika SVG, z ustawionym
aria-hidden="true"ifocusable="false", zgodnie z zaleceniami Sary Soueidan.
Przycisk Przełączania
Tak jak pewnie się domyślacie, element, który otwiera i zamyka menu, powinien być naprawdę przyciskiem <button>. Niestety, wciąż wielu ludzi używa zamiast tego <a> lub <div>. Argumentują, że <button> jest trudny do stylizacji, ale to nieprawda – można z łatwością zresetować jego style, by wyglądał jak <a> lub <div>.
Dobrą praktyką jest również renderowanie tego przycisku po stronie klienta, a nie serwera. Dlaczego? Ponieważ interaktywne elementy, takie jak ten, są praktycznie bezużyteczne bez JavaScript, więc lepiej od razu je dynamicznie wygenerować.
Jednak na wypadek, gdyby JavaScript nie działał, warto zapewnić fallback w postaci statycznej nawigacji, widocznej od razu. Możecie to zrobić np. ukrywając <div> z linkami do nawigacji za pomocą atrybutu hidden, a następnie, gdy JS będzie gotowy, zastąpić go prawdziwym <button> z odpowiednimi atrybutami ARIA.
Styl i Dostępność
Na koniec kilka słów o stylu i dostępności hamburger menu. Przede wszystkim, sprawdźcie kontrast kolorów, używając do tego odpowiednich narzędzi. Upewnijcie się także, że menu działa poprawnie w trybie wysokiego kontrastu.
Kolejna ważna rzecz to rozmiar elementów klikanych. Upewnijcie się, że są one wystarczająco duże, szczególnie na małych ekranach, gdzie może to być problematyczne.
Pamiętajcie też o użytkownikach, którzy preferują zredukowane animacje i przejścia. Wykorzystajcie do tego media query prefers-reduced-motion.
Podsumowując, przy hamburger menu trzeba zwrócić szczególną uwagę na dostępność i responsywność. Upewnijcie się, że działa on poprawnie zarówno z klawiatury, jak i z czytników ekranu. Tylko wtedy użytkownicy będą mogli w pełni korzystać z waszej strony.
Wnioski
Zanim zdecydujecie się na hamburger menu, dobrze się nad tym zastanówcie. Czy na pewno jest ono niezbędne? Może lepiej od razu pokazać wszystkie elementy nawigacji, a ukryć je dopiero na mniejszych ekranach?
Jeśli już zdecydujecie się na hamburger, pamiętajcie o kilku kluczowych zasadach:
- Używajcie obrazka, SVG lub CSS do reprezentacji ikony, unikajcie znaków Unicode i czcionek ikonowych.
- Zawsze używajcie prawdziwego
<button>do przełączania menu, a nie<a>czy<div>. - Renderujcie ten przycisk po stronie klienta, zapewniając jednocześnie fallback w postaci statycznej nawigacji.
- Dbajcie o kontrast, rozmiar elementów i obsługę przez użytkowników preferujących zredukowane efekty.
Trzymajcie się tych wskazówek, a hamburger menu na waszej stronie stanie się prawdziwym przyjacielem, a nie wrogiem użytkowników. Powodzenia w projektowaniu!
