Acessibilidade com input do tipo image
Tentando tornar a solução acessível
by moneisa123
HTML
<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<fieldset>
<legend>
Como você avalia o serviço prestado?
</legend>
<div class="elemento" pergunta="1" style="text-align: center;">
<div class="item_escala" escala="5">
<div>
<input type="image" src="img/nota5.png" width="48" alt="Ótimo" onclick="return false;">
</div>
<div class="lb_escala">Ótimo</div>
</div><!--
--><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><!--
--><div class="item_escala" escala="3">
<div>
<input type="image" src="img/nota3.png" width="48" alt="REgular" onclick="return false;">
</div>
<div class="lb_escala">Regular</div>
</div><!--
--><div class="item_escala" escala="2">
<div>
<input type="image" src="img/nota2.png" width="48" alt="Ruim" onclick="return false;">
</div>
<div class="lb_escala">Ruim</div>
</div><!--
--><div class="item_escala" escala="1">
<div>
<input type="image" src="img/nota1.png"...
CSS
.pergunta {
border-top:1px solid #CCCCCC;
padding-top:10px;
}
.pergunta label {
font-size:14px;
}
.item_escala:hover {
background-color: #cce6ff;
opacity:0.9;
}
.item_escala {
width: 15%;
display:inline-block;
text-align:center;
border:1px solid black;
border-right:0px;
text-align:center;
padding: 5px;
cursor:pointer;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
}
.item_escala:last-child{
border:1px solid black;
}
.selecionado {
background-color:#b3d9ff;
opacity:1;
}
.escala .item_escala.selecionado:hover {
background-color:#b3d9ff;
opacity:1;
}
.nao_selecionado {
background-color:#F0F0F0;
opacity:0.5;
color:#000000;
}
.lb_escala {
height:15px;
}
fieldset {
border: 0px;
}
legend {
text-align:center;
font-size:14px;
margin-bottom:10px;
}
JavaScript
$(document).ready(function() {
$(".item_escala").click(function(){
$(this).parent().find(".item_escala").removeClass("selecionado").addClass("nao_selecionado");
$(this).removeClass("nao_selecionado").addClass("selecionado");
var resposta = $(this).attr("escala");
var pergunta = $(this).parents("table").attr("pergunta");
$("[name='p["+pergunta+"]']").val(resposta);
});
});