IE JAWS屏幕阅读器会跳过<h1>内容

Question

我目前正在研究可访问性。我正在处理的表单分为多个步骤。每个步骤都在模板上，当我从步骤6转到步骤7时，JAWS不会读取<h1>元素。

从上图中，JAWS从步骤6转到“ {包括您在内，您家中有多少人”），它是一个<label>标签。我在考虑添加一个aria属性。什么是最好的方法，以使屏幕阅读器不会开始从

筛选此页面

<label class="c-question__label" for="household-members">{{ __('Including you, how many people are in your household?', 'accessnyc-screener') }}</label>

这是代码：

<fieldset class="{{ styles.fieldset }}" id="step-7" data-track-key="Screener Step: 7"
  data-track-data='[{"WT.si_n": "ScreeningHH"},{"WT.si_p": "7-NumOfHHMembers"}]'>
  <div class="{{ styles.padding }}">
    <div data-js="step-title" class="{{ styles.number }}">{{ __('Step 7 of 10', 'accessnyc-screener') }}</div>

    <h1 class="{{ styles.heading }}">{{ __('Tell us about your household.', 'accessnyc-screener') }}</h1>

    <div class="c-question">
      <label class="c-question__label" for="household-members">{{ __('Including you, how many people are in your household?', 'accessnyc-screener') }}</label>

      <p>{{ __('This is usually family members who you both live with and share important resources like food and bills. Only count your roommates if you often buy and prepare food together.', 'accessnyc-screener') }}</p>

      <label class="c-question__label" for="household-members">{{ __('Number of People (max. 8)', 'accessnyc-screener') }}</label>
      <div class="c-question__container" data-js="question">
        <input id="household-members" type="number" name="Household.members" data-type="integer" min="1" max="8" required value="1">
      </div>
    </div>

    <div class="pt-2">
      <a class="btn btn-primary btn-next btn-small js-screener-validate-step" href="#step-8" role="button">{{ __('Continue', 'accessnyc-screener') }}</a>
    </div>
  </div>
</fieldset>{# /#step-7 #}

解决此问题的最佳方法是什么？

Answer 1

只要您没有使用脚本将焦点移到H1标题之后的某个位置，这听起来就好像JAWS的行为很奇怪，有时它往往会这样做。只要您提供的是符合标准的HTML，就不要尝试解决辅助技术中的错误，否则您会大吃一惊。