Является ли ария-метка предотвращением считывания внутреннего содержимого с помощью вспомогательных устройств?

В документах MDN говорится, что вы должны использовать aria-label следующим образом:

<button aria-label="Close" onclick="myDialog.close()">X</button>

У меня нет доступа к экранирующему устройству, но я видел комментарии к Stack Overflow, предполагающие, что aria-label не заменяет внутренний контент, а только префикс. Таким образом, в приведенном выше случае он зачитал бы "Close X", что, очевидно, не идеально.

Это правда? Если да, то какое решение? Я предполагаю, что было бы целесообразно обернуть внутреннее содержимое элементом [aria-hidden=true], например:

<button aria-label="Close" onclick="myDialog.close()"><span aria-hidden="true">X</span></button>

... но я осторожен, потому что не могу проверить его на реальном экране.

Ответ 1

ЗАВЕРШЕНИЕ

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

Вы можете проверить, что такое доступное имя элемента, например, если вы используете Google Chrome (надеюсь, что другие браузеры включают инструменты проверки доступности):

Откройте инструменты разработчика (например, F12 в Windows).
Выберите элемент (с указателем или ctrl + shift + c).
Перейдите на вкладку " Доступность " (здесь вы можете просмотреть дерево Accessibility, атрибуты ARIA и вычисленные свойства.

Ответ 2

В большинстве ситуаций вместо текста ссылки будет считаться ария-метка.

Это на самом деле стандартный тестовый сценарий и имеет обширные результаты испытаний на powermapper: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/

На странице результатов тестирования вы также можете услышать вывод экрана.

Ответ 3

Это то, что происходит в Microsoft Edge и Internet Explorer, с помощью диспетчера Windows:

Когда рассказчик читает текст и находит кнопку посередине, aria-label на самом деле префикс содержимого, например:
[содержание перед кнопкой] [значение aria-label ] [текст внутри тега кнопки] [содержимое после кнопки].
Когда пользователь фокусирует (или нажимает) кнопку, рассказчик говорит только значение aria-label, а не содержимое внутри кнопки, например:
[ aria-label value] "кнопка".

Надеюсь это поможет.

Ответ 4

Я столкнулся с этим, настраивая приложение, чтобы лучше поддерживать программу чтения JAWS.

Я надеюсь помочь кому-то еще, кто сталкивается с этим вопросом, указав, что у macOS есть совершенно функциональный экранный ридер, встроенный в VoiceOver (VO), который можно активировать с помощью cmd + F5.

Кроме того, пользователи MacOS могут установить Windows (https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) через бесплатное программное обеспечение, такое как VirtualBox (https://www.virtualbox.org/), которое идеально подходит для тестирования с помощью NVDA и даже JAWS, если вы или ваша организация готовы платить за лицензионный сбор.

Мораль моего ответа заключается в том, что вы можете просто перепрыгнуть на компьютер с Windows, чтобы проверить, работает ли он не только на экране, но и в бесчисленных браузерах Windows, которые, я уверен, меняют процент ваших посетителей - веб-разработчик работает как это.

ОБНОВЛЕНИЕ: пока я понимаю, что мои голоса были отрицательными, поскольку я не отвечал на вопрос о каллуме, я чувствую, что комментарии, такие как "22 марта в 11:41", оказывают негативное влияние на сообщество и нуждаются в адресации. Если бы я открыл только один детектив разработчиков для кросс-ОС и тестирования доступности, это стоило того.