0

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?

ksernow
  • 662
  • 3
  • 14
  • 33

1 Answers1

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.

aardrian
  • 8,581
  • 30
  • 40