在我们的Web应用程序中，我们使用多个“响应式” 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>您是否认为此解决方案可能是可访问性的问题，并且有人能更好地解决该问题吗？谢谢
最佳答案
总的来说，我会同意@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"类也来自引导程序。请参见What is sr-only in 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>读数后将其静音）。