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

Question

So I have a react-redux e commerce app and I am having a problem figuring out how to get the screen reader to go from the payment section over to the order summary component that and read the order summary.

Now if I click on the order summary contents which is a table, including the h4 header,the screen reader does read it, but I can't tab to it from the payment section.

This the OrderSummary.js file:

    <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>

So when tabbing, ChromeVox and VoiceOver will go from this form in the Address.js component:

<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>

straight to the order summary button of Continue to Review, completely skipping the table in OrderSummary.js .

It does read it if I deliberately click on it, but it does not tab from the checkbox in the form field inside Address.js to OrderSummary.js as I would like.

How do I fix this?

Answer 1

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

Answer 2

Setting tabindex="0" to the elements you want to be in the tab order will fix this. tabindex="0" will add each element in the tab order based on the location in source code. By default only interactive elements are put into the tab order.

Although as a note, it is not recommended to add non-interactive elements into the tab order: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

Answer 3

Using a tabindex of 0 instead of a positive number is great adivce, but as @CodyS mentions at the end of his post, putting non-interactive elements in the tab order is highly discouraged.

If you are concerned that a screen reader user will not find the table or be able to read it, if your page is well organized, it shouldn't be a problem. And by "well organized", I mean sections are logically grouped with appropriate <nav> , <section> and other document structure elements, you have appropriate use of headings ( <h1> , <h2> , etc), and your tables are well formed ( <th scope="col"> ). Doing so means a screen reader user can use special navigation shortcut keys to find all these elements and get an overview of your page layout.

Since you mentioned tables, make sure you have well defined column headers ( <th scope="col"> ) but also row headers ( <th scope="row"> ). Row headers are often overlooked but they are tremendously helpful when navigating a table with a screen reader. If I'm in a cell in the middle of the table and I navigate vertically down the column ( ctrl + alt + downarrow with a screen reader), then I will hear the cell value but might not know what the cell value is associated with. If you have a row header, then the row header will be announced before the cell value is announced and it gives context to the cell. The first column in a table is often used as the row header, even if it just contains values. Something like this:

<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>

If my screen reader "focus" were on 35 and I moved down one cell, I'd hear "Mary 36" instead of just "36" and would know that 36 referred to Mary.

When you talk about moving from the "payment" section to the "order summary" section, if those two sections litterally have a <section> element, then a screen reader user can navigate by landmarks and easily find the different sections.

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

The aria-label will be read by the screen reader but is not visually displayed on the screen.