原标题:HTML的标签,你真的会用吗?
使用正确的HTML标签元素在实现表单时是必不可少的,以确保可以被尽可能多的人使用,包括屏幕阅读器用户在内。以下将介绍< fieldset >和< legend >标签的正确用法。
在GOV.UK经常使用表单域的groups,比如一组单选按钮或复选框。这些表单域可能被用来提供一个问题的多种答案,或多条关于同一件事的信息。
问题有多个选项
例如,当这个问题的答案是简单的“是”或“否”:
在这个例子中,问题在单选按钮组上方,很明显,问题涉及到表单字段。如果你使用屏幕阅读器来选择其中一个单选按钮,你会看到被公布的表单标签(“是”或“否”),但你可能看不到宣布的所有问题。因为这个问题不与网页的代码中的单选按钮组相关联。
屏幕阅读器从网页的HTML代码获得大部分它们所需的信息。浏览器使用HTML代码并将其转换成通过辅助技术屏幕阅读器可以使用获得的信息。
如果你使用箭头键来指导你的屏幕阅读器,你会看到公布的问题。这不是浏览表单的有效的方式,因此大多数屏幕阅读器的用户选择使用TAB键来代替。但是,当你使用Tab键浏览表单,问题没有被公布,因此很难知道正确的答案可能是什么!
可以使用< fieldset >和< legend >元素解决这个问题。这些因素共同告诉屏幕阅读器这组表单域之间的相互关系,并提供该组的标签。
所有related fields都在< fieldset >元素中,而< legend >元素被用来代表问题,而不是
元素。
在它宣布组中第一个字段和标签之前读者会宣布问题。所以这个例子中,你听到的东西,如“你有护照吗?是的,单选按钮”。
注意:与Internet Explorer使用时,JAWS屏幕阅读器将公布legend中的每一个字段(不只是第一个字段)。这不是预期行为。
当关于同一主题有多个问题时,
和< legend>>元素也被使用。可以嵌套一个< fieldset >元素在另一个里,但并不建议这样做。屏幕阅读器不会自动提示< fieldset >元素的结束,所以屏幕阅读器用户可以放心地知道哪个字段属于哪个字段集内是不可能的。
你应该使用< fieldset >和< legend >元素的情况:
有一个多项选择题时(使用单选按钮或复选框)。
关于同一主题有几个问题时(例如文本框,或者任何其他类型的字段)。
你不应该使用
和的情况:有一个要求一条单一的信息的信息表单域。
在正确的使用情况下,
和< legend >元素相关表单字段绑在一起的方式使得访问者无法看到视觉布局形式。关注(智能社)微博,了解更多......返回搜狐,查看更多
责任编辑: