How Should Split Buttons Behave with Screen Readers?

Question

I have a split button construct in our applications that is similar to the following jsbin.

http://jsbin.com/opAtiYEl/8

The first button would do a default action and the second button would give a menu (ul) with more related actions.

When i tab into the first button it reads "action button". That's fine. But when i tab into the arrow down button it reads "button".

What is the correct approach to make this work accessibly? I'm thinking aria-haspopup but that doesn't read on Voice Over.

Ideally this should be correct for VOice Over, NVDA and Jaws (latest minus 2). I'm trying to find a good baseline here or suggestion?

Answer 1

You are some what on the right track with aria-haspopup. And as @Menelion Elensúle said your arrow button has no content.

Let's say we do something like the iTunes store and have 1 link to a category and a dropdown for sub-categories... This is the proper markup

<a href="movies.html" clsas="acttion-button">Movies</a>
<button type="button" class="action-dropdown hide" aria-haspopup="true" aria-expanded="false" aria-controls="movies-menu">movies dropdown</button>
<ul id="movies-dropdown">
  <li><a href="movies/adventure.html">Adventure</a></li>
  ...
</ul>

Use the class "hide" to visually hide the text. (Don't use display:none) And when the arrow is clicked change aria-expanded to true, and remember to switch it back to false when the dropdown is hidden.

Answer 2

My JAWS 15 says "Unlabeled 3 button". You have to label your button. Here:

<button>Action</button>
<button class="arrow"></button>

Please note: the second button has nothing between the tags. If it's impossible to insert something in there (it would corrupt your design), then it would be appropriate to make your arrow as a plain image with an alt attribute.