HTML 标签:将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

学习资料来自freecodecamp

包含单选的段落修改前后对比:

HTML 标签:将单选按钮包裹在 fieldset 元素中以获得更好的可访问性   HTML 标签:将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

原始代码如下:使用div标签来标记段落。使用p标签来标记提示的问题。

 <div>
        <p>What level ninja are you?</p>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </div>

  修改之后的代码如下:使用field set标签替代原来的div标签,使用legend标签来代替p,如果不使用legend标签则会产生一个线框将问题和选项同时包裹的情况,依旧比原来要清晰,但是布局就没有那么好看了。

      <fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>

 显示效果:

 HTML 标签:将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

使用语义化的标签不仅仅是使得布局看上去更好看了。大多数语义化的标签不会对布局产生影响。更重要的是方便视觉障碍者采取屏幕阅读工具的方式来获得信息。同时也方便了对代码的维护。

HTML 标签:将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

上一篇:websocket


下一篇:暴风雨的礼物·Html&Css05:position