Question:
I'm doing a satisfaction survey that should be accessible to screen reader users.
For each question, answer options are shown, containing a text "Great, Terrible, …" and an image corresponding to the text. For aesthetic purposes I don't want to use radio type inputs (or at least I don't want them to be visible). Below is 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 done so far (including css and javascript): https://jsfiddle.net/moneisa123/o2gxgz9r/13333/
When the user clicks or enters one of the images I change the background color of the div containing the image to show that the element has been selected.
Problem 1: In the case of the user with a screen reader, how can I make it so that, when he presses enter, the screen reader notifies him 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'm testing with NVDA screen reader.
Answer:
You can only do it with CSS, you don't even need JS, and you can keep radio type inputs by using a label for each input, so it doesn't affect accessibility.
Try this here:
HTML
<ul class="custom-radio">
<li><input type="radio" name="radio" value="1" id="radio01" /><label for="radio01">Option 1</label></li>
<li><input type="radio" name="radio" value="2" id="radio02" /><label for="radio02">Option 2</label></li>
<li><input type="radio" name="radio" value="3" id="radio03" /><label for="radio03">Option 3</label></li>
</ul>
CSS
.custom-radio {
font-family: sans-serif;
font-size: 1.8em;
margin: 0;
padding: 1em;
list-style-type: none;
}
.custom-radio li {
float: left;
margin-right: 0.5em;
}
.custom-radio label {
padding: .5em;
color: #ccc;
border: solid 3px #ccc;
border-radius: 8px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio input[type="radio"]:checked + label {
border-color: #33cc33;
color: #33cc33;
}