ARIA Screen Reader - how to make a role name read?

Question

I am trying to make my web application more accessible and one of the things I want to do it create a role group and the contents inside should be read in a particular fashion. For ex on the UI it looks like a menu bar

TITLE
Button1 Button2 Button3

The html looks like

<div class="tab-content-header" role="menubar">
          <span id="{{label}}">{{label}}</span>
          <button type="button" class="btn btn-primary">button1</button>
          <button type="button" class="btn btn-primary">button2</button>
</div>

I want the screen reader to focus on the button ONLY and read 'button1 button, title" and "button2 button, title". Right now it doesnt read that way. any idea?

Answer 1

Before I answer your question, note that you are using a role="menubar" but none of the items within contain role="menuitem ". I recommend you read through the menu bar pattern in the ARIA Authoring Practices 1.1 , as it also defines the keyboard actions you will need to implement. Further, in most cases using ARIA to define menus is a way of telling a user that it will behave just like a system menu bar. If you do not match the necessary interactions then you will confuse users.

Now, a screen reader will announce the accessible name of a <button> as the text within the element: <button>Accessible Name</button>

If you want it to announce some additional text, you can use aria-describedby , though it will be announced after a pause.

So this may get you what you want:

<span id="Desc">Description text</span>
<button aria-describedby="Desc">Button Text</button>

Now, you state that you want something to be read in a particular order, and that you want only the button to be read, and your question says you want a role name read. These are all confusing requirements so I am not sure I addressed your goal.

All that being said, please be careful to assert how a screen reader user should experience your content. Often using ARIA to enforce the author's ideal reading order makes a page more inaccessible than if nothing was done at all. So please be certain to test with real users.