fieldset标签是否具有任何可访问性优势?

Pet*_*ete 6 html

我知道HTML中的很多功能都是网页可以被视线很差或者看不到的人所需要的,特殊的浏览器可以大声朗读文本.

为了使其正常工作,您必须确保遵循良好的HTML编码标准,例如,您应确保您的图像具有替代文本,不使用表格进行布局等.

但我不确定的是fieldset元素对输入字段进行分组的重要性.fieldset标记是否具有任何特殊的可访问性优势,还是纯粹用于布局?

Que*_*tin 10

简短回答:是的.结构和语义都很好.

例如.

许多屏幕阅读器都有一种"表单模式",在这种模式下,它们会忽略与表单无关的任何内容.

() Cat
() Dog
() Rabbit
Run Code Online (Sandbox Code Playgroud)

这是毫无意义的

<fieldset>
    <legend>What is your favourite animal?</legend>

    () Cat
    () Dog
    () Rabbit
</fieldset>
Run Code Online (Sandbox Code Playgroud)

现在,fieldset图例为其提供了上下文.

段落不起作用 - 它不会以表单模式呈现给用户.标签不起作用 - 它描述了一个字段,而不是一组字段.你会为每只猫,狗和兔子使用一个标签.


Byr*_*ugg 4

是的。请参阅: http: //www.alistapart.com/articles/prettyaccessibleforms/

一些屏幕阅读器甚至会读取字段集中每个标签的图例。

<fieldset>
    <legend>What is your favorite animal?</legend>
    <input type="radio" name="animal" id="Cat" /> <label for="Cat">Cat</label>
    <input type="radio" name="animal" id="Dog" checked="checked" /> <label for="Dog">Dog</label>
    <input type="radio" name="animal" id="Rabbit" /> <label for="Rabbit">Rabbit</label>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
  • 你最喜欢的动物是什么?单选按钮。猫。未选中的。
  • 你最喜欢的动物是什么?单选按钮。狗。已选择。
  • 你最喜欢的动物是什么?单选按钮。兔子。未选中的。