web main  - 考虑到网络可访问性

创建可访问的形式万博体育官网网址
高级表格标签

介绍

标签有局限性。它不能为单个形式控制提供多个标签,或将单个标签与多个表单控件相关联。有时,没有可见文本标签与表单控件关联。

这些标签限制的大部分可以克服三个aria属性:

  • aria-labelledby.
  • aria-degress
  • 咏叹调标签

aria-labelledby.

一种通过引用表单控件“我是此表单控制的标签”声明ID属性值:

aria-labelledby.,表单领域引用了ID作为其标签的文本的属性:

<输入aria-labelledby =“fnameelabel”>

表单控制声明,“我是一个由此元素标记的控件。”

处理多个标签

因为这ID每个表单控件的属性必须是唯一的,a只能指向一个形式控制。借aria-labelledby.,一个元素可以标记多个表单控件,并且可以由多个元素标记一个表单控件。

以下是可能用于数据条目的表的简化示例。每个标题单元()用作其下列列中的所有表单控件的可视标签。文本输入使用aria-labelledby.引用标题单元格文本。

名称 年龄 重量

第一个标题的HTML(“名称”):

id =“namelabel”范围=“col”>名称

第一个文本输入的HTML:

<输入类型=“text”name =“name1”aria-labelledby =“namelabel”>

这将在表头单元中使用“名称”文本标记为“名称”文本。这个aria-labelledby.属性将添加到所有三个名称字段中,从而正确地将所有文本节点标记为所有文本节点。

在此示例中构建下表的表具有沿着顶部和侧面多个视觉标签的视觉标签。

名称 办公室号码 电话
cyndi.
贾里德
乔纳森

第一个字段的HTML:

<输入类型=“text”name =“Office1”aria-labelledby =“cyndi officenum”>

cyndi.Officenum.值参考ID“cyndi”和“Office编号”表格单元格的属性值。在导航到此字段时,屏幕阅读器将读取“Cyndi Office编号”。多个标签的读取顺序基于指定这些值的顺序。

注意

作为一般规则,如果单个标签出现单个控制,则要元素应用于引用它。这些标签提供了附加功能 - 单击它们将焦点设置为或激活控件。使用时不可用此功能aria-labelledby.

重要!

如果一个控制都有aria-labelledby.,屏幕读者将宣布aria-labelledby.文本代替相关的。屏幕阅读器用户永远不会听到文本。

aria-degress

要将描述性文本与表单控件相关联,使用aria-degress。例如:

<标签for =“resetpass”>重置密码:
<输入类型=“密码”ID =“Resetpass”aria-degulatedby =“pwnote”>
..
ID =“PWNote”>新密码必须是8-15个字符,包括字母和数字。
注意
  • 因为有一个标签,使用而不是aria-labelledby.
  • aria-degress属性指向ID包含密码要求的元素。屏幕读取器通常会读取标签,然后读取输入类型(文本框,复选框等,以及任何必要的属性,例如如果需要该字段),然后读取说明。可以通过多个元素引用aria-degress。只是分开了引用ID空格的值。
  • 屏幕阅读器宣布aria-degress内容此外标签(例如,要么<输入aria-labelledby>)。它不是标签的替代品 - 所有输入都必须具有标签。
  • aria-degress属性也可用于引用显示为“工具提示”的描述。当控件具有键盘焦点时,工具提示必须对视力键盘用户可见,而不仅仅是当用户筛选或点击鼠标时。

无形标签

某些表单控件不需要可见文本标签。例如,与搜索按钮相邻的文本输入将其目的清除为可见的用户。额外的视觉文本标签将是冗余的。在这种情况下,应使用以下三种技术之一:

隐藏使用CSS元素脱机。标签不会看视觉上,但屏幕读者仍将宣布它。CSS规则集在我们的文章中给出屏幕阅读器的隐形内容

class =“隐藏”for =“s”>搜索项
<输入类型=“text”id =“s”>

标题属性

如果表格字段有一个标题属性但是没有,屏幕读者会对待标题作为标签。这也将在鼠标悬停时生成一个工具提示,这可能是有用的或分散注意力。

<输入id =“s”类型=“text”标题=“搜索术语”>

咏叹调标签

咏叹调标签也可以使用属性。喜欢aria-labelledby.咏叹调标签覆盖

<输入id =“s”类型=“text”aria-label =“搜索术语”>
重要

只能实施其中一个建议。一起使用两个或更多(例如,隐藏的和副本标题属性)可能会导致屏幕阅读器重复信息。

占位符

占位符属性不会取代。一个局限性占位符当信息输入到该字段中,它会消失,使用户更难以进行更正。相反,我们推荐上面的标签策略。

坏例子

依靠占位符

你的名字:
<输入类型=“text”name =“last”placeholder =“last”>
<输入类型=“文本”名称=“第一个”占位符=“first”>>
<输入类型=“文本”名称=“中间”占位符=“中间”>

好的例子

替换占位符和补充.自动完成,这在不好的例子中缺席。

你的名字:

搭档

  • 使用尽可能。它具有通用浏览器和屏幕阅读器支持,鼠标用户可以单击标签以聚焦其表单控件。
  • 使用aria-labelledby.克服1:1限制
  • 使用aria-degress(除了标签之外)将描述性文本关联到表单控件。
  • 使用隐藏,或者标题要么咏叹调标签不需要可见文本标签时属性。
  • 占位符文本(例如,<输入类型=“text”PlaceHolder =“Search Webaim”>)不是标签的替代品。