网站在地址栏中的那个图标
兔子的N种死法
Aug
30
参考：无障碍网页开发：规范及技术手册
提高Web设计的可读性(Web Design Readability)
看到这篇规范收获很多：其中关于radio button的可用性是这样描述的：
第一个表单必须点击radio本身才能做选项切换，第2个表单只需要点击文字部分就能做相应的选项切换。虽然只是一点点改进，但是让用户鼠标可以比较容易的进行模糊的操作。
源代码如下：主要是通过label和相应的id做了关联
提高Web设计的可读性(Web Design Readability)
看到这篇规范收获很多：其中关于radio button的可用性是这样描述的：
第一个表单必须点击radio本身才能做选项切换，第2个表单只需要点击文字部分就能做相应的选项切换。虽然只是一点点改进，但是让用户鼠标可以比较容易的进行模糊的操作。
源代码如下：主要是通过label和相应的id做了关联
<form>
<FIELDSET>
<LEGEND>不好的设计：</LEGEND>
<INPUT name="sex" type="radio"
checked>男性<INPUT type="radio" name="sex">女性 <<--
点击"女性"左边的radio才能做选项切换</FIELDSET>
</form>和<form>
<FIELDSET>
<LEGEND>好的设计：</LEGEND>
<INPUT name="sex" type="radio" id="male"
checked><LABEL for="male">男性</LABEL><INPUT
type="radio" name="sex" id="female"><LABEL for="female">女性</LABEL>
<<-- 点击"女性"这个文本就能够做选项切换</FIELDSET>
</form>
<FIELDSET>
<LEGEND>不好的设计：</LEGEND>
<INPUT name="sex" type="radio"
checked>男性<INPUT type="radio" name="sex">女性 <<--
点击"女性"左边的radio才能做选项切换</FIELDSET>
</form>和<form>
<FIELDSET>
<LEGEND>好的设计：</LEGEND>
<INPUT name="sex" type="radio" id="male"
checked><LABEL for="male">男性</LABEL><INPUT
type="radio" name="sex" id="female"><LABEL for="female">女性</LABEL>
<<-- 点击"女性"这个文本就能够做选项切换</FIELDSET>
</form>
对《提高Web设计的可读性(Web Design Readability)》有 0 条评论