Как программы чтения с экрана читают теги <abbr>?
Я узнал, что <abbr> тег должен интерпретироваться программами чтения с экрана таким образом, чтобы его title Атрибут заменит его содержимое при чтении программой чтения с экрана. Однако, когда я пытаюсь это сделать, ни MacOS (Firefox и Safari) Voiceover, ни NVDA (Windows 10, Edge и Firefox) не работают таким образом. Вот соответствующая часть кода:
... bla bla bla <abbr title="nervus">N.</abbr> peronaeus ...
(это медицинское выражение)
ИМО это следует читать как "... бла бла бла нерве перонеус...", но это читается как "... бла бла бла Н.", затем долгое молчание (или программа чтения с экрана даже останавливается перед этим), видимо из-за точки, а потом "peronaeus..." - нет "нервов"...
Я правильно использую синтаксис или мне чего-то не хватает? Или, если это правильно: есть ли какой-нибудь код WAI-ARIA или аналогичный, который я мог бы добавить, чтобы он работал так, как предполагается на большинстве программ чтения с экрана?
4 ответа
Вы не можете зависеть от того, слышит ли пользователь title атрибут элемента. Вот хороший ресурс о том, как программы чтения с экрана обрабатывают элементы HTML, и для abbr, запись выглядит следующим образом:
Как вы можете видеть, программы чтения с экрана обычно просто считывают содержимое элемента. поскольку N. содержит точку, он просто считывает "N", а затем делает полную остановку для периода. Вы можете настроить программу чтения с экрана для чтения title содержание, но это опция выбора, поэтому вы не должны зависеть от этого. Там действительно нет способа установить контент для программы чтения с экрана с title,
abbr тег просто вводит в заблуждение.
В вашем случае вы не хотите предоставлять информацию только слепым пользователям, но людям, игнорирующим то, что кажется распространенным медицинским сокращенным термином. Не слепой пользователь, не использующий программу чтения с экрана, нуждается в этой информации.
Напротив, слепые люди, использующие дисплеи Брайля, пользуются сокращениями. Много.
Если вы хотите очень эффективный способ обработки аббревиатур, используйте глоссарий:
<a href="/glossary/nervus-peronaeus"
aria-label="Nervus peronaeus"
title="Nervus peronaeus" class="glossary">N. Peronaeus</a>
aria-label имеет очень хорошую поддержку по ссылкам, и title Атрибут может использоваться, чтобы дать подсказку пользователям, не являющимся читателями экрана.
Например, глоссарий можно вставить внутрь страницы внизу.
<a href="#nervus-peronaeus"
aria-label="Nervus peronaeus"
title="Nervus peronaeus" class="glossary">N. Peronaeus</a>
Мой любимый способ обработки сокращений - не использовать их.
Nervus Peronaeus
Очистить. Сжатый. Это может показаться тривиальным, но когда вы думаете, что аббревиатура заслуживает объяснения, это лучший способ для всех (двигательные, визуальные, когнитивные нарушения).
Конечно, для аббревиатур часть языка не нужно их объяснять (ФБР, НАТО, ...). На медицинском веб-сайте для профессионалов только термин "N. peronaeus" может быть частью языка для целевой аудитории.
Другой подход: используйте полный термин плюс аббревиатуру в квадратных скобках для первого экземпляра на странице, а затем просто для сокращения. Википедия: "Язык разметки гипертекста (HTML) - это стандартный язык разметки для создания веб-страниц и веб-приложений". https://en.wikipedia.org/wiki/HTML
Я обнаружил, что лучший поддерживаемый способ заставить программы чтения с экрана читать аббревиатуры — это вставлять в код пробелы нулевой ширины.​. E.g. A​B​Cобъявляется как «ABC», но отображается как «ABC». Обратите внимание, что все браузеры (Chrome, Firefox и Edge) НАХОДЯТ «ABC», поэтому этот метод не разрушает другие функции.