react-redux - 为什么屏幕阅读器会读取一个 RadioButton 但会跳过其余的？

Question

我正在尝试了解屏幕阅读器的工作原理，以便我可以使我的所有反应组件屏幕阅读器都可以访问。

所以我有一个接受信用卡付款的组件，它读取选择的信用卡单选按钮及其所有内容，但是当您选择礼品卡单选按钮或尝试时，它会跳过所有其他单选按钮并直接转到运输单选按钮。

为什么这样做？

这是代码：

return (
      <div className="payment-type summary">
        {isCCAllowed &&
        <div className="payment-choice">
           <RadioButton
              type="radio"
              name="type"
              value={PaymentTypeEnum.CREDIT_CARD}
              checked={this.state.type === PaymentTypeEnum.CREDIT_CARD}
              onChange={this.handleInputChange}>
            <h4 className="inline description payment-option h5">{PaymentHelper.getCreditCardChoiceTitle(this.state.paymentCardTypes)}</h4>
          </RadioButton>
          {PaymentHelper.getPaymentIconsStripe(this.state.paymentCardTypes)}
        </div>
        }
        {displayCC &&
          <div className="cc-accordion-container">
            <PaymentMethodsFromWallet
              paymentCardTypes={this.state.paymentCardTypes}
              onFormCompleted={this.handlePaymentCompleted}
              onFormInvalid={this.handlePaymentInvalid}
              exteralErrors={this.props.paymentTypeErrors}
              onExternalErrorsResolved={this.props.handlePaymentTypeExternalErrorsResolved}
              revalidate={this.props.revalidate}
              onRevalidateComplete={this.props.onRevalidateComplete}
            />
          </div>
        }
        {isGCAllowed &&
        <div className="payment-choice">
          <RadioButton
            type="radio"
            name="type"
            value={PaymentTypeEnum.GIFT_CARD}
            checked={this.state.type === PaymentTypeEnum.GIFT_CARD}
            onChange={this.handleInputChange}>
            <h4 className="description payment-option h5">Disney Gift Card</h4>
          </RadioButton>
          {PaymentHelper.getPaymentIcon(PaymentTypeEnum.GIFT_CARD)}
        </div>
        }

上面的代码是针对 PaymentType.js 的一个组件

我同时使用 ChromeVox 和 Mac VoiceOver 并获得相同的行为。我看不出代码本身有什么不同。那么为什么它会跳过其余的单选按钮，我该如何解决呢？

标签： react-reduxaccessibility

Answer 1

即使没有反应，单选按​​钮的选项卡也是基于按钮组，而不是每个单独的按钮。

您选择按钮组，然后使用箭头键在组中的按钮之间移动。

检查这个简单示例的行为 - 您将使用选项卡切换到每个复选框，但只切换到第一个或当前选定的单选按钮。尝试将这样的选项卡和箭头与您自己的现有标记一起使用，并查看屏幕阅读器的行为方式。

div { margin: 1em; }
ul { list-style-type: none; }

<div id="checks" style="background-color:lightyellow;border:1px solid black;">
    <ul>
        <li><label><input type="checkbox" name="one"> something one </label></li>
        <li><label><input type="checkbox" name="two"> something two </label></li>
        <li><label><input type="checkbox" name="three"> something three </label></li>
        <li><label><input type="checkbox" name="four" checked> something four </label></li>
    </ul>
</div>


<div id="radios1" style="background-color:lightgreen;border:1px solid black;">
    <ul>
        <li><label><input type="radio" name="set-one" value="A"> One A </label></li>
        <li><label><input type="radio" name="set-one" value="B"> One B </label></li>
        <li><label><input type="radio" name="set-one" value="C"> One C </label></li>
        <li><label><input type="radio" name="set-one" value="D"> One D </label></li>
    </ul>
</div>


<div id="radios2" style="background-color:lightgreen;border:1px solid black;">
    <ul>
        <li><label><input type="radio" name="set-two" value="W"> Two W </label></li>
        <li><label><input type="radio" name="set-two" value="X"> Two X </label></li>
        <li><label><input type="radio" name="set-two" value="Y"> Two Y </label></li>
        <li><label><input type="radio" name="set-two" value="Z"> Two Z </label></li>
    </ul>
</div>