It seems that the role="button"
makes the screen reader speak “button” and that it does not know how to say “+” (which is somewhat odd). Different screen readers behave differently, but the following would seem to be an approach that is consistent with general ARIA principles:
<a role="listbox" aria-label="button options" ...>
If the element opens a set of options, its role might be best described by listbox
(which is the default role of a select
element). The aria-label
attribute “labels the current element” (for ARIA purposes) and “provides the user with a recognizable name of the object”.
I’m not sure whether “button options” is a suitable name, though. It might be better to provide a name that describes what is being selected, rather than abstractly being some options. ARIA-enabled user agents should express the type of the control to the user when specified in the ARIA way.