3
I’m doing a satisfaction survey that should be accessible to users with screen reader.
For each question answer options containing a text are shown "Great, Lousy, ..." and an image corresponding to the text. For aesthetic purposes I do not want to use radio inputs (or at least I do not want them to be visible). Below the code that generates one of the options for the user to choose:
<div class="item_escala" escala="4">
<div>
<input type="image" src="img/nota4.png" width="48" alt="Bom" onclick="return false;">
</div>
<div class="lb_escala">Bom</div>
</div>
This link shows the solution I’ve already done (including css and javascript): https://jsfiddle.net/moneisa123/o2gxgz9r/13333/
When the user clicks or from enter on one of the images I change the background color of the div containing the image to show that the element was selected.
Issue 1: In the case of the user with screen reader, how to do so so that when it presses enter, the screen reader tells you that that element has been selected?
Problem #2: The screen reader reads image type inputs as "buttons", which is not ideal. Any other suggestions on how to present these elements in an accessible way?
Note: I am testing with the screen reader NVDA.
Would making a hidden radio not solve it? For example, a hidden radio for each button, and when the button is selected, the hidden radio for the button is selected.
– Sam