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

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

Answer 2

将tabindex =“ 0”设置为要按Tab键顺序排列的元素将解决此问题。 tabindex =“ 0”将根据源代码中的位置按Tab键顺序添加每个元素。默认情况下，制表符顺序仅将interactive elements放入

。

尽管注意，但不建议将非交互式元素添加到制表符顺序中：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

Answer 3

使用0的tabindex而不是正数是一个很好的选择，但是正如@CodyS在其文章末尾提到的那样，强烈建议不要将非交互式元素置于制表符顺序中。

如果您担心屏幕阅读器用户无法找到该表或无法读取该表，并且您的页面井井有条，则应该没问题。通过“井井有条”，我的意思是将各节按适当的<nav>，<section>和其他document structure元素进行逻辑分组，您可以适当使用标题（<h1>，{{ 1}}等），并且您的表格格式正确（<h2>）。这样做意味着屏幕阅读器用户可以使用特殊的导航快捷键来查找所有这些元素，并获得页面布局的概述。

自从您提到表格以来，请确保您具有定义明确的列标题（<th scope="col">），但也有行标题（<th scope="col">）。行标题通常被忽略，但是在使用屏幕阅读器浏览表格时，它们非常有用。如果我在表格中间的单元格中，并且垂直向下浏览列（ ctrl + alt + downarrow 阅读器），那么我将听到该单元格的值，但可能不知道该单元格的值与之关联。如果您有行标题，则将在宣布单元格值之前宣布行标题，并为单元格提供上下文。表中的第一列通常用作行标题，即使它仅包含值也是如此。像这样：

<th scope="row">

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

当您谈论从“付款”部分移至“订单摘要”部分时，如果这两个部分在字面上都包含<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>元素，那么屏幕阅读器用户可以按landmarks进行导航，然后轻松找到不同的部分。

<section>

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

屏幕阅读器会读取所有内容，但不会对其进行制表

3 个答案: