Кнопки в навигации вместо якоря?

Question

Я читал о доступности веб-сайтов и читал, что якорные теги должны использоваться только тогда, когда пользователь будет перенаправлен на другой URL без JavaScript. Но кнопки должны использоваться всякий раз, когда должно произойти какое-либо другое поведение, например, открытие модального.

Так что мне интересно, все ли в порядке с кнопками и якорями в навигации. Примерно так:

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <button>Sign Up</button>
</nav>

Скажем, в этой ситуации кнопка регистрации запускает модальный режим или выполняет другое поведение, которое не приводит пользователя к другому URL-адресу. Можно ли иметь оба в nav? Меня не волнует стиль, я сделаю так, чтобы они выглядели согласованно, но мне интересно, какой самый правильный способ справиться с чем-то подобным?

Answer 1

С точки зрения доступности, использование ссылок и кнопок - семантически правильный путь. Ссылки ведут на другую страницу (или где-то еще на текущей странице), а кнопки выполняют действие. Пользователь программы чтения с экрана поймет, когда услышит «ссылку» или «кнопку» в одном и том же

, что произойдут различные действия.

Answer 2

Любые элементы потока элементы допускаются в теге nav , включая кнопки.

Answer 3

Да, вполне нормально использовать кнопки, якоря или даже div внутри панели навигации, однако вы можете это сделать.Вам просто нужно чувствовать себя комфортно, используя CSS и стили, которые, как вы говорите, вам нужны.Тогда у вас не должно быть проблем.Это отвечает на ваш вопрос?

Answer 4

Как уже упоминалось в предыдущих комментариях, да, вполне нормально использовать оба в вашей навигации.

Если вы действительно хотите, вы можете использовать элементы <a> для всех, но для кнопок вы бы включили атрибут role="button", который семантически эквивалентен использованию <button>.

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <a role="button">Sign Up</a>
</nav>