Анимированный значок гамбургера внутри кнопки ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивную панель навигации. И я хочу, чтобы это соответствовало стандартам доступности. Так, например, пользователь должен иметь возможность перемещаться по сайту с помощью клавиатуры.
Мне также нужен анимированный значок гамбургера. Что-то очень простое, например: https://www.w3schools.com/howto/tryit.a ... nu_icon_js
Но приведенное выше решение вообще не является семантическим. И пользователь не может использовать клавиатуру (поэтому я хочу обрабатывать не только событие «щелчка» мышью, но также «ввод» или «пробел» с клавиатуры).
Я только что прочитал, что мне следует использовать кнопку для этих целей не просто ссылка или (что еще хуже) div. (обратите внимание, что на сайте stackoverflow значок гамбургера не находится внутри кнопки, это всего лишь ссылка - почему?)
Из короткого исследования я знаю, что внутри кнопки я могу использовать интервал, но не дел. И я не уверен, можно ли установить свойство отображения в диапазоне, помещенном внутри кнопки, в виде блока? Я думаю, что это свойство блока мне понадобится, чтобы создать анимированный значок гамбургера.
Есть идеи по этому поводу?

Подробнее здесь: https://stackoverflow.com/questions/791 ... ide-button