WebAIM  - 无障碍记

简介ARIA - 无障碍富互联网应用程序万博体育官网网址

介绍咏叹调

WAI-ARIA(无万博体育官网网址障碍富互联网应用程序或ARIA)是一个W3C规范以普通HTML无法实现的方式增强可访问性。如果使用得当艾瑞亚可以…

  • 增强的交互式控件,如树菜单,滑块,弹出窗口等的无障碍
  • 定义页面结构有帮助的地标
  • 定义动态更新的“活区”
  • 提高键盘辅助和互动
  • 以及更多

HTML有一个定义,但不断发展的词汇。例如,<眨眼>已删除,而<主>已添加。ARIA提供了新的代码属性和扩展HTML的增强屏幕阅读器可访问的词汇和语义值。

像HTML,ARIA随时间演变,并且通常还有在现代浏览器和屏幕阅读器支持。许多脚本库也支持ARIA。

ARIA使用规则

所述ARIA规范定义ARIA使用的五个规则支持最佳的可访问性。这些规则总结如下。

规则#1 - 如果你可以使用HTML本地的HTML元素和属性,那么这样做。

HTML是网页易读的基础。当HTML提供了足够的语义无障碍ARIA不应该使用!如果使用不当,ARIA可以引入显著辅助功能障碍。

规则#2 - 不要改变原生语义,除非你真的不得不这样做。

大多数HTML元素都有可以传达给屏幕阅读器用户的默认语义或含义。必要时,ARIA可以覆盖和更改这些语义。

一种

    元件,例如,定义了一个无序列表。当屏幕阅读器遇到的,它被识别为一个无序列表。屏幕阅读器还宣布列表中的项目数量,使列表项的导航,以及更多。如果ARIA角色添加到
      ——例如,-- 那么语义覆盖,失去了名单。元素现在变成了导航标记(见下文)和无序列表的无障碍好处都没有了。代替,< div的作用= "导航" > < ul >…< / ul > < / div >提供导航标志性的利益和无序列表的好处。(更重要的是,<导航> < ul >…< / ul > < / nav >是不依赖于ARIA在所有语义上等同)。

      规则#3 - 所有互动ARIA控件必须用键盘使用。

      ARIA设计模式为ARIA小部件和控件定义标准键盘交互。这允许每个人使用键盘来使用小部件,并确保屏幕阅读器提供的指令与页面中的实际功能保持一致。

      规则4 -交互控件必须有适当的语义并且不能被隐藏

      即键盘可聚焦的任何元素(主要是使用标签键),必须有正确的语义,这样它会被识别为一个链接,按钮,表单控件等,或其它元素与合适的角色值。以来角色= "表示"中移除了语义,它必须不会被施加到可聚焦元件。

      同样,交互元素必须是可见的。不隐藏的焦点元素CSS或ARIA隐藏=“真”

      规则#5 - 所有的互动元素,必须有一个访问名称万博体育官网网址

      遇到的控制时的描述了一个交互式控制文本必须呈现给屏幕阅读器的用户。A键必须有描述性文字(如“注册”)和文本输入必须有一个描述性的标签(如“名”)。屏幕阅读器宣布识别控制的内容称为其“万博体育官网网址访问名”。ARIA还可以用来定义可访问的名称。万博体育官网网址

核心组件

ARIA的三个主要组成部分是角色属性,状态

角色

角色定义是什么元素或服务内容。大多数HTML元素都呈现给辅助技术一个默认角色。例如,<按钮>有“按钮”的默认角色和

