Creating 万博体育官网网址 Forms
高级表格标签

介绍

有时候<标签>元素不足 - 它不能用于为单个表单控件提供多个标签,或者将单个标签与多个表单控件相关联有时候,没有可见的文本标签与表单控件相关联使用三种ARIA属性可以克服大多数这些标签限制(ARIA-labelledbyARIA-describedby,和ARIA标签)以及本页概述的其他几种技术。

ARIA-labelledby

一个<标签>element表示通过引用它来标记哪个表单字段ID属性值:

<label for =“fname”>

它宣称,“我是这种控制的标签”。

ARIA-labelledby,表单字段指示哪个元素通过引用它来标记它ID属性:

<输入aria-labelledby =“fnamelabel”>

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

处理多个标签

因为页面中的元素必须都是唯一的ID属性值,a<标签>只能指向ID单一控制 - 最多是标签和控制之间的一对一关系。ARIA-labelledby但是,允许将元素作为多个控件的标签引用,并允许将多个元素作为单个控件的标签引用简而言之,ARIA-labelledby克服了1比1的限制<标签>

The following is a simplified example of a table that might be used for data entry每个表头都作为其下方列中的表单控件的可视标签多个表单控件只有一个可视标签该<标签>元素不能用于将此文本与多个文本框相关联。

名称 年龄 重量

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

<第ID = “namelabel”范围= “栏”>姓名</次>

表格中第一个文本字段的HTML是:

<input type =“text”name =“name1”咏叹调-labelledby = “namelabel”>

这会在表格标题中使用“名称”文本标记文本框这个ARIA-labelledby属性可以添加到所有三个名称字段,从而使用一个文本项正确标记所有这些属性。

在此示例的基础上,下表中包含顶部和侧面的可视标签 - 每个控件的多个可视标签。

名称 办公室号码 电话
王心凌
贾里德
乔纳森

此表中第一个字段的HTML是:

<input type =“text”name =“office1”aria-labelledby =“cyndi officenum”>

王心凌officenum价值参考IDs“Cyndi”和“Office Number”表格单元格导航到此字段时,屏幕阅读器将显示“Cyndi Office Number”多个标签的阅读顺序基于指定这些值的顺序。

注意

作为一般规则,如果单个控件存在单个标签,则<标签>应该使用元素来引用它这些标签提供了额外的功能 - 单击它们可以将焦点设置为或激活控件使用时无法使用此功能ARIA-labelledby

重要!

如果控件同时具有关联<标签> ARIA-labelledby,参考ARIA-labelledby文本将覆盖并被读取代替相关的<标签>

ARIA-describedby

有时候表单包含的信息并不完全是标签,但是在导航到表单控件时足够重要,可以被屏幕阅读器读取此附加信息可以与表单字段关联ARIA-describedby属性例如:


新密码必须为8-15个字符,包括字母和数字

这是HTML:

<label for="resetpass">Reset Password:</label>
<input type =“password”name =“resetpass”id =“resetpass”咏叹调-describedby = “newpass”>
点击
<SPANID = “newpass”>新密码必须为8-15个字符,并包含字母和数字</ span>

因为有一个标签,<标签>使用而不是ARIA-labelledby和。一样ARIA-labelledbyARIA-describedby属性指向ID包含密码要求的元素屏幕阅读器将读取相关标签,然后读取相关描述有时会在短暂停顿后阅读说明。ARIA-describedby也可以引用多个元素 - 只需将引用分开ID带空格的值。

注意
  • 虽然ARIA-labelledby覆盖了<标签>ARIA-describedby才不是这意味着ARIA-describedby应该只使用除了标签(例如。,<标签>或<输入ARIA-labelledby>),而不是代替一个。
  • ARIA-describedby属性也可用于引用显示为“工具提示”的描述当控件具有键盘焦点时,工具提示应该对于有视力的键盘用户可见,而不仅仅是当用户使用鼠标悬停或点击时。

隐形标签

有时,表单控件的文本标签在视觉上没有意义最常见的示例是“搜索”字段它在页面中的位置与“搜索”按钮一起使用,使其目的明确添加可视文本标签可能会过度,并可能对网站设计产生负面影响。

当可见标签不可用时,应使用以下三种技术之一:

<标签>

隐藏<标签>使用CSS离屏的元素标签不会在视觉上出现,但仍会被屏幕阅读器读取。

这是标签和表单控件的HTML:

<标签类=“隐藏”for =“s”>搜索字词</ label>
<input type =“text”id =“s”name =“s”>

我们的文章中概述了用于隐藏标签的CSS以及有关此技术的其他信息屏幕阅读器的隐形内容

标题属性

如果表单字段有标题属性,但没有<标签>,屏幕阅读器将阅读标题好像它是一个标签。

这是表单控件的HTML:

<input id =“s”type =“text”name =“s”title =“搜索词”>

当用户用鼠标悬停在场上时,这种技术也会导致出现工具提示,这可能会让一些用户分心。

ARIA标签

ARIA标签当页面上没有文本标签时,也可以使用属性。

<input id =“s”type =“text”name =“s”aria-label =“搜索条款”>

不像ARIA-labelledby必须引用另一个元素,ARIA标签直接包含标签文本和。一样ARIA-labelledbyARIA标签将覆盖任何相关的<标签>元素。

重要
  • 只应实施其中一项建议一起使用两个或更多(例如,隐藏的<标签>和一个副本标题属性)可以使屏幕阅读器重复信息。
  • 占位符文本(例如,<input type =“text”placeholder =“搜索WebAIM”>)不是合适的标签,不应用于代替上述技术。

概括

  • 使用<标签>元素,你可以它具有出色的浏览器和屏幕阅读器支持,用户可以单击标签来选择相关的表单控件。
  • 使用ARIA-labelledby克服1:1的局限性<标签>
  • 使用ARIA-describedby 除了标签何时需要将描述性文本与表单控件相关联。
  • 使用隐藏<标签> 要么 标题 要么 ARIA标签当可见文本标签不可用时。