屏幕阅读器阅读所有内容，但不使用标签答案

【问题标题】：Screen reader reads it all, but does not tab to it屏幕阅读器阅读所有内容，但不使用标签
【发布时间】：2018-09-11 20:30:19
【问题描述】：

所以我有一个 react-redux 电子商务应用程序，但在弄清楚如何让屏幕阅读器从支付部分转到订单摘要组件并阅读订单摘要时遇到了问题。

现在，如果我点击订单摘要内容，这是一个表格，包括 h4 标题，屏幕阅读器会读取它，但我无法从付款部分选择它。

这是 OrderSummary.js 文件：

    <h2 className="title h3">Order Summary</h2>
              <table className="subtotal-wrapper body-color">
                <caption className="screen-reader-text">Order Summary</caption>
                <tbody>
                  <tr>
                    <th>Subtotal:</th>
                    <td>${formatPrice(this.props.orderSummary.originalSubtotal)}</td>
                  </tr>
                  {showShippingCost(this.props.orderSummary.totalShippingCost, this.props.orderSummary.totalShippingDiscount)}
                  <tr>
                    <th>Est Sales Tax:</th>
                    <td>${formatPrice(this.props.orderSummary.totalEstimatedTax)}</td>
                  </tr>
                  {getOptionalComponent('Total Savings:', this.props.orderSummary.discountedSubtotal)}
                </tbody>
              </table>

因此，当切换时，ChromeVox 和 VoiceOver 将从 Address.js 组件中的这个表单开始：

<form className="marketing-offer" onSubmit={doNothing} >
              <Checkbox
                name="marketingOptIn"
                checked={!!this.props.marketingOptIn}
                onChange={this.props.handleMarketingOptInChange}
              >
                <span className="payment-option special-offers">Yes! I would like to receive updates, special offers, and other information from shopDisney and The Walt Disney Family of Companies.</span>
              </Checkbox>
            </form>

直接到Continue to Review的订单汇总按钮，完全跳过OrderSummary.js中的表格。

如果我故意点击它，它会读取它，但它不会像我想要的那样从Address.js 到OrderSummary.js 内的表单字段中的复选框中选择标签。

我该如何解决这个问题？

【问题讨论】：

标签： javascript react-redux screen-readers

【解决方案1】：

将 tabindex="0" 设置为您希望按 Tab 键顺序排列的元素将解决此问题。 tabindex="0" 将根据源代码中的位置按 Tab 键顺序添加每个元素。默认情况下，只有interactive elements 被放入 Tab 键顺序中。

虽然作为说明，但不建议在 Tab 键顺序中添加非交互元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

【讨论】：

所以 Cody，你的实现对我来说是有效的，但是有一条令人讨厌的线会在任何 HTML 元素之外呈现运输和处理{showShippingCost(this.props.orderSummary.totalShippingCost, this.props.orderSummary.totalShippingDiscount)}，不知道如何处理。
showShippingCost(...) 返回什么？如果它只是返回一个数字，那么您应该能够在其周围放置一个标签，其中 tabindex="0" 在 span 标签中

【解决方案2】：

尝试在您想要通过标签浏览的所有 html 元素上添加 tabindex="1"、tabindex="2" 等。

【讨论】：

我建议将此作为最后的手段。使用正的 tabindex 将覆盖自然的跳格顺序，维护和处理好这可能会很痛苦。

【解决方案3】：

使用 0 的 tabindex 代替正数是很好的建议，但正如 @CodyS 在他的帖子末尾提到的那样，非常不鼓励将非交互式元素放在制表符顺序中。

如果您担心屏幕阅读器用户找不到表格或无法阅读表格，如果您的页面组织良好，这应该不是问题。通过“组织良好”，我的意思是部分按适当的<nav>、<section> 和其他document structure 元素进行逻辑分组，您可以适当地使用标题（<h1>、<h2> 等）和您的表格格式良好（<th scope="col">）。这样做意味着屏幕阅读器用户可以使用特殊的导航快捷键来查找所有这些元素并大致了解您的页面布局。

既然您提到了表格，请确保您有明确定义的列标题 (<th scope="col">)还有行标题 (<th scope="row">)。行标题经常被忽略，但在使用屏幕阅读器导航表格时它们非常有用。如果我在表格中间的一个单元格中并且我在列中垂直向下导航 (ctrl+alt+downarrow 有一个屏幕阅读器），然后我会听到单元格值，但可能不知道单元格值与什么相关联。如果你有一个行标题，那么行标题将在单元格值被宣布之前被宣布，并为单元格提供上下文。表中的第一列通常用作行标题，即使它只包含值。像这样的：

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Favorite Color</th>
  </tr>
  <tr>
    <th scope="row">Jane</th>
    <td>35</td>
    <td>Red</td>
  </tr>
  <tr>
    <th scope="row">Mary</th>
    <td>36</td>
    <td>Blue</td>
  </tr>
  <tr>
    <th scope="row">Cindy</th>
    <td>37</td>
    <td>Green</td>
  </tr>
</table>

如果我的屏幕阅读器“焦点”位于 35 并且我向下移动了一个单元格，我会听到“Mary 36”而不是“36”，并且会知道 36 指的是 Mary。

当您谈到从“付款”部分移动到“订单摘要”部分时，如果这两个部分几乎都有 <section> 元素，那么屏幕阅读器用户可以通过 landmarks 导航并轻松找到不同的部分。

<section aria-label="payment options">
  ...
</section>
<section aria-label="summary of order">
  ...
</section>

aria-label 将被屏幕阅读器读取，但不会在屏幕上直观显示。

【讨论】：