有“形式”的默认角色。ARIA可以定义不在HTML可用角色,并且还可以重写HTML元素(见规则#2以上)的默认角色。

ARIA角色的一个例子是<形式角色=“搜索”>。在HTML中,所有形式具有相同的语义。但随着ARIA,您可以定义一个特定形式的语义是一个搜索表单。

默认HTML角色不应该使用ARIA规避之类的东西被复制<按钮角色=“按钮”>

ARIA不会改变浏览器的行为或外观。

添加角色=“按钮”

,例如,不会使
功能类似或出现像的按钮。然而,这将导致屏幕阅读器宣布它作为一个按钮,即使它也无法访问或使用键盘激活。作者必须执行适当的设计和交互模式,通常是通过JavaScript和CSS,与ARIA一起。

属性

ARIA属性定义的HTML标准不支持额外的语义。一个例子是<按钮aria-haspopup = " true " >。此属性扩展了标准键,使屏幕阅读器宣布该按钮时,如果启动的话,将触发弹出。

ARIA状态是定义一个元素的当前状态的属性。他们一般是根据用户交互或一些动态变量发生改变。一个例子是<输入咏叹调-无效=“真”>。此属性将导致屏幕阅读器阅读此输入作为目前正在无效的(这意味着它需要更正),但是这个状态值可以很容易地改变动态地根据用户输入。

ARIA角色,状态和性能可以在标记中定义,或者它们可以被定义并动态地设置和改变使用脚本。ARIA的状态和属性的特性始终以“aria-”(例如启动,咏叹调-需要=“真”)。

地标角色

ARIA可以定义显著页面地区或区域的作用。这些都是由屏幕阅读器,并在页面方向和导航帮助鉴定。可用的文件具有里程碑意义的角色是:

旗帜
面向站点的内容,通常包含网站名称、标志、搜索和/或主导航。语义上等价于<头>
导航
包含文档或网站导航链接的区域。语义上等价于<导航>
主要
该文件的主要或中心内容。语义上等价于<主>
补充
支持主要内容的内容,通常显示在侧边栏中。语义上等价于<预留>
contentinfo
信息子内容,如脚注,版权,链接到隐私声明,链接喜好,等等。语义上等价于<页脚>
搜索
包含该网站的搜索功能的一个部分。有一个在HTML中没有等效元素。

在一个典型的网页,标志和标头的内容可能与角色的元素中旗帜。在顶部的导航链接将内识别导航,通常包含内旗帜。该网站搜索表单将被给予<形式角色=“搜索”>。文章的主体将是主要。在侧栏中的相关链接可能会被认定为补充。页脚内容和链接在页面的底部将有一个角色contentinfo

注意

所有咏叹调的标志性角色,除了搜索,有相当的HTML“地区”。只要有可能,最好是使用HTML标记(见规则#1的上方),而被允许使用HTML元素和属性ARIA两者(例如,),这引入不必要的标记和用于错误的可能性。术语“地标”和“区域”通常是屏幕阅读器的代名词。了解更多关于区域。

屏幕阅读器提供所有地标清单/上一个页面和快捷键区域当中导航。一些辅助技术允许用户跳转到特定地标/地区(例如,中号为主要内容)。

一般地区

如果重要页面或web应用程序区域与上面的标志性角色不一致,则角色= "地区"可以被添加的属性创建一个通用标/区域。它必须有使用定义的描述性名称访问万博体育官网网址ARIA标签aria-labelledby(例如,)。

ARIA标签和说明

HTML促进协会的支持accessibility-<标签>为形式的输入,<标题>为数据表的说明中,用于数据表中的行和列标题,等等。当HTML不能创建必要的关联时,可以使用ARIA。

aria-labelledby中,元素引用ID属性值(或者,在一些情况下,多个ID的元件(一个或多个的属性值))含有充当其描述性标签的文本。这个区域将被标记,并确定了内文

——“过滤器”:

< div的作用=“地区”咏叹调-labelledby = “filtersheading”>
< h2ID = “filtersheading”>过滤

ARIA标签可以直接在属性值中应用标签文本。即使

内容是“搜索过滤器”,这个区域将被标记ARIA标签“过滤器”的价值:

< div的作用=“地区”ARIA标签=“过滤器”>

搜索过滤器

aria-labelledby方法是在这种情况下,更好 - 它不重复的内容,并确保如果标题文本改变时,该区域的标签也将改变。当另一个元素中的文字可以被引用,然后aria-labelledby应该被使用而不是ARIA标签

每个互动元素需要描述其功能的文字。附加视觉相关联的描述的文本可以与相关联ARIA-describedby。喜欢aria-labelledby,描述元素的ID属性值被引用。

<标签= "密码" >密码:> < /标签
<输入id = "密码"咏叹调-describedby = “要求”>
id = "要求"您的密码长度必须至少为8个字符

描述通常由屏幕阅读器在标签之后读取,有时也作为元素的最后信息读取。描述对于表单输入最有用。请注意,前面的示例使用<标签>而不是ARIA标签,因为<标签>是足够的(见规则#1的上方)。

小费

与形式输入时ARIA标记是最有用的,功能强大。见我们的文章高级表单标签

与ARIA定义标签附带一些限制和警告。如何标签和说明计算在网页中极其复杂,但下面是一些一般准则。

  • 为了分配一个ARIA标签,元件必须是贴标签的-任一个链接,按钮,或表单控件,或具有特定的HTML或ARIA语义。许多元素都没有labelable-

    ,<跨度>除非分配了适当的ARIA角色
  • ARIA标签覆盖HTML元素的默认文本和可访问名称。万博体育官网网址如果一个输入有<标签>一个ARIA标签aria-labelledby中,<标签>不会被阅读。类似地,链接/按钮文本和图像alt属性值被ARIA标签文本覆盖。
  • 一个元素只能有一个访问的名字,但你可以参考多个元素万博体育官网网址IDs的aria-labelledbyARIA-describedby来连接多个文本:
    <表咏叹调-labelledby = “tablecaption tabledisclaimer”>
  • WCAG要求,对于一个元素的可见文本标签包含其访问的名称(这是由屏幕阅读器读取)内。万博体育官网网址当使用ARIA标签,确保之间有什么视力正常的用户所看到的与屏幕阅读器的用户听到的一致性。许多屏幕阅读器的用户有一定的视力。
  • 屏幕阅读器用户可以暂停和探索页面文字内容,甚至是阅读内容字的字或字母逐个字母。但是,这是不可能的ARIA标签或说明它们,而不是读出文本流。保留这些简洁。
  • 当相关aria-labelledbyARIA-describedby文本阅读,所有的语义被删除。引用元素中的链接,表格,清单等提出标签或说明文字时,不识别。
  • 确保ARIA标签和说明是否已正确实施的最佳方式是在屏幕阅读器来听。您也可以使用浏览器检查元素的访问的名称和说明万博体育官网网址开发人员工具

动态内容更新

动态内容的变化可能会造成可访问性问题。如果同时更新屏幕阅读器读取元素会发生什么?如果更新的内容是很重要的,如果用户被中断?应着重立即设置为新的内容?如果用户只需更新的通知,使他们能够找到其他地方呢?如果没有发生呢?

ARIA可以标记动态变化的页面领域实时区域。直播区使内容更新屏幕阅读器兼容,通知更新的用户,为现场提供区域控制,确定被读取,以及更多新的内容量。

要创建活动区域,开发人员需要添加aria-live属性将更新的元素。此属性必须在第一次加载页面设置;注射后不可靠地工作。该aria-live属性接受的值有礼貌的,或断言的指定当元素被更新屏幕阅读器应该做的事情。

关的值(ARIA活=“关”)告诉屏幕阅读器没有公布更新。如果屏幕阅读器用户以后遇到更新的内容,它会在那个时候被读取。这将被用于不相关或不太重要的内容更新。它是有用的,主要用于那些从动态变化实时区域有礼貌的断言的使用脚本。

的价值有礼貌的将导致屏幕阅读器在下一个逻辑暂停时读取更新后的内容。这个值通常用于状态通知、天气或股票更新、聊天消息等。

一个aria-live的价值断言的将立即-很可能宣布的内容改变时,屏幕阅读器用户在收听到其他页面的内容。自信是最重要更新,如错误消息保留。

护理是必要的所有活动区域,以确保屏幕阅读器的用户都不会不必要中断或通知不堪重负,尤其是如果有一个页面上的多个实时区域。测试页面的屏幕阅读器将很快显露,如果是这种情况。

还有其他ARIA角色创造生活区,包括属性值警报日志,计时器。与ARIA实时区域的保真度的高层次同时允许开发人员和最终用户的极大的灵活性。

ARIA的Widgets键盘辅助

部件的例子包括滑块,下拉和飞出菜单,树系统,拖动和拖放控制,自动完成的文本框,对话框窗口和工具提示,仅举几例。它们是创建并通过脚本控制的互动元素。窗口小部件通常是要么不是天然的HTML或是HTML控件,其通过脚本大大增强。

Widget是不是本地访问,HTML已经非常有限的万博体育官网网址标记定义复杂的部件。然而,通过建立一套标准的角色,属性和状态,ARIA帮助开发人员实现无障碍相对容易。

ARIA的设计模式和窗口小部件为创建各种部件的具体要求。这是至关重要的,这个指导应遵循!下面是一些高层次的考虑。

在HTML中,只有链接和表单控件可以接收键盘焦点。当用户按下标签通过一个页面导航,浏览器停止或集只着眼于这些类型的元素,从而允许它们被激活和操纵。

使用脚本和CSS,其他页面元素(例如

<跨度>)可以使其在视觉鼠标用户面前的显示和行为类似于交互式控件。但是,不需要额外的努力,这些对屏幕阅读器用户来说既不能通过键盘访问,也不能识别为交互式控件。万博体育官网网址为了避免这种功能丢失,尽可能使用HTML标记(例如,<按钮>该函数如按钮元素,的链接,<选择>用于选择菜单等)。但是,当需要定制小部件时,ARIA可以帮助填补这一空白。

重要!

可访问,互动万博体育官网网址小部件或控制必须:

  1. 是键盘可聚焦并拥有适当的键盘交互。
  2. 有一个描述性的访问名称。万博体育官网网址
  3. 具有标识作用,状态和性能适当ARIA标记

标准HTML控件通常应该用来提供键盘交互性。可替换地,元件,其本身不可聚焦(如

)可以制成可聚焦的使用tabindex属性阅读更多有关的TabIndex):

  • 的tabindex = “0”使得可聚焦使用键盘或脚本,就好像它是一个链接或按钮的任何元件。
  • 的tabindex = “ - 1”使得使用脚本的任何元素可获得焦点,但不能用键盘。
  • 正tabindex属性值(的tabindex = “1”或更高)必须避免。他们强制页面上的人工通航秩序,破坏自然秩序。

通过应用的tabindex = “0”,当用户切换到元素时,浏览器将停止并将焦点设置为文档导航顺序中的元素。这允许一个元素是交互式的,比如当元素接收到键盘焦点时,或者当用户在元素有焦点时按下一个键时触发功能。对于某些ARIA小部件(如选项卡面板、菜单和树控件),这有时是必要的。键盘功能必须与ARIA设计模式需求保持一致,以确保小部件提供标准的键盘交互模式。

重要!

如果元素是通过按压可聚焦标签在键盘上,它也必须是功能性的-意味着它可以响应键盘激活。应用的tabindex = “0”只有互动元素。

的tabindex = “ - 1”允许一个元件以编程-当获得焦点的用户遵循的元素链接( ...),或者当焦点被设置与脚本(例如,的document.getElementById( 'errormessage的')聚焦();)。这对于错误消息、对话框等不是天生可定焦的HTML控件,但您希望关注于最佳可访问性的情况尤其有用。

重要!

的tabindex = “ - 1”去除键盘导航订单用户的元素不能标签给它。因此,它是很少适当的链接,按钮,或其他元素,用户可能需要导航到。

一旦一个控件是键盘可聚焦,它必须使用HTML值(如按钮文本),或协会的描述访问的域名(如万博体育官网网址<标签>)或,如果不可能使用HTML,则使用aria-labelledbyARIA标签

此外,元素必须具有适当的ARIA角色值,如设计模式定义。这保证了屏幕阅读器的用户被告知哪些部件是和它做什么。这也可能导致屏幕阅读器宣布如何与它进行交互特定部件的说明。某些小部件也需要ARIA的状态和属性通知屏幕阅读器和支持键盘辅助。

通过扩大在浏览器中,否则不能接收焦点元素的对焦能力,并通过提供适当的访问名称和ARIA标记,网页制作者有很大的灵活性和能力来构建复杂的部件和接口都非常方便。万博体育官网网址

基本ARIA例子

按钮的增强

按钮的语义可以增强对具有特殊功能的按钮。

  • <按钮aria-haspopup = "对话" >使屏幕阅读器宣布,该按钮会触发一个对话框窗口。额外ARIA-haspopup菜单列表框,真正的也可提供。一定要按照唱腔设计模式。
  • <按钮咏叹调发泡=“真|假”>可以就此展开按钮或折叠内容通常被称为披露,zippies,或手风琴使用。设置适当的值通知按钮下面的内容,以及是否状态的屏幕阅读器是否可用。
  • <按钮咏叹调压=“真|假”>指示切换按钮是否被当前按下/激活。
小费

元素可以根据自己的ARIA属性和属性值的样式。这可以帮助提供的视觉指示状态,并且可以让视觉改变通过CSS得到更有效的控制,而不是脚本。例如,该CSS声明适用于具有蓝色背景的任何元素咏叹调压=“真”
[咏叹调压=真{背景色:#00F;}

装饰和展示元素

角色= "表示"属性删除HTML元素的本机语义,使其类似于

<跨度>。如果一个HTML元素用于控制演示文稿或布局这可能是有用的,或者元素的内在语义是不恰当的。常见的例子包括用于表象结构布局表,列表和需要没有替代文本元素。

从屏幕阅读器的用户隐藏内容

ARIA隐藏=“真”属性隐藏了某些类型的屏幕读取器的内容。有非常少数使用案例ARIA隐藏- 如果事情是在页面上可见,它应该总是呈现给屏幕阅读器的用户。然而,ARIA隐藏=“真”可用于避免的内容或不应该被呈现给屏幕阅读器的用户元件显著重复。

重要!

ARIA隐藏=“真”绝不能分配到的东西是键盘导航的(或包含的东西是),因为键盘导航中的元素遗体流,即使屏幕阅读器可能不会公布其内容或周围的内容。这很容易混淆屏幕阅读器的用户。在极个别情况的tabindex = “ - 1”可能与使用ARIA隐藏=“真”删除被读取和导航到的元素。

可伸缩矢量图形(SVG)

无障碍元素还不健壮。幸运的是,可以使用ARIA来确保SVG元素中的内容是可访问的。万博体育官网网址

在下面的例子中,角色= “IMG”属性的元素定义为一个图像。访问的名万博体育官网网址称(替代文本)使用规定aria-labelledby其中引用<标题>在SVG中的元素:


<标题ID = “标题”>销售从2010年增长了10%至2015
...

下一个例子也有角色= “IMG”,而是使用ARIA标签定义备选文本:

将有效地隐藏元素相似“”

对于更复杂的和定制的部件,一定要遵循标准化WAI-ARIA创作实践。屏幕阅读器的测试是几乎总是必要的时候ARIA实现。

延伸阅读

这只是一个概述。为了确保访问ARIA万博体育官网网址实现,请遵循WAI-ARIA创作实践。该MDN Web文档还提供了有用的参考ARIA。有关JavaScript的更多详细信息和脚本化交互,请参阅我们JavaScript的可访问性的文章