表单标记建议，带有长“问题”文本的图例

Posted 2023-02-16

【中文标题】表单标记建议，带有长“问题”文本的图例

【英文标题】：Form markup advice, legend with long "question" text

【发布时间】：2011-08-10 16:09:09

【问题描述】：

我正在创建一个在线调查问卷，并正在寻找有关标记最佳实践的一些建议。有些问题很长，来自第三方，无法更改。我目前有这样的：

<fieldset>
    <legend><span>Some long question text will go here?</span></legend>
    <input type="checkbox" name="opt1" id="opt1" value="opt1" /><label for="opt1">Option 1</label>
    <input type="checkbox" name="opt2" id="opt2" value="opt2" /><label for="opt2">Option 2</label>
    <input type="checkbox" name="opt3" id="opt3" value="opt3" /><label for="opt3">Option 3</label>
</fieldset>

这看起来不错还是有更容易获得的技术？感谢您的任何建议

【问题讨论】：

对我来说看起来不错，这可能就是我自己做的方式；尽管我可能不会在 legend 内嵌套 span。

【参考方案1】：

是的，这是正确的可访问标记，但如果可能，请注意长 <legend> 元素。一些屏幕阅读器会读取字段集中每个输入的图例和标签。如果图例很长，则对用户来说可能非常麻烦。

还值得注意的是，在某些浏览器中，如果长 <legend> 不完全适合浏览器窗口的宽度，则它不会换行。您可以通过使用 white-space:normal 样式化您的图例来控制这一点

【参考方案2】：

是的，它可以访问，但没有理由使用 <span> 标签。

【讨论】：

作为补充说明，我通常将输入嵌套在其标签标签内，因为您可以在标签上设置 display: 块以使其本身成为一行而无需进一步标记。即使以这种方式嵌套，我仍然建议使用 for/id 属性。