Question

我想将登录表单设为：

<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>

OR

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

第一个问题：推荐哪种方式，为什么？第二：这种方法中的任何一种都会阻碍屏幕阅读器的阅读。盲人？

Answer 1

我会推荐第二种方法，这就是为什么：1，你有一个<form>元素，它显示你有元素列表。因此，正确嵌套您的无序列表项。您必须在样式表中确定要删除装饰，因此<li>标记不会显示为项目符号。

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

接下来，<label>标记足以用于关联的输入名称...不需要<p>标记产生额外的块元素空间。标签传达的输入具有各种标识。

最后，关于对屏幕阅读器的影响，我怀疑，屏幕阅读器必须能够识别正在分析的页面上的内容。它默认不知道哪些元素是什么。因此，如果你有一个事物列表，有什么更好的方法可以使用一个体现你传达的元素...... <ul><li></li></ul>

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

如何列出输入字段

1 个答案: