ADA - программа чтения с экрана не читает <h1> при входе на экран

Question

Мой HTML, как показано ниже (извлеченная часть):

<h1><span>Main Menu</span></h1>
<div>
    <button tabindex="0">New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
</div>

Я использую NVDA. Когда пользователь выходит на экран, фокус находится на первой кнопке. NVDA читает текст по первой кнопке (Новый клиент). Пропускает заголовок (h1). Я предположил, что он должен читать теги h1 без каких-либо тегов aria, таких как aria-label. Я ошибаюсь в своем предположении? Что мне нужно сделать, чтобы сделать эту работу?

Answer 1

Если вы хотите, чтобы вокруг кнопок была метка группы, которая будет читаться при перемещении фокуса в группу, используйте role='group' а также aria-label на контейнере. Метка группы будет прочитана, когда вы нажимаете клавишу TAB в группе ("Новый клиент") и когда вы нажимаете клавишу TAB назад в группу ("Существующий клиент").

<div role="group" aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
  </div>
</div>

В приведенном выше примере визуально не отображается текст "Главное меню". Вы все еще можете отобразить это, если хотите использовать:

<div role="group" aria-label="Main Menu">Main Menu
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</div>

Вы также можете использовать <nav> элемент, но с вашим кратким фрагментом, это не похоже на кнопки для навигации, поэтому я бы не рекомендовал это, но хотел бы показать его для полноты:

<nav aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</nav>

Answer 2

Если вы используете скрипт для отправки фокуса на первую кнопку, программа для чтения с экрана пропустит что-либо в разметке до этого и сразу перейдет к кнопке. Вы должны быть в состоянии использовать клавиши со стрелками, чтобы вернуться, чтобы услышать это.

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