В целом, я бы согласился с @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>
(Класс "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>).