0

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

您是否认为此解决方案可能是可访问性的问题，是否有人对我如何解决它有更好的了解？谢谢

4

3 回答 3

3

总的来说，我同意@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"课程也来自引导程序。请参阅Bootstrap 3 中的 sr-only 是什么？。您不必使用引导程序，但可以创建自己的类似类。）

然而，允许表格接收焦点的一个缺点是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 的问题，也许确实如此。当一个对象获得焦点时，它的可访问名称应该被宣布。在表格的情况下，可访问的名称是表格的内容，尽管人们也可以争辩说可访问的名称应该是 the <caption>，这就是应该阅读的全部内容。如果您认为该行为不正确，您可以为 NVDA 提交错误。如果表格没有，<caption>那么我可以看到正在读取的全部内容，所以我认为你有一个 NVDA 错误的案例。

我尝试通过将 , 和 放在桌子上（不是同时）来解决它，title但aria-label总是aria-labelledby读取整个表格（除了标题或标签）。

但我也再次同意@quentinc，如果可能的话，应该避免水平滚动。在 Internet Explorer 上，在您实际开始滚动（使用键盘）之前，您甚至看不到水平滚动条，因此您可能不知道右侧还有更多信息，除非您可以看到表格边缘的一些文本。（注意，如果您将鼠标悬停在表格上，则会出现滚动条，但我们谈论的是键盘用户。）

形势严峻。没有焦点，键盘用户无法滚动表格。有了焦点，屏幕阅读器可能会听到各种额外的东西。在前者中，没有任何解决方法。在后者中，虽然听到所有阅读内容很吵，但屏幕阅读器用户可以点击ctrl以立即使屏幕阅读器静音（希望他们在听到<caption>阅读后将其静音）。

于 2018-12-04T02:06:38.860 回答
0

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

  • 屏幕阅读器用户根本不关心滚动，因为他们看不到它；所以他们将落在一个显然什么都不做的可聚焦元素上。这令人沮丧。
  • 不能使用鼠标的有视力的人通常有其他滚动方式：轮盘赌、专用键或手势、特殊眼球运动等。

到目前为止，最好的解决方案是完全摆脱水平滚动。即使对于普通用户来说，这也是一个可用性问题。根据需要重新排列布局，但不惜一切代价避免它。

我们都习惯于垂直滚动，但实际上不是水平滚动。许多人发现水平滚动非常混乱，甚至错过了信息而根本没有注意到他们可以在右侧滚动。

于 2018-12-03T17:26:33.953 回答
0

代替表格上的 tabindex 属性，您可以在表格的末尾或用户可以轻松访问的其他位置提供两个按钮用于向上滚动和向下滚动。我认为这对所有用户来说会更好，包括使用指针设备的用户等。

于 2018-12-05T18:47:55.420 回答