How to simulate a radio-type input for the screen reader?

Question

How to simulate a radio-type input for the screen reader?

Navigation

#1 by (1 votes)

3

I'm doing a satisfaction survey that should be accessible to users with screen readers.

For each question, answer options containing a text "Great, Poor, ..." and an image corresponding to the text are displayed. For aesthetic purposes I do not want to use radio-type inputs (or at least I do not 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): link

When the user clicks or enter in 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 do you make sure that when the screen is pressed, the screen reader notifies you that that element has been selected?

Problem 2: The screen reader reads image 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 the NVDA screen reader.

html css acessibilidade

asked by anonymous 01.09.2017 / 20:32

1 answer

Why not every if can have else? Delete table row by checkBox

score 1 · Accepted Answer

You can only do CSS, do not need JS, and you can keep radio type inputs using a label for each input, so it does not 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;
}