Screen Reader not reading <h1> on entering the screen

Question

My HTML is as below (an extracted portion):

<h1><span>Main Menu</span></h1>
<div>
    <button tabindex="0">New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
</div>

I am using NVDA. When the user enters the screen, the focus is on the first button. NVDA reads the text on the first button(New Customer). It skips the heading (h1). I assumed it should read the h1 tags without any of the aria tags like aria-label. Am I wrong in my assumption? What do I need to do to make this work?

Answer 1

If you want a group label around your buttons that will be read when focus moves into the group, then use role='group' and aria-label on the container. The group label will be read when you TAB forward into the group ("New Customer") and when you TAB backwards into the group ("Existing Customer").

<div role="group" aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
  </div>
</div>

The above example does not visually show the text "Main Menu". You can still have that displayed if you want using:

<div role="group" aria-label="Main Menu">Main Menu
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</div>

You could also use a <nav> element, but with your brief snippet, it doesn't sound like the buttons are for navigation so I wouldn't recommend this but wanted to show it for completeness:

<nav aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</nav>

Answer 2

If you are using a script to send focus to the first button, screenreader software will skip over anything in the markup before that and go straight to the button. You should be able to use the arrow keys to go back up to hear it.

Generally it’s best practise to let the user control focus with clicks/taps instead of automating it for them on page load.