Why does the screen reader Narrator announce an item in an unordered list as heading 1?

95 Views Asked by At

I have a form progress component which is made up of a simple unordered list but Narrator with Chrome announces it incorrectly as a heading level 1 whereas Edge doesn't.

Codepen here: https://codepen.io/reasonmark/pen/KKbONOy

<div class="form-progress" data-form-progress="" tabindex="-1">
    <ol class="form-progress__list" aria-label="Form progress">
        <li class="form-progress__list-item" data-form-progress-item="current" data-form-progress-page="1">
            <span class="visually-hidden">Current:</span>
            <span>Organisation details</span>
        </li>
        <li class="form-progress__list-item" data-form-progress-item="" data-form-progress-page="2">
            <span class="visually-hidden">Incomplete:</span>
            <span>Booking details</span>
        </li>
        <li class="form-progress__list-item" data-form-progress-item="" data-form-progress-page="3">
            <span class="visually-hidden">Incomplete:</span>
            <span>Confirm delegates</span>
        </li>
        <li class="form-progress__list-item" data-form-progress-item="" data-form-progress-page="4">
            <span class="visually-hidden">Incomplete:</span>
            <span>Finalise order</span>
        </li>
    </ol>
</div>

When I access it with Narrator on Edge it announces each item as follows:

  • Current Organisation details 1 of 4 Level 1, 1
  • Incomplete Booking details 2 of 4 Level 1, 2
  • Incomplete Confirm delegates 3 of 4 Level 1, 3
  • Incomplete Finalise order 4 of 4 Level 1, 4

But on Chrome they are announced as:

  • 1 of 4 Level 1, Heading Level 1, 1, Current Organisation details
  • 2 of 4 Level 1, Heading Level 1, 2, Incomplete Booking details
  • 3 of 4 Level 1, Heading Level 1, 3, Incomplete Confirm delegates
  • 4 of 4 Level 1, Heading Level 1, 4, Incomplete Finalise order

Is there any way to stop the heading level 1 being incorrectly announced on Chrome?

0

There are 0 best solutions below