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

Question

在我们的 Web 应用程序中，我们使用多个 "responsive" HTML tables — 如果内容太宽，它们可以水平滚动（CSS 规则：width:100%; overflow-x: auto;).这允许在 table 中显示所有必要的信息，而不会破坏布局并使整个页面可水平滚动。

在我们的例子中，这仅与小屏幕相关（在调整大小的浏览器 windows 或用户将字体大小增加超过 200% 时），因为我们的 table 不是那么大（请注意，该应用程序是内部应用程序，只能在 laptop/desktop 屏幕上使用）。

不幸的是，键盘用户无法使用 overflow-x 使内容水平滚动 — 滚动内容的唯一方法是使用鼠标；仅当整个页面可滚动或元素具有焦点时，使用箭头键才有效。

所以，为了让我们的 table 可以用键盘控制，我正在考虑向它们添加 tabindex="0" 从而允许使用箭头键。如果 table 是可滚动的，这似乎工作正常，但也意味着非交互元素（大屏幕上的 table ）可以获得焦点，这可能会导致键盘用户混淆。

这是一个小例子（用 Bootstrap 制作，省去写一些 CSS）。调整浏览器大小window进行测试：

<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

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

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

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

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

Answer 2

总的来说，我同意@quentinc 的观点，将焦点放在 non-interactive 元素上并不理想（我不会说它是 "bad idea"），但是它确实为键盘用户提供了一种滚动方式。我使用键盘进行大部分互动，而且我没有任何其他滚动方式。我不知道轮盘赌是什么，据我所知，浏览器没有任何用于水平滚动的专用键，除了 left/right 箭头，你已经提到滚动页面而不是 table, 除非 table 可以得到焦点，所以才会有这个问题。

在 firefox 上，table 将已经获得焦点，因为任何时候容器都有滚动条，firefox 允许焦点移动到那个 object，特别是允许滚动。所以你已经在 firefox 中获得了你想要的行为。您只是想为 chrome、Safari 和 Internet Explorer 启用相同的行为。

如果你把tabindex="0"放在table上，你也可以在table上添加一个视觉上隐藏的<caption>来告诉屏幕reader焦点已移至 table 以允许键盘用户水平滚动。像这样：

<table class="table table-responsive" tabindex="0">
  <caption class="sr-only">table receives focus so keyboard users can scroll it</caption>

（"sr-only" class 也来自 bootstrap。参见 What is sr-only in Bootstrap 3?。您不必使用 bootstrap，但可以创建自己的class 类似。)

但是，允许 table 获得焦点的一个缺点是 NVDA 将在获得焦点时宣布 table 的全部内容。这有点烦人。 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 的问题，也许确实如此。当 object 获得焦点时，应该宣布它的可访问名称。在 table 的情况下，可访问名称是 table 的内容之一，尽管也有人认为可访问名称应该是 <caption>，这就是应该阅读的全部内容.如果您认为行为不正确，可以为 NVDA 提交错误。如果 table 没有 <caption>，那么我可以看到正在阅读的全部内容，所以我认为你有一个 NVDA 错误的案例。

我尝试通过在 table 上放置 title、aria-label 和 aria-labelledby 来解决这个问题（不是同时）但是整个 table 总是被阅读（除了标题或标签）。

但我也再次同意@quentinc 的观点，即尽可能避免水平滚动。在 Internet Explorer 上，在真正开始滚动（使用键盘）之前，您甚至看不到水平滚动条，因此您可能不知道右侧有更多信息，除非您可以看到 table。（请注意，如果您将鼠标悬停在 table 上，则会出现滚动条，但我们谈论的是键盘用户。）

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

Answer 3

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

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

Tabindex on elements that are interactive only under certain conditions

html

css

accessibility

html-table

web-accessibility