Семантический HTML - навигация в боковой панели

Question

У меня есть боковая панель, которая содержит основную навигацию для приложения. Он также содержит button, который вызывает открытие / закрытие боковой панели. С точки зрения семантики, как должна выглядеть разметка?

• Должен ли я обернуть боковую панель в сторону, а затем использовать только навигацию? основная навигация, исключая триггер открытия / закрытия.
• Или обернуть всю боковую панель в nav, включая триггер открытия / закрытия
• Или оберните боковую панель в section, который содержит nav, исключая триггер открытия / закрытия?
• Или не иметь section или aside, но иметь только nav, исключая триггер, и в этом случае я все еще следую приведенным ниже рекомендациям. Следует ли рассматривать триггер как контент? или что-то, что должно быть частью структуры веб-страницы?

[W3] [1] предлагает:

Рекомендуется включать ВСЕ материалы на странице в ориентиры, так что пользователи программы чтения с экрана, которые полагаются на них, чтобы перейти из раздела к разделу не теряйте след контента.

Нынешняя структура похожа на это:

боковая панель

• главная навигация
  • навигационный пункт 1
  • навигационный пункт 2
• триггер для открытия / закрытия боковой панели

Answer 1

Элемент <aside> используется для тангенциально связанного содержимого с основным содержимым страницы и часто визуально представляется в виде боковых панелей.Использование его для навигации не будет полностью запутанным для программы чтения с экрана, но в этом случае вы должны добавить role из complementary или region.

Я бы ожидал этого<aside> для группировки как минимум нескольких различных <nav> элементов, поэтому для вашего случая использования единого меню я бы определенно выбрал область меню на боковой панели <nav>.Не забудьте дать ему хороший aria-label кстати.Что-то вроде aria-label=“Primary” будет достаточно для вашей основной навигации.

Попробуйте скрыть кнопку переключения для программ чтения с экрана с помощью aria-hidden=“true”, если переключение не приносит им пользы.В этом случае <nav> никогда не следует скрывать с помощью display: none, так как это сделает его невидимым и недоступным для программ чтения с экрана.

<nav aria-label="Primary”>
 <button aria-hidden="true">Toggle menu</button>
 <ul>
  <li>
   <a href="#">Link 1</a>
  </li>
  <li>
   <a href="#">Link 2</a>
  </li>
 </ul>
</nav>