Search code examples
accessibilityjaws-screen-reader

How can a button be not announced as "button" by screenreader when it reads it?


I have HTML buttons and want them to not be announced as buttons by the screen reader. Is there a way for it? I am using the button for Rating.


Solution

  • What kind of object would you like it announced as? When you have a "ratings" type object, doesn't the user have to click on it to set the rating? So, for example, if you have 5 possible stars and the user wants to give it a rating of 4 stars, don't they have to click on the 4th star? The act of clicking needs to be conveyed to screen readers too.

    Instead of having 5 single "buttons", it could be a radio group with 5 radio buttons. Or I suppose it could be a "slider". But whatever object you think is appropriate, the role of that object needs to be announced so that the screen reader user knows how to interact with it. When a screen reader user hears "button", they know they can press Space or Enter on it to select it. If they hear "radio button" or "slider", they know they can use the arrow keys to change the selection.

    I would go with a radio group and radio buttons since your rating will be a mutually exclusive set of X objects that you can only choose one of.

    For an example, see https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating