屏幕阅读器会全部读取，但不会对其进行选项卡

Question

所以我有一个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>

直接到继续审查的订单摘要按钮，完全跳过OrderSummary.js中的表。

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

我该如何解决？

Answer 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

Answer 2

尝试在要通过的所有html元素上添加tabindex =“1”，tabindex =“2”等。

Answer 3

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

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

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

<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并且我向下移动了一个单元格，我会听到“玛丽36”而不是“36”，并且会知道36个是玛丽。

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

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

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