Программа чтения с экрана читает все, но не вкладывает к ней

Question

Итак, у меня есть приложение реагирования на электронные коммерции, и у меня возникла проблема с выяснением того, как заставить программу чтения с экрана перейти от раздела оплаты к компоненту сводки заказа и прочитать сводку заказа.

Теперь, если я нажму на содержимое сводки заказа, которое представляет собой таблицу, включая заголовок 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" для элементов, которые вы хотите видеть в порядке вкладок, исправит это. tabindex = "0" добавит каждый элемент в порядке табуляции в зависимости от расположения в исходном коде. По умолчанию только интерактивные элементы размещаются в порядке табуляции.

Хотя в качестве примечания не рекомендуется добавлять неинтерактивные элементы в порядок вкладок: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

Answer 2

Использование tabindex из 0 вместо положительного числа является отличным решением, но, как упоминает @CodyS в конце своего поста, помещать неинтерактивные элементы в порядке табуляции крайне не рекомендуется.

Если вы обеспокоены тем, что пользователь программы чтения с экрана не найдет таблицу или не сможет ее прочитать, если ваша страница хорошо организована, это не должно быть проблемой. Под «хорошо организованной» я подразумеваю, что разделы логически сгруппированы с соответствующими <nav>, <section> и другими структурами документа элементами, у вас есть подходящее использование заголовков (<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» и я опустился на одну ячейку, я бы услышал «Мэри 36» вместо просто «36» и знал бы, что 36 относится к Мэри.

Когда вы говорите о переходе из раздела «оплата» в раздел «Сводка заказа», если эти два раздела в буквальном смысле имеют элемент <section>, то пользователь программы чтения с экрана может перемещаться по ориентирам и легко найти различные разделы.

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

aria-label будет считываться программой чтения с экрана, но визуально не отображается на экране.

Answer 3

Попробуйте добавить tabindex = "1", tabindex = "2" и т. Д. На все html-элементы, через которые вы хотите перейти.