Сделайте определенные элементы доступными только для чтения с экрана

Question

Я работаю над доступностью пользовательского интерфейса и хочу добавить определенный элемент к элементу, который затем будет прочитан программным обеспечением для чтения с экрана. Например, для каждого элемента <li> я хочу добавить сообщение «Переключаться между элементами с помощью клавиш со стрелками». Есть ли способ добавить такое сообщение? Переопределение aria-label, к сожалению, не вариант.

Answer 1

Ваша лучшая ставка, вероятно, будет использовать визуально скрытый класс в CSS, «взлом», который означает, что текст не визуализируется визуально, но все же объявляется программами чтения с экрана. Например

<li>My text my text <span class="visually-hidden">Switch through the elements using arrow keys</span></li>

К сожалению, вам придется повторять один и тот же текстовый элемент в конце каждого <li>, это не может повторяться автоматически (при использовании CSS ::after и content: очень неравномерно поддерживается различными поставщиками программ чтения с экрана).

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

• У вас есть пользовательские интерактивные элементы в этих <li>? В таком случае, не могут ли они быть представлены с использованием другой роли ARIA, а не объявлены в виде списка?
• Вы просто инструктируете пользователей, как перейти к строке ниже? Они, вероятно, не нуждаются в этом: люди, которые ежедневно пользуются программой чтения с экрана, знают основы ее работы и знают, как перемещаться по списку. Добавление этого везде может расстроить их. Также помните, что самые разные программы чтения с экрана уже дают инструкции.
• Если нет: у вас есть какое-то нестандартное взаимодействие, когда вы фиксируете событие нажатия клавиши со стрелкой вниз в Javascript? Это не всегда будет хорошо работать с программами чтения с экрана, обязательно протестируйте его и предоставьте альтернативу.
• В тех редких случаях, когда вам нужно добавить рекомендации только для SR, будьте осторожны с использованием таких языков, как «используйте клавиши со стрелками». Это не обязательно имеет смысл, если они находятся на мобильном телефоне или планшете, или если они используют клавиатуру Брайля, или даже в зависимости от их сочетания клавиш и программы чтения с экрана (например, VoiceOver на Mac не будет переходить на следующую строку с стрелка вниз, если QuickNav не включен).

Answer 2

WebAIM имеет руководство по этому и рекомендует использовать абсолютное позиционирование. Также есть еще одно полезное руководство , которое стоит прочесть в TheA11yproject

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

.screen-reader-only 
{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

И тогда вы добавите класс для текста, которым вы хотите быть, ну, в общем, только для программ чтения с экрана. Э.Г.

<div class="screen-reader-only"><a href="#main">Skip to main content</a></div>

Естественно, вы можете назвать класс hidden или visually-hidden или что-то еще, что имеет для вас наибольшее значение.

Предостережение

Я бы использовал эту технику экономно и с учетом опыта пользователя при навигации.

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

  <li><span class="screen-reader-only">.... </span>...</li>

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

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

Answer 3

title="Switch through the elements using arrow keys" может быть?