Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
アクセシビリティを考慮したラジオボタン - CodingMania
CodingMania

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

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;
}
モバイルバージョンを終了