Aria undesirable result - wai-aria

Question

I have the follwing html on my site's header
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="">
</a>
</div>
<nav class="">
<ul>
<li>
<a href="xxx" title="xxxx" >xxx</a>
</li>
<li>
<a href="xxxx" title="xxx" >xxx</a>
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
<div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em>
</div>
</header>
At this header the nav is hiding on mobile device and shows up when the user press the div.toggle_menu.
The way this is read by VoiceOver screen reader of iphone 14, is "Button, open menu, end banner".
I would like it to say just "open menu". So I remove the role button and left only the aria-label="open menu".
Now it reads just "End of banner". Νο "Open menu" or "button".
I am quite new on aria and I am not sure what do I have to do.
Any help is appreciated.

Answer 1

To make it short: You shouldn’t do that. There is a good reason screen readers read the way they do and you should respect that. Its users rely on that.
That being said, it’s great that you are diving into ARIA and caring about screen reader’s experience.
Role
The role is very important for screen reader users, to know what to expect in terms of interaction and keyboard control. Roles communicate interaction patterns.
The whole point of ARIA is to add meaning to otherwise meaningless elements, where you cannot use the proper HTML element.
By removing the role, you are leaving a meaningless <div>, which might be focusable, but it would be way less intuitive to screen reader users to know how to interact with it. Assistive technology couldn’t know what it’s good for, voice control software would probably not let you click on it.
The accessible name provided by aria-label cannot be used on any element. The role determines if the name should (or must) be used or not. VoiceOver will not announce names for meaningless elements like <div>.
Tabindex 1
By adding tabindex="1", you are putting the button before any other focusable page contents, which messes with the expected focus order.
I guess you placed it so that you could have the button after the navigation. But a large part of screen reader users are sighted, and rely on contents exposed by their screen reader to match with what they can see. The logo comes before the button, and it would be irritating if it’s not focused first.
Refer to the ARIA Authoring Practices Guide
When it comes to your toggle button, you should implement the ARIA pattern, which requires not only the role button, but also aria-expanded to explain to assistive technology that the button opens and closes something, and its state.
The button should be before the contents that get expanded.
See Disclosure (Show/Hide) on the ARIA Authoring Practices Guide (APG)
<header>
<div class="logo_container">
<a href="/">
<img src="xxx" alt="Home, ACME">
</a>
</div>
<button class="toggle_menu" aria-label="open menu" aria-expanded="false"><em class="fa-solid fa-bars"></em></button>
<nav hidden>
<ul>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
xxx
</li>
<li>
</ul>
</nav>
</header>