Помощь всплывающие подсказки и скрин-ридеры

У меня есть форма ввода, содержащая подсказки для многих ярлыков полей (обычно более значимых, чем пример).

mockup

скачать источник bmml - Каркасы, созданные с помощью Макеты Balsamiq

Каков подходящий /стандартный способ сделать эти всплывающие подсказки всплывающих подсказок доступными?

Достаточно ли просто вставлять всплывающую подсказку в элемент (?)? Если текст справки будет скопирован в атрибут alt или что-то еще?

12 голосов | спросил slicedtoad 14 Jpm1000000pmWed, 14 Jan 2015 20:17:37 +030015 2015, 20:17:37

4 ответа


8

Имейте в виду, что доступность - это больше, чем просто приспособление для чтения с экрана.

Подсказки могут быть неприятными во многих ситуациях:

  • устройства для чтения с экрана (как указано)
  • доступ без мыши (клавиатура, сенсорные устройства и т. д.).
  • проблемы с ловкостью (значки (?) часто очень маленькие)

В общем, вы захотите:

  • сделать цель максимально возможной.
  • сделайте текстовую часть всплывающей подсказки label для поля или используйте aria, чтобы сделать правильные логические соединения
  • убедитесь, что они могут запускаться через onfocus и touch события.

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

ответил DA01 14 Jpm1000000pmWed, 14 Jan 2015 21:04:51 +030015 2015, 21:04:51
2

Включение атрибута alt является первым шагом для поддержки доступности в Интернете.

В WebAIM (Web Accessibility in Mind) есть статья с несколькими советами, Проектирование совместимости с Screen Reader , Среди многих советов есть:

  

Считыватели экрана читают альтернативный текст изображений, если присутствует текст alt. JAWS предшествует альтернативному тексту словом «графический». Если изображение является ссылкой, JAWS предшествует альтернативному тексту с «графической ссылкой».

W3C определил стандарт, называемый WAI-ARIA , который еще больше повышает доступность в Интернете:

  

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

Здесь вы можете найти спецификацию 1.0: http://www.w3.org/TR /WAI-ARIA /

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

  

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

Например, вы можете связать ярлык с текстовое поле и поместите оба из них внутри form . Это обеспечивает доступность программного обеспечения с гораздо лучшим представлением о структуре вашего сайта и может лучше сообщить об этом пользователю.

ответил Evil Closet Monkey 14 Jpm1000000pmWed, 14 Jan 2015 20:52:36 +030015 2015, 20:52:36
1

Пример всплывающей подсказки, приведенный W3C в эта страница идет:

<div class="text">
    <label id="tp1-label" for="first">First Name:</label> 
    <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
    <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is a optional</div>
</div>

В этой странице плагинов доступности для загрузки далее уточняется:

  1. Добавить роль всплывающей подсказки в tooltip div.
  2. Создайте случайный идентификатор, назначьте его в div tooltip и ссылайтесь на него с помощью элемента Tooltip с атрибутом ARIA «описанный ария».
  3. Удалить арию, описанную при скрытой всплывающей подсказке.
ответил Izhaki 15 Jam1000000amThu, 15 Jan 2015 00:10:47 +030015 2015, 00:10:47
1

Подсказки могут быть видны, когда стили отключены, поэтому первое, что вы хотите отключить CSS в своем браузере, и посмотреть, видны ли всплывающие подсказки. Один из способов сделать это - расширение браузера веб-разработчиков. Вот он для Chrome и Firefox . Вы можете перейти к ним и посмотреть, появятся ли они. Если они не видны, когда стили отключены, убедитесь, что всплывающая подсказка доступна только с клавиатуры. Поэтому перейдите к ней с помощью вашей клавиатуры. Он активируется? В дополнение к этому добавьте панель инструментов WAVE в свой браузер и запустите WAVE на своей странице. Это покажет вам ошибки доступности, которые вы, возможно, пропустили. Вот ссылки на Волна для Firefox и Волна для Chrome .

ответил PixelGraph 14 Jpm1000000pmWed, 14 Jan 2015 21:16:24 +030015 2015, 21:16:24

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132