Tabindex на элементы, которые являются интерактивными только при определенных условиях

Question

В нашем веб-приложении мы используем несколько "отзывчивых" HTML-таблиц - их можно прокручивать по горизонтали, если их содержимое становится слишком широким (правила CSS: width:100%; overflow-x: auto;). Это позволяет отображать всю необходимую информацию в таблице, не нарушая разметку и делая горизонтальную прокрутку всей страницы.

В нашем случае это относится только к маленьким экранам (в окнах браузера с измененным размером или если пользователь увеличивает размер шрифта более чем на 200%), поскольку наши таблицы не такие большие (обратите внимание, что приложение является внутренним и будет использоваться только на экранах ноутбуков / настольных компьютеров).

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

Итак, чтобы сделать наши столы управляемыми с клавиатуры, я подумал о добавлении tabindex="0" к ним и, таким образом, позволяя использовать клавиши со стрелками. Кажется, это работает нормально, если таблица прокручиваема, но также означает, что неинтерактивный элемент (таблица на большом экране) может получить фокус, что может привести к путанице у пользователей клавиатуры.

Вот небольшой пример (сделанный с помощью Bootstrap, чтобы сэкономить на написании CSS). Измените размер окна браузера, чтобы проверить его:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h1>Some heading</h1>
<a href="#">First link (for tabbing purposes)</a>

<table class="table table-responsive" tabindex="0">
    <thead>
        <tr>
           <th scole="col">Column 1</th>
           <th scole="col">Column 2</th>
           <th scole="col">Column 3</th>
           <th scole="col">Column 4</th>
           <th scole="col">Column 5</th>
           <th scole="col">Column 6</th>
           <th scole="col">Column 7</th>
        </tr>
    </thead>

    <tbody>
        <tr>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
           <td>Lorem ipsum</td>
        </tr>
    </tbody>
</table>

<a href="#">Second link (for tabbing purposes)</a>

Считаете ли вы, что это решение может быть проблемой для доступности, и есть ли у кого-нибудь лучшее представление о том, как я могу его решить? Спасибо

Answer 1

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

В Firefox таблица уже получит фокус, потому что всякий раз, когда контейнер имеет полосу прокрутки, Firefox позволяет фокусу перемещаться к этому объекту, особенно для прокрутки. Таким образом, вы уже получаете поведение, которое вы хотите в Firefox. Вы просто пытаетесь включить такое же поведение для Chrome, Safari и Internet Explorer.

Если вы положите tabindex="0" на стол можно также добавить визуально скрытый <caption> к таблице, чтобы сообщить программе чтения с экрана, что фокус был перемещен на таблицу, чтобы позволить пользователям клавиатуры осуществлять горизонтальную прокрутку. Что-то вроде этого:

<table class="table table-responsive" tabindex="0">
  <caption class="sr-only">table receives focus so keyboard users can scroll it</caption>

(The "sr-only" класс тоже из начальной загрузки Смотрите Что такое sr-only в Bootstrap 3?, Вам не нужно использовать начальную загрузку, но вы можете создать свой собственный класс, который похож.)

Тем не менее, один из недостатков того, что таблица получает фокус, заключается в том, что NVDA объявит все содержимое таблицы, когда получит фокус. Это немного раздражает. Вот что говорит NVDA:

table  with 2 rows and 7 columns 
table receives focus so keyboard users can scroll it
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

Вы можете утверждать, что это проблема с NVDA, и, возможно, это так. Когда объект получает фокус, его доступное имя должно быть объявлено. В случае таблицы доступное имя является своего рода содержимым таблицы, хотя можно также утверждать, что доступное имя должно быть <caption> и это все, что следует прочитать. Вы можете отправить сообщение об ошибке для NVDA, если считаете, что поведение некорректно. Если на столе не было <caption>, тогда я мог видеть, что все содержимое читается, поэтому я думаю, что у вас есть случай, что NVDA не так.

Я пытался обойти это, поставив title, aria-label, а также aria-labelledby на столе (не все одновременно), но всегда читалась вся таблица (в дополнение к заголовку или метке).

Но я также согласен с @quentinc, что горизонтальной прокрутки следует избегать, если это возможно. В Internet Explorer вы даже не видите горизонтальную полосу прокрутки, пока не начнете прокручивать (с помощью клавиатуры), поэтому вы можете не знать, что справа есть дополнительная информация, если вы не видите часть текста, обрезанного по краю таблицы. (Обратите внимание, полоса прокрутки появляется, если вы наводите курсор мыши над столом, но мы говорим о пользователях клавиатуры.)

Сложная ситуация. Без фокуса пользователь клавиатуры не может прокручивать таблицу. С акцентом читатель экрана может услышать все виды дополнительных вещей. В первом случае нет никакого обходного пути. В последнем, хотя слышно все, что читает, пользователь программы чтения с экрана может нажать ctrl, чтобы немедленно отключить программу чтения с экрана (и, надеюсь, они отключат ее, услышав <caption> читать).

Answer 2

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

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

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

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

Answer 3

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