html - 仅在特定条件下交互的元素上的 Tabindex

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>

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

标签： htmlcsshtml-tableaccessibilityweb-accessibility

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"课程也来自引导程序。请参阅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>阅读后将其静音）。