WebAIM  - 无障碍记

解码标签和名称为辅助

“标签”和“名称”作为WCAG定义

网页内容可及性指引(WCAG)2需要交互元素有一个“标签”和“名称”(通常称为“访问名称”),但这些条款WCAG使用并不总是一致的,他们是如何被开发人员所使用的方式。万博体育官网网址

WCAG定义元素的标签为:“文本或其他部件与被呈现给用户以识别web内容中的分量的替代文本”。它定义的名字如:“文本通过软件可以网页内容到用户中识别一个组成部分。”这些定义几乎是相同的,但有一个重要的区别:“标签”呈现给用户与“名”呈现给软件

换句话说,标签被呈现视觉,和的名字呈现给辅助技术,比如屏幕阅读器和语音控制软件。

标签和名称通常是相同的

对于大多数HTML元素,WCAG名称和标签应该是相同的。例如,若连结的文字为"即时申请" (申请),此文本将同时充当标签(正常用户看到的)和名称(屏幕阅读器用户听到的)。

然而,寻找访问的名称并不简单,尤其是在这三万博体育官网网址种情况中的一种:

  1. 对于图像,您必须检查的替代文本,发现访问名称。万博体育官网网址
  2. 如果一个元素的访问名称竞争的多位信息,你必须确定哪些上升到顶部。万博体育官网网址这是表单控件尤为常见。
  3. 如果一个元素使用ARIA标签(ARIA标签要么ARIA-labelledby),这将覆盖任何其他竞争者进入的名字,有时带来灾难性的后果。万博体育官网网址

作为#1的例子中,链接的图像呈现文本“下一步”:

下一个

此元素的WCAG标签是“下一步”的可见文本,但你不能只是看它知道提供这种图像访问名称。万博体育官网网址

重要

有发现访问的名称主要通过两种方式:万博体育官网网址

  1. 使用屏幕阅读器。
  2. 检查的元件的基本结构。这通常是通过查看代码或者使用内置到浏览器,如Chrome开发者工具开发者工具来完成。

此图像的代码< img src = " nx。png”alt = "下" >。通过使用这两种方法中的一种,我们发现此图片的访问名称是“下一步”,即视觉呈现呈现给辅助技术-the相同的信息。万博体育官网网址

请注意

并不是每一个HTML元素可以有一个访问的名称。万博体育官网网址例如,<跨度>,

不能(在的情况下,除非某些ARIA角色加入其中)。

WCAG 2.1“名义标签”

如果这个链接的图片有“继续”的替代文字:
< img src = " nx。png”alt = "继续" >吗?

WCAG 2.0需要为图像提供等效的替代文本,而单词“Continue”可以说等同于“Next”,因此您可以将其与WCAG 2.0兼容。但是这种可见文本和可选文本之间的不匹配仍然会带来问题。使用像Dragon这样的语音控制软件的用户将无法使用可见标签激活该链接。当一个视力正常的同事让盲人用户“点击下一步”,但他们找不到同名链接或按钮时,盲人用户可能会陷入僵局。屏幕阅读器用户如果不是盲人,当他们看到的是“Next”,听到的是“Continue”时,可能会感到困惑。

WCAG 2.1地址与A级成功标准这个问题:“2.5.3 -名称标签”标签的名称要求访问万博体育官网网址的名字链接或控制包含文本标签。可见文本为“Next”,可选文本为“Continue”的图像将不能满足此要求。

标签和名称不必完全匹配。的“下一页”替代文本将符合标签的名称要求,因为访问的名称万博体育官网网址包含可视标签(虽然“下一步”完美匹配几乎肯定会更好)。

请注意

这一成功的标准只有当元素包含文本或图像应用于文本,将不适用于没有文字的箭头的图像。

平原箭头

万博体育官网网址访问名称计算

一个互动的元素只能呈现信息的一个字符串作为访问名称,但可以有这个位置的竞争大量信息位。万博体育官网网址例如,对于一个文本框的访问名称(万博体育官网网址< input type = " text " >)可能来自<标识>元件或标题,占位符,ARIA标签,ARIA-labelledby-即便是咏叹调占位符属性。当遇到多个选项时,不同的web浏览器一致地显示可访问名称是至关重要的。万博体育官网网址

在W3C,WCAG的创造者,开发了“万博体育官网网址访问名称计算“满足这种需求的一致性。这是一个规范,定义什么可以作为一个可访问的名字,什么‘胜’,如果有一个以上的有效选项可用。万博体育官网网址

其中最常见的地方,这个层次发挥出来的是与表单控件,例如,一个“名”文本字段:

我们将介绍一些可以作为该字段的可访问名称的内容。万博体育官网网址

<标识>通常最好

如果窗体控件具有文字标签,那么它几乎总是最好使用<标识>标识此文本也是可访问名称。万博体育官网网址

<标签= “FNAME”>名:

支持<标识>作为访问的名称万博体育官网网址是坚如磐石的,它具有使文本标签点击,这意味着你可以单击文本并设置集中到一个领域,或者选中一个复选框或单选按钮的好处。

不要混淆<标识>元素与WCAG“标签”。通常最好使用<标识>表示可见的标签,但也可以用其他方式提供标签(下一个示例将演示)。同样,不要混淆的名字在HTML属性与WCAG“名” - 这些是不是在所有相关。

重要

不建议使用下面的例子。它们说明了该访问名称计算。万博体育官网网址请参阅我们的形式的文章例如,的适当使用标题,ARIA-labelledbyARIA标签在形式。

标题属性

