NVDA не читает арии, описанные с помощью метки арии

1. Почему aria-describedby не используется в вашем примере: aria-describedby предназначен для дополнительной не важной информации. Часто атрибут title автоматически сопоставляется с aria-describedby. (Примечание: если метка или контент отсутствуют, title соответствует имени a11y (то есть: то же, что и aria-label). Из-за того, что он предназначен для дополнительного использования, и большинство разработчиков используют его слишком часто для неважных вещей, программы чтения с экрана не не объявляет об этом автоматически (могут быть ярлыки и настройки для пользователя программы чтения с экрана, чтобы принудительно их прочитать.) Однако есть исключения: например, большинство программ чтения с экрана автоматически прочитают описание диалогового окна.

2. Почему вы используете aria-describedby неправильно: вы описываете, как пользователь должен активировать этот элемент управления, но это явно не обязательно. Собственно это основная функция ролей и свойств арии. Если вы описываете элемент с помощью семантической разметки, он информирует пользователя, как с ним взаимодействовать, вам не нужно повторять его словами. Например: <button>, role="button" означает, что если вы нажмете клавишу ввода или пробела или щелкнете мышью, он выполнит действие по умолчанию для этого элемента управления (в случае собственного элемента button это может быть просто выполнено с помощью события click).

3. Вы можете использовать aria-haspopup="true", но если вы это сделаете, вы должны добавить дополнительные JS: Пункт выше также объясняет, почему простое добавление <button aria-haspopup="true">, как описано в другом ответе, будет отлично звучать для вас в программа для чтения с экрана, но это не всегда лучший выход.

Фактически <button aria-haspopup="true" aria-label="Settings"> читается как «Настройки, кнопка меню», что может быть семантически тем, что вам нужно. Но из описания это не означает, что эта кнопка в первую очередь открывает подменю / всплывающее меню. Это означает, что он ведет себя как кнопка меню. И кнопка меню выполнит свое действие по умолчанию также, если вы нажмете «курсор вниз» (это также позволяет пробел / ввод).

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

А вот и забавная часть. Если вы создадите <button aria-haspopup="true" aria-label="Settings"> (включая все взаимодействия кнопок меню (например: пробел, ввод, курсор вниз ...), а затем откроете role="dialog" и переместите фокус внутри этого диалогового окна. Это будет не то, что ожидал пользователь, но это полностью в порядке / доступен, потому что ваш элемент управления ведет себя, как описано, и как только пользователь переключается на диалог, он получает информацию, что он находится не в меню, а в диалоговом окне и может взаимодействовать с ним соответствующим образом.

Я предполагаю, что это открывает какое-то выпадающее меню? У меня нет под рукой NVDA для тестирования, но я могу переформулировать это как то, что, как я знаю, работает для этого сценария.

Необходимо сделать несколько обновлений:

1. Если это кнопка, используйте <button> вместо того, чтобы перекрывать другой элемент. (Я думаю, что кнопка правильная, поскольку она что-то делает на странице, а не куда-то еще.)
2. Enter - это то, как вы активируете что-то в NVDA (и Jaws), но в других программах для чтения с экрана все по-другому. Лучше не рассказывать людям, как использовать их программу чтения с экрана, вы должны предположить, что они это знают (по крайней мере, для основ), иначе они не смогли бы зайти так далеко.
3. Вместо того, чтобы указывать метку, используйте aria-haspopup для обозначения функции кнопки.

Например (адаптировано из HeydonWorks):

<div class="product-selector">  
  <button aria-haspopup="true">
    <span>Select product</span>
  </button>
  <ul class="pop-up" aria-hidden="true" aria-label="Product Menu">
    <li><a href="#">Test item</a></li>
  </ul>
</div>

Очевидно, вам нужен CSS / JS, чтобы всплывающее окно работало, и в первую очередь нужно добавить aria-haspopup и aria-hidden с помощью JS. В VoiceOver это читается как «Выбрать продукт, всплывающая кнопка», и я думаю, вы получите нечто подобное в NVDA.

NB: если всплывающее окно открывается сразу под кнопкой в ​​порядке исходного кода, это хороший подход, так как это будет следующая вещь для программы чтения с экрана. Если всплывающее окно открывается в другом месте страницы, лучше всего использовать ссылку (без кнопки role =) и переместить фокус на всплывающее окно с помощью .focus().