如何列出输入字段[关闭]答案

【问题标题】：how to list input fields [closed]如何列出输入字段[关闭]
【发布时间】：2014-11-26 08:33:33
【问题描述】：

我想制作一个登录表单：

<form>
<label>Username:<input type="text" name="username"></label>
<label>Password:<input type="password" name="password"></label>
</form>

但有些人写成：

<form>
<ul>
<li><label>Username:<input type="text" name="username"></label></li>
<li><label>Password:<input type="password" name="password"></label></li>
</ul>
</form>

或

<form>
<p><label>Username:<input type="text" name="username"></label></p>
<p><label>Password:<input type="password" name="password"></label></p>
</form>

第一个问题：推荐哪种方式，为什么？第二：这种方法是否会阻碍盲人“屏幕阅读器”的阅读？

【问题讨论】：

不幸的是，这个问题鼓励仅提供意见的答案。无论您做什么，如果您担心可访问性，请确保在每个标签中都有 for 属性。
我认为另一种方式......必须有一种方法可以推荐更好的样式或适合屏幕阅读器
请看这个答案：stackoverflow.com/questions/8524087/… 它展示了您的问题并说明了为什么没有“推荐”解决方案
听起来唯一的解决方案是研究和发现屏幕阅读器在实践中的作用。我怀疑您的第一个选项可能效果最好，因为根据 mattytommo 的链接，语义上 li 和 p 具有与表单输入的目的并不真正匹配的特定含义，但这是推测。我建议您在屏幕阅读器中尝试这三个代码块，看看会发生什么。发表你的答案。

标签： html forms screen-readers

【解决方案1】：

我会推荐第二种方法，原因如下：第一种，你有一个<form> 元素，它表明你有其中的元素列表。因此，正确嵌套无序列表项。您必须确保在样式表中删除装饰，因此 <li> 标记不会显示为项目符号。

ul li { list-style-type: none; }

接下来，<label> 标记对于关联的输入名称来说已经足够合适了……不需要额外的由<p> 标记产生的块元素空间。传达输入的标签具有某种身份。

最后，关于屏幕阅读器的影响，正如我所怀疑的那样，屏幕阅读器必须能够识别正在解析的页面上的内容。它不知道默认情况下是什么元素。因此，如果你有一份清单，有什么更好的方法可以使用体现你所传达的内容的元素...<ul><li></li></ul>

这是一个链接和资源，可以为您解释更多后者：https://webaccessibility.withgoogle.com/unit?unit=1&lesson=5

【讨论】：