CodingMania

CodingMania

2016/12/9

アクセシビリティを考慮したラジオボタン

読み上げブラウザを考慮したラジオボタン

質問が短い場合は、aria-describedbyで説明文とチェックするラジオボタンを紐づける。
質問が長い場合は、一回一回答えの所で質問読み上げられるとややこしいのと操作に時間がかかってしまうのを考慮してfieldsetとlegendでマークアップ。

デモページへopen_in_new

HTMl

<form class="Form" action="">
<dl>
<dt id="like">どちらの食べ物が好きですか？</dt>
<dd>
<div role="radiogroup">
<label for="like_apple"><input type="radio" value="りんご" id="like_apple" name="like" aria-describedby="like">りんご</label>&nbsp;
<label for="like_banana"><input type="radio" value="バナナ" id="like_banana" name="like" aria-describedby="like">バナナ</label>
</div>
</dd>
</dl>
<!-- /.Form --></form>

<form class="Form" action="">
<fieldset>
<legend>もし自宅のリフォームを考えた場合、とりあえず自分でいろんなメーカーのショウルームをまわったりWebで情報を収集したりしてある程度決めてからリフォーム会社に相談しますか？</legend>
<div class="Form__radio">
<label for="inquiry--answer01"><input value="自分で情報を収集する前にリフォーム会社に相談する。" id="inquiry--answer01" name="inquiry" type="radio">自分で情報を収集する前にリフォーム会社に相談する。</label><br>
<label for="inquiry--answer02"><input value="自分でWebで情報を集めて調べるが、メーカーのショウルームまでは行かず、リフォーム会社に相談する。" id="inquiry--answer02" name="inquiry" type="radio">自分でWebで情報を集めて調べるが、メーカーのショウルームまでは行かず、リフォーム会社に相談する。</label><br>
<label for="inquiry--answer03"><input value="自分でWebで情報をあつめて、メーカーのショウルームにも行き、ある程度決めてからリフォーム会社に相談する。" id="inquiry--answer03" name="inquiry" type="radio">自分でWebで情報をあつめて、メーカーのショウルームにも行き、ある程度決めてからリフォーム会社に相談する。</label><br>
<!-- /.Form__radio --></div>
</fieldset>
</form>

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form input{
  margin:0 5px 5px 0;
}

.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  margin: 10px;
}
.Form legend{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
  line-height: 1.5;
}
.Form__radio{
  margin: 10px;
}
.Form__radio label{
  margin-top: 10px;
}

© CodingMania.net