Attribute to use which is assistive technology readable

Question

What attribute should i use which is assistive technology readable?

I have an anchor tag which has "+" as text. When it is read by the screen reader it only says "button". I want the screen reader to read it as "button options"

I've tried to use title and alt but to no avail.

Edit: here's my code:

<a role="button" title="Options" id="options" onlick="<function that pops up the options menu>">+</a>

Im using NVDA

Answer 1

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.