Pomysł na hamburgera w menu responsywnym

Cześć, wpadłem na fajny pomysł zrobienie hamburgera. W niektórych tutorialach widziałem, że często korzysta się z tagu span lub po prostu importuje się paczkę gotowych ikon.

Tworzymy div, a nim trzy kreski: |||

Potem robimy klasę hamburger z właściwością transform:

.hamburger {
  display: block;
  color:white;
  font-weight: bold;
  font-size: 20px;
  transform: rotate(90deg);

  transition: 0.1s;
}

.hamburger:hover {
  cursor: pointer;
  transform: rotate(270deg);
}

No super dość sprytnie. A teraz przychodzi ktoś z biznesu i mówi że kreski mają być jednak węższe bądź że ma tam być ikona. Co to robisz wtedy?

Wtedy mu odpowiem: moi najbardziej niezadowoleni klienci stanowią największe źródło informacji

Moim zdaniem używanie trzech znaków żeby imitować ikonkę to jest turbo mega słaby pomysł. Jeśli nie masz dodanej żadnej paczki do ikonek, jak font awesome, to możesz robić takie pół środki, ale jak masz to raczej nie.

Taki "przycisk" jest całkowicie niedostępny. Użytkownicy czytników ekranowych nie będą wiedzieli co to jest i do czego służy. A ktoś kto używa do nawigacji klawiatury nie będzie go mógł sfocusować

Jak coś jest na stronie przyciskiem, to musi występować jako button. W ostateczności mieć role="button". Musi też mieć etykietę (jakiś opis w środku, ||| to nie opis).

Więcej do poczytania https://www.webkrytyk.pl/2020/01/31/wpadki-i-wypadki-10/