1

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?

Improve this question
2
  • I get the same results. Weird. I inspected the accessibility properties in devtools and none of the elements have a heading role so it doesn't make sense why that's announced. Commented Oct 19, 2023 at 2:16
  • It looks like a bug. It's hard to say if you need to signal it to Microsoft or Google. Is it correctly announced with NVDA, Jaws, VoiceOver, Talkback ? If it's correct with these four, you can probably consider it as fine, as almost no serious one use Narrator. Small joke: What's the purpose of Narrator ? download NVDA. Commented Oct 19, 2023 at 4:05
Related questions
322
How to remove indentation from an unordered list item?
1
Unordered list items not read by Narrator
2
Why does my screen reader not announce the selected tab when activated
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.