Question

在我们的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>

您是否认为此解决方案可能是可访问性问题，并且有人能更好地解决该问题吗？谢谢

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>

（"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>阅读后将其静音）。

Answer 2

将焦点放在元素上只是为了使其可以使用键盘滚动是一个坏主意。

屏幕阅读器用户根本不关心滚动，因为他们看不到它。因此，它们将落在显然没有任何作用的可聚焦元素上。真令人沮丧。
通常无法使用鼠标的有视力的人还有其他滚动方式：轮盘赌，专用键或手势，特殊眼动等。

到目前为止，最好的解决方案是完全消除水平滚动。即使对于普通用户来说，这也是可用性。重新布置您的布局，但不惜一切代价避免。

我们都习惯了垂直滚动，但实际上不是水平滚动。许多人发现水平滚动令人困惑，甚至错过了信息，却根本没有意识到他们可以在右侧滚动。

Answer 3

您可以在表的末尾或用户可以轻松访问的其他位置提供两个按钮来上下滚动，而不是使用表上的tabindex属性。我认为这对所有用户（包括具有指点设备的用户等）都更好。

仅在某些条件下具有交互性的元素的Tabindex

3 个答案: