-1

I'm currently working on accessibility. The form that I'm working on is broken into steps. Each step has is on template, when I go from step 6 into step 7, JAWS does not read the <h1> element.

From the image above, JAWS goes from step 6 into "Including you, how many people are in your houseld" Which is a <label> tag. I was thinking about adding an aria attribute. What is the best approach so that the screen reader doesn't start screening this page from 

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

Here is thecode:

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

What is the best approach to fix this?

unor
  • 92,415
  • 26
  • 211
  • 360
Steven Aguilar
  • 3,107
  • 5
  • 39
  • 89
  • give the h1 element an Id or a tabindex value of 0. Use the f12 tool to view the client source, not the angular source. Edge has an Aria tool that can list the aria elements on a page. – Rob Parsons Aug 25 '18 at 21:19
  • do **not** give the `

    ` a tabindex of 0. that's bad accessibility advice. only interactive elements should be tabbable. it's confusing for screen reader users to tab to an element that cannot be interacted with. it's easy for a screen reader to navigate to static text that is a heading by using the 'H' key.

     – slugolicious Aug 28 '18 at 04:14
  • so is this a single page app (spa)? do you only have the problem between steps 6 and 7, or on every step? i'm assuming each step will have it's own h1 (or it should). it'd help (me) if you posted the generated html without all the curly brace stuff (which i'm guessing is from a third party library) – slugolicious Aug 28 '18 at 04:28
  • @slugolicious yes, each step has it's own `

    ` headers

     – Steven Aguilar Aug 28 '18 at 13:28
  • No the problem is only from step 6 to step 7. All other steps in the screener reads the `

    ` but only in step 7 it does not.

     – Steven Aguilar Aug 28 '18 at 17:30
  • if the other steps work, what's different about #7? do the other steps look like #7 (a question, a description, a field label, and an input field)? feel free to contact me directly offline to convey all the details, then you can update your question with the relevant info and an answer can be posted. see my profile for my email. – slugolicious Oct 30 '18 at 15:26

1 Answers1

0

As long as you are not using scripting to move the focus to somewhere after the H1 heading, this sounds like JAWS is just behaving strangely, which it tends to do sometimes. As long as you are serving up standards-compliant HTML, don't try to work around bugs in the assistive tech or you'll fry your brain.

a11y_guru
  • 220
  • 3
  • 9