Screen reader reads it all, but does not tab to it

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

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