如果第一个名称字段不具有关联<标识>元素,但是它有标题属性值,那么这将被解读为访问名称。万博体育官网网址

名字:

名:标题=“名”>

有没有优势,使用的标题属性,而不是<标识>在这个例子中,但也有明显的标签上的缺点,点击后会不会将焦点设置到文本字段,并悬停在用鼠标礼物可以分心领域的提示。然而,文本“名”将提交的输入名称的屏幕阅读器的用户。

占位符属性

如果“第一个名字”的可见文本以占位符属性?

< input type = " text "占位符=“名”......>

占位符文本通常由屏幕阅读器读取,因此这个输入有一个可访问的名称(尽管有时对此存在争议)。万博体育官网网址主要的问题是占位符文本不能作为合适的标签。的HTML规范对于占位符状态尽可能多的“占位符属性不应该被用来作为一种替代的标签”(意为WCAG标签,而不是<标识>元件)。这是因为占位符文本消失,一旦用户进入该领域或开始输入文字。占位符文本也可能有低对比度。

依靠占位符在视觉上指示什么一个字段是用于也可能会导致形式控制失败其他WCAG要求(例如,3.3.2标签,说明书)。

艾瑞亚唱片公司总是赢

仿佛标签和名称之间的差异不足够困难,出台ARIA标签ARIA-labelledby使它更加混乱。

要记住的最重要的原则是,ARIA标签始终位于可访问名称层次结构的顶部。万博体育官网网址ARIA-labelledby将覆盖任何其他可作为可访问名称的信息,包括万博体育官网网址ARIA标签,<标识>对于表单控件,则ALT属性用于图像,按钮值用于按钮,链接文本用于链接。

例如,一个文本字段有<标识>ARIA标签:

<标签= “FNAME”>名字: aria-label = "你的名字">

在这种情况下,屏幕阅读器在导航到字段时会显示“你的名字”,而如果Dragon用户说“点击名字”,什么也不会发生。因为标签(“名”)不在可访问名称(“您的名字”)中,这将是名称失败中的WCAG标签。万博体育官网网址

人们常以为ARIA标签添加或添加到其他的信息,但这种情况并非如此。明白这个道理的失败导致了在网上混淆或无法访问所有的相互作用。万博体育官网网址如果我们回到前面提到的“立即申请”链接,然后使用CSS,添加一个小的“PDF”的形象,因为这个形象传达的内容,那就需要替代文本。

马上申请PDF

善意的开发商可能会给这个链接aria-label = " PDF "想着屏幕阅读器将结合链接文本和ARIA标签值:

< a href = " fall-calendar。pdf”类= " PDFlink "aria-label = " PDF ">现在申请

相反,屏幕阅读器将只读取“PDF”。链接的目的,“立即申请”,将被完全隐藏到屏幕阅读器由ARIA标签文本的用户覆盖。这个链接也将被打破的人谁试图激活使用语音控制的链​​接。

万博体育官网网址残疾人专用说明

访问的名称计算的全名其实是“万博体育官网网址万博体育官网网址残疾人专用名称和描述计算”。万博体育官网网址可访问的描述提出除,而不是相反,访问名称。万博体育官网网址这些是用于关联附加线索,如表单字段的要求或错误消息是有用的。的aria-describedby属性是定义描述的最好方法。

如果没有aria-describedby,但有一个标题属性,则标题通常会作为描述显示。因为标题属性值通常被屏幕阅读器读取,它会创建大量重复的内容,应该谨慎使用。

工具来识别访问的名称和说明万博体育官网网址

确定元素可访问名称的唯一方法是检查其底层HTML结构,或者使用屏幕阅读器与之交互万博体育官网网址。网页易访问性评估者最好至少有三种工具来帮助他们识别网页内组件的易访问性名称:万博体育官网网址

  1. 在整个页面中公开可访问性信息的工具。除此之外,该工具应该显示表单标签,图像交替文本,并存在ARIA标签/ labelledby / describedby是一个免费的工具,它提供了这个功能。
  2. 检查底层HTML的工具。Chrome和Firefox都包含内置工具,不仅可以检查HTML,还可以检查元素的可访问性属性,包括名称和描述。Chrome开发者工具(DevTools)甚至会显示特定元素的可访问名称计算的层次结构,以及所有竞争这一榜首位置的元素。万博体育官网网址
    Chrome DevTools辅助选项卡显示所选元素有aria-label和aria-describedby。它还显示了aria-label是可访问的名称,覆盖了label元素和占位符属性。万博体育官网网址
  3. 屏幕阅读器。确保信息按照应有的方式呈现给最终用户是很重要的,特别是在评估用户ARIA的元素时。改良式戏剧活动在Windows和VoiceOver会在Mac OS是免费的屏幕读者,都是很好的评价。

结论

回顾一下:

  • 该WCAG标签是视觉信息和域名(或访问名称)是呈现给辅助技术的信息。万博体育官网网址
  • 访问名称万博体育官网网址必须包含在可见WCAG标签显示的文本,以及两个通常应该是相同的。
  • 元素只能有一个名称。如果有不止一个东西可以作为名称,那么可访问名称计算将决定哪个会胜出。万博体育官网网址
  • 咏叹调标签(ARIA-labelledbyARIA标签)覆盖所有其他访问名称,包括万博体育官网网址<标识>,ALT属性、按钮和链接文本。
  • 描述除了访问名称呈现。万博体育官网网址
  • 要成为名字的,当然,你必须检查一个元素的基础HTML或测试它与屏幕阅读器(或两者)。

如果你遵循这些原则紧密结合,你的网站将更加屏幕阅读器和语音控制友好的用户使用。