Должен ли текст когда-либо фокусироваться для доступности? Я специально думаю о парах ключ-значение - PullRequest
Новая
       48

Должен ли текст когда-либо фокусироваться для доступности? Я специально думаю о парах ключ-значение

3 голосов
/ 21 января 2020

Каков наилучший способ сделать что-то вроде следующего доступным? В настоящее время у меня есть следующее: 

<div tabindex="0" aria-labelledby="key1" aria-describedby="value1">
    <label id="key1">Current User:</label>
    <span id="value1">BBRENNAN</span>
</div>

Обязательно ли для этого блока быть фокусируемым с tabindex="0"? Или читатели экрана могут вывести эти отношения более естественно? Я понимаю, что программы чтения с экрана обычно могут найти и прочитать текст, но мне не ясно, как обеспечить передачу отношений между Current User и BBRENNAN.

РЕДАКТИРОВАТЬ: я просто просматривал списки определений, которые кажутся ближе к тому, что мне нужно. Возможно, вы также можете утверждать, что это табличные данные, и вам следует использовать таблицу. Совершенно хорошо, если эти решения действительно являются лучшими практиками, но одна вещь, которая мне нравится в aria-labelledby и aria-describedby, это то, что фокусировка на внешнем div хорошо читает все в NVDA. Таким образом, вышеприведенное будет выглядеть как «Текущий пользователь, BBRENNAN».

По определению списки определений читаются как «Список с 2 элементами, текущий пользователь». Таблицы просто позволяют мне использовать клавиши со стрелками для перемещения ридера между ячейками, что также не дает того, что я описал выше. Ссылка для 5-летней темы на эту самую топи c: https://webaim.org/discussion/mail_thread?thread=7089

Ответы [ 2 ]

0 голосов
/ 25 января 2020

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

Даже если список определений (<dl>) не работает должным образом использование <label> не является правильным способом сделать это, поскольку метки предназначены для маркировки полей ввода.

Текст не должен быть фокусируемым, поскольку frodo2975 уже ответил правильно "[t ] общее правило заключается в том, что [только] интерактивные элементы должны быть табулируемыми ». Однако это не обязательно означает, что он должен быть кликабельным - интерактивный также может означать прокручиваемость, например.

Я думаю, что наилучшим решением было бы просто использовать общий элемент c, такой как <div> или <span>: 

<div>Current user: <span class="current-user">BBRENNAN</span></div>

Разделять действительное имя пользователя на собственное <span> необязательно, но это позволит вам легко идентифицировать элемент с помощью JavaScript или CSS, если необходимо.

Однако это действительно зависит от конкретного варианта использования: каково его назначение? Это подсказка для пользователей, чтобы они знали, с каким пользователем они в настоящее время вошли в систему? Или что-то вроде маркера, который сообщает пользователям, которые в данный момент работают над задачей, или что-то в этом роде?

Обновление:
Что касается вашего комментария, вы хотите, чтобы компонент для повторного использования отображался "ключ" пары значений, обычно подряд ». Я бы предложил использовать <table>: 

<table>
  <tr>
    <th>Current user:</th>
    <td>BBRENNAN</td>
  </tr>
</table>

Это естественный выбор, поскольку таблицы предназначены для представления данных.

0 голосов
/ 25 января 2020

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

https://webaim.org/techniques/keyboard/

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

...