Уценка для NVDA или подобных программ чтения с экрана

Question

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

Одним из популярных решений является NVDA.После прочтения их документа здесь не ясно, поддерживают ли они пользовательскую уценку?

Могу ли я использовать некоторые атрибуты / теги / метаданные, чтобы NVDA читал по-другому?Например: Google будет читаться как «Google».Можно ли как-нибудь украсить его, чтобы оно читалось как «Ссылка на Google»?

Спасибо.

Answer 1

NVDA , например JAWS , VoiceOver , Talkback и некоторые другие, это программа чтения с экрана ,Программа для чтения с экрана - это программное обеспечение, которое пользователь с плохим зрением или без зрения будет использовать для доступа к своему компьютеру.Если вы пишете семантически правильный HTML, ваше приложение будет автоматически работать с программой чтения с экрана.

Чтобы создать семантически правильный HTML, W3C создал набор руководящих принципов, вызовите Рекомендации по доступности веб-контента (WCAG), в котором описываются действия, которые можно предпринять для улучшения веб-приложения, чтобы сделать его доступным для наибольшего числа людей.

Сюда входят такие вещи, как наличие альтернативного текста для изображений, наличие меток для элементов формы, правильное использование- текст для ссылок и использование соответствующих HTML-тегов для семантических элементов, таких как <h1> для заголовков, <ul> для списков, <table> для таблиц данных и т. д.

Когда Нативные html семантические элементы не могут быть использованы по какой-либо причине, тогда есть атрибуты ARIA и ролей , которые можно применять, чтобы дать программному обеспечению для чтения с экрана подсказку о том, чтотип объекта, который вы пытаетесь передать.

Таким образом, не существует уценки для NVDA или любого другого средства чтения с экрана.Вы просто должны быть умными в использовании HTML.

Answer 2

Нет такой вещи, как пользовательская разметка для программ чтения с экрана.Ну, что-то в этом роде, я расскажу вам об этом ниже.
По сути, когда вы пытаетесь сделать свой веб-сайт более доступным (кстати, очень хорошая вещь, вы должны минимизировать свое влияние напользователи программы чтения с экрана.Под «воздействием» я подразумеваю, что ваша цель должна состоять в том, чтобы ваш слепой пользователь видел то же самое, что и зрячий пользователь, но как разработчик веб-сайта вы предоставляете ему / ей возможность видеть, перемещаться, открывать, нажимать и т. Д.и т. д.

Однако есть способ настроить макет.Называется WAI-ARIA .С ним можно делать много сумасшедших (и умных) вещей, это здорово и мощно, но первое правило бойцовского клуба, я имею в виду, практики WAI-ARIA:

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

Т.е.: если вы можете не использовать ARIA, не используйте его.
Давайте возьмем ваш пример сссылка на Google: вы хотите, чтобы ваш слепой пользователь увидел текст "Google" и понял, что это ссылка, верно?Хорошо, я скажу вам, что вы должны сделать, чтобы достичь этого.И тебе нужно сделать ... барабанную дробь ... ничего!NVDA, или JAWS (который вы обязательно должны протестировать, это крупный игрок!), Или TalkBack на Android, или VoiceOver на устройствах Apple, скажут: «Link Google» или «Google link» (зависит от программы чтения с экрана ина определенные настройки пользователя).это все.
Конечно, вы могли бы сделать это (но не делайте этого ни в коем случае!):

<a href="https://google.com" aria-label="Link to Google"><span aria-hidden="true">Google</span></a>

Видите, как это безумно (и могущественно!)?Таким образом, вы говорите программе чтения с экрана, что вам нужно, чтобы ваш пользовательский текст был прочитан, и скрываете текст основной ссылки (на всякий случай; я только что протестировал с JAWS, все работает даже без атрибута aria-hidden, так что это просто дляпример).
Однако, если ваша ссылка span с каким-то причудливым стилем, ARIA - это все, что вы: просто скажите <span role="link">, и ваши пользователи получат приятный опыт, вместо того, чтобы найти какое слово длящелкните.
И последний пример: в Bootstrap есть множество украшений, таких как

<i class="fas fa-arrow-up"></i>

Если они находятся по ссылке (и в основном это так), некоторые программы чтения с экрана, такие как JAWS, сообщат о двух ссылкаходин с текстом, а другой пустой, просто "ссылка".В таких случаях очень полезно скрыть это от программ чтения с экрана:

        <i class="fas fa-arrow-up" aria-hidden="true"></i>