Лучшая практика: зашифрованные адреса электронной почты в a-elements и программах чтения с экрана

Согласно экрану Accessibility Project, необходимо использовать JavaScript.

Среди веб-разработчиков распространено заблуждение, что программы чтения с экрана читают только страницы, не использующие JavaScript. Из-за этого заблуждения мы иногда полагаем, что нет необходимости делать приложения JavaScript и другие функции доступными. Это категорически неверно.

Источник: МИФ: программы чтения с экрана не используют JavaScript

Вопрос для меня по-прежнему, каким образом?

Я размещаю похожие электронные письма с помощью JavaScript. Небольшая функция расшифровывает значение и сохраняет его в атрибуте href, а также заменяет текст заполнителя:

<a data-value="[encrypted email]">This E-Mail is being protected against bots. […]</a>

В готовом документе это становится примерно таким:

<a href="mailto:somebody@somedmaincom">somebody@somedmaincom</a>

Мои вопросы:

  • Доступен ли этот способ?
  • Должен ли я применять роль aria в дополнение к тому, чтобы прояснить, что контент заменяется реальными значениями с помощью JavaScript?

person lampshade    schedule 05.08.2014    source источник


Ответы (1)


Это доступно? Это зависит от вашей функции JavaScript. Проще было бы посмотреть страницу, где это реализовано.

Несколько комментариев:

В общем, что касается программы чтения с экрана, ссылка - это ссылка, и программа чтения с экрана просто прочитает текст ссылки («Это электронное письмо защищено ...») и тот факт, что это ссылка. Браузер должен что-то сделать, когда ссылка активирована (но см. Комментарии ниже).

В вашем примере кода нет атрибута href. Обычно это означает, что «ссылка» (она не рассматривается как ссылка без href) не может быть достигнута с помощью клавиатуры, что было бы проблемой доступности. Исправьте это, добавив href (с любым значением), например добавить href = "#".

Как вы запускаете свой сценарий? Пользователь программы чтения с экрана будет использовать клавиатуру, поэтому вы получите нажатие клавиши ввода, чтобы активировать ссылку. Вы следите за событиями щелчка мыши? Ссылки (‹a href...›) - это особый случай, нажатие Enter на ссылке вызовет событие onclick, поэтому при переходе по ссылке здесь все должно быть в порядке.

Вы упоминаете текст-заполнитель: это ссылка, а не поле ввода, поэтому я предполагаю, что вы изменили текст ссылки? Как ты это делаешь? Если это происходит при наведении курсора мыши, это не срабатывает для пользователей клавиатуры (включая программу чтения с экрана). Добавьте, например, событие onfocus, которое запускает ту же функцию, когда фокус клавиатуры достигает этого поля.

Когда вы изменяете текст ссылки с помощью JavaScript, заставка должна «увидеть» изменение и прочитать новый текст (если он все еще читает старый текст, попробуйте другой метод изменения текста ссылки, есть несколько способов сделать это в JavaScript) . Я не уверен, что заставка сразу же прочитает новый текст или вам нужно снова переместить фокус программы чтения с экрана обратно на текст. Вы можете заставить заставку читать новый текст (независимо от того, где находится фокус), добавив атрибут role = "alert" к элементу контейнера, содержащему текст.

Если у вас есть какие-либо другие события мыши, вам также необходимо добавить соответствующие события клавиатуры. Но я думаю, это все. Разместите ссылку на страницу с примером, и я смогу прокомментировать дальше.

person ssollinger    schedule 08.08.2014
comment
Я обновил вопрос, чтобы сделать преобразование более понятным. Текст-заполнитель (я имею в виду текст в a-элементе перед преобразованием;)) заменяется и, конечно же, добавляется href-атрибут. Это происходит с готовым документом. Так будет ли программа чтения с экрана видеть обновленную ссылку в любом случае и все ли функции JavaScript выполняются, как при доступе к странице без программы чтения с экрана? Разрешает ли программа чтения с экрана изменять текст с помощью JavaScript? Большое спасибо за ваши усилия. - person lampshade; 12.08.2014
comment
Спасибо за разъяснения. Вероятно, это сработает, но зависит от ваших сценариев. Есть ли образец страницы / демонстрационной страницы, которую я могу протестировать с помощью программы чтения с экрана? - person ssollinger; 09.09.2014