<a role="button"> вместо <button>
Я использую программу NVDA, чтобы протестировать свой сайт и сделать сайт доступным для всех людей. Недавно я увидел в MDN Web docs атрибут, позволяющий мне использовать a вместо button, это role="button",
Доктор MDN и Bootstrap 4 говорит:
этим ссылкам нужно дать роль role="button", чтобы соответствующим образом донести их назначение до вспомогательных технологий, таких как программы чтения с экрана.
<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>
Я попытался использовать NVDA, и я нажимаю B (ярлык для поиска кнопок на веб-сайте), и единственная кнопка, которую он нашел, это кнопка с <button> тег. Какие role="button" используется? Какой правильный путь?
Ссылка: Bootstrap V4 и MDN Docs
2 ответа
Я попытался использовать NVDA и нажимаю B (ярлык для поиска кнопок на веб-сайте), и единственная найденная кнопка - кнопка с тегом. Какая роль ="кнопка" используется? Какой правильный путь?
Поддержка и поведение браузера для ролей ARIA могут различаться в зависимости от комбинации браузера и программы чтения с экрана.
Вы должны использовать родной <button> элемент.
Помните первое и второе правила ARIA:
Первое правило:
Если вы можете использовать собственный элемент или атрибут HTML с уже семантикой и поведением, которые вам требуются, вместо повторного выбора элемента и добавления роли, состояния или свойства ARIA, чтобы сделать его доступным, то сделайте это.
Второе правило:
Не меняйте родную семантику, если только вам это не нужно.
<a>теги должны идти по ссылке. Вы должны использовать<div>,<span>,<button>, или<input type="button">,<input type="submit">или<input type="reset">как кнопка.
Ссылка: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role