富Internet应用程序的可访问性

概观

This article will provide some techniques and general approaches to rich internet application accessibility本文不会介绍您需要了解的所有内容,但会提供有关制作动态和复杂脚本内容的一般概述。

关于ARIA的说明

WAI-ARIA (万博体育官网网址 Rich Internet Applications or ARIA) isW3C协议用于增强和支持脚本和动态内容的可访问性ARIA enhances accessibility of interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), provides content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more.

ARIA受到大多数最新浏览器和屏幕阅读器的支持它也受到许多脚本库的支持尽管ARIA尚未得到普遍支持,但在与现有HTML和脚本可访问性技术一起使用时,它可以在支持它的地方提供额外的可访问性支持,同时在不支持的情况下不会引起兼容性问题。

阅读我们的有关JavaScript可访问性的更多一般详细信息,请参阅WebAIM文章

通常,富Internet应用程序的可访问性问题可以表征为:

  • 无法提供页面区域和功能的语义结构(例如,导航,主要内容,搜索等)
  • 无法访问动态且可能在页面内更改的内容(例如,AJAX内容更新)
  • 无法将键盘焦点更改为页面元素(例如,将焦点设置为页面内的错误消息)
  • 使用复杂小部件和导航元素(例如,滑块,菜单树等)的键盘和屏幕阅读器访问困难

ARIA可以帮助解决许多这些问题。

核心组件

三个主要组成部分是角色性能,和状态

角色

ARIA角色定义元素是什么或做什么大多数HTML元素都具有默认角色,可以呈现给辅助技术例如,按钮的默认角色为“按钮”,表单的默认角色为“表单”使用ARIA,您可以定义HTML中不可用的角色您还可以覆盖HTML的默认角色这允许您以HTML格式向屏幕阅读器呈现HTML中的元素和小部件,并以更准确的方式呈现。

ARIA角色的一个例子是&ltform role =“搜索”>在HTML中,所有表单都具有相同的语义但是使用ARIA,您可以添加特定表单的语义以将其定义为搜索表单。

属性

ARIA属性定义..好的,元素的属性或含义您可以通过定义标准HTML中不允许的元素的属性来扩展HTML的本机语义一个例子是<输入aria-required =“true”>此属性将使屏幕阅读器根据需要读取此输入(意味着用户必须完成此输入)。

状态

ARIA状态是定义元素当前条件的属性它们通常基于用户交互或某些动态变量而改变一个例子是<input aria-disabled="true">此属性将使屏幕阅读器将此输入读取为已禁用,但此状态值可以轻松更改为动态地基于用户输入。

ARIA角色,状态和属性可以在标记中定义,也可以使用脚本定义和动态设置和更改它们ARIA状态和属性属性始终以“aria-”开头(例如,咏叹调-需要=“真”)。

地标角色

WAI-ARIA使开发人员能够指定重要文档区域的角色可用的文档地标角色是:

旗帜
面向网站的内容,例如网站名称,页面标题和/或徽标。
导航
包含文档或网站导航链接的区域。
主要
文档的主要或中心内容。
搜索
本节包含该站点的搜索功能。
文章
独立内容,从文档的其余部分脱离上下文示例可能是博客帖子,博客评论,论坛帖子等具体而言,博客发布可能被标识为文章,并且个别博客评论也可能在该博客发布中标记有文章角色。
补充
支持主要内容的内容
contentinfo
信息性儿童内容,例如脚注,版权,隐私声明链接,偏好链接等。

在网站上,徽标和标题内容可能会被赋予角色旗帜顶部的导航选项卡将标识为导航显然会给出网站搜索表单<form role = search>The related links in a side bar might be identified as补充文章的主体是主要页面底部的页脚内容和链接将起作用contentinfo

大多数页面现在至少可以应用几个标志性角色 -<ul role =“navigation”>要么<div role =“main”>要么<form role =“search”>ARIA的这个功能不仅限于丰富的应用程序,而是可以应用于几乎任何当前的网页。

辅助技术提供快捷键以导航定义为地标的元素,或者可能跳转到特定结构元素(例如,S用于搜索),和/或提供文档中所有结构元素的列表此外,ARIA还为其他类型的元素提供了新角色,例如角色=“演示”用于布局中使用的表格它还允许您识别所需的表单元素,提供更好的表单标签和说明,并允许您向屏幕阅读器用户提供即时反馈。

动态内容更新

当内容在网页中动态更改时,可能会导致可访问性问题What happens if a screen reader is currently reading an element that is updated? If the updated content is important, should you interrupt the user and set focus immediately to the new content, do you simply inform the user of the update, or do you do nothing? How do you set focus or allow the user to jump to the updated content?

使用标准脚本,开发人员必须决定在发生内容更新(例如AJAX驱动的反馈消息)时会发生什么开发人员可以简单地允许更新发生而不通知用户,通过某种嵌入式音频声音提醒用户更新,或者可以直接将焦点设置为更新的内容开发人员必须编写上述每种情况的脚本,从而从用户中删除控件。

使用WAI-ARIA,开发人员可以识别动态变化的区域住区实时区域允许以屏幕阅读器理解的方式更新内容它还允许开发人员添加其他功能以提醒用户,提供实时区域的控件,确定将要读取的新内容的数量等等。

为了创建一个实时区域,开发人员添加了ARIA活具有off,polite,assertive或rude值的元素的属性值或礼貌级别(或者侵入性级别)指定了屏幕阅读器在更新元素时​​应该执行的操作。

值为off(ARIA活=“关”)告诉屏幕阅读器不要宣布更新如果/当屏幕阅读器用户遇到更新的内容时,将在那时阅读这将用于非重要或不相关的内容更新。

价值有礼貌他/她完成当前任务后将立即通知用户内容更改这可能采取更新的蜂鸣声或音频指示的形式然后,用户可以选择直接跳转到更新的内容此值对于内容更新最常见,特别是对于状态通知,天气或股票更新,聊天消息等内容。

一个ARIA活的价值断言的将导致用户立即或尽快收到内容更改的警报Assertive将用于重要更新,例如错误消息

您还可以定义更新发生时应读取的内容此外,还有一些特殊的ARIA角色可定义某些类型的高动态内容,例如警报,日志和计时器ARIA live区域的高保真度为开发人员和最终用户提供了极大的灵活性。

增强键盘辅助功能

在HTML中,只有链接和表单元素可以获得键盘焦点这意味着,当您“浏览”页面时,浏览器会停止或仅将焦点设置在这些类型的元素上但是,通过脚本,您可以为几乎任何元素添加鼠标交互性这意味着您可以制作正常的页面元素,例如段落或跨度,交互式并响应鼠标(例如,您可以进行纯文本显示并且表现得像按钮)这些不可聚焦的元素的功能无法用于屏幕阅读器和仅限键盘的用户开发人员通常需要除链接和表单元素之外的页面元素才能进行交互。

此外,通常需要将焦点设置为页面元素例如,表单验证错误消息可能使用脚本在页面中显示为文本(不是链接或表单元素)可视用户可以立即看到错误消息但是,屏幕阅读器用户可能不知道新消息存在为了将焦点设置为错误消息以便屏幕阅读器可以读取,消息必须能够获得焦点 - 除非是链接或表单控件,否则它通常无法做到。

ARIA再次为非焦点元素提供了通过tabindex属性获得焦点的机制(请参阅我们在tabindex上的相关文章)ARIA扩展了tabindex属性,因此它可以应用于任何元素通过将tabindex值设置为0(的tabindex = “0”),元素将被放置在文档的Tab键顺序中这意味着浏览器将停止并将焦点设置为文档导航顺序中的元素(例如,当用户选中元素时)这允许将附加功能和交互性应用于元素,例如当元素接收键盘焦点时触发功能,或者当元素具有焦点时用户按下键时触发功能。

tabindex值为-1允许元素接收焦点,但仅在以编程方式设置焦点时 - 意味着用户激活元素的链接(<a href="#maincontent"> ......)或焦点是用脚本设置的(例如,。的document.getElementById( 'errormessage的')聚焦();)。

通过将Web浏览器中的焦点功能扩展到无法获得焦点的元素,ARIA允许提供可访问性的其他可能性。

小部件可访问性

术语“小部件”广泛用于描述通过脚本创建和控制的交互式元素它指的是非HTML原生的控件或通过脚本大大增强的HTML控件Examples of widgets would include sliders, drop-down and fly-out menus, tree systems, drag and drop controls, auto-completing text boxes, and tooltip windows, to name a few小部件的可访问性不是本地或自然发生的HTML用于定义复杂的小部件的标记非常有限。

虽然脚本通常可以为许多这些元素提供可访问性,但它通常以不同的方式实现简而言之,制作这些小部件的键盘和屏幕阅读器通常是可能的,但它相当困难,而最终的结果往往只是为了实际目的而略微宽松一些。How do you make a complex menu system intuitively keyboard 万博体育官网网址? How do you make a drag-and-drop element keyboard 万博体育官网网址? How do you present ordering details for sortable list items? How do you present visual tooltips or pop-up messages to blind users?

通过建立一组标准的角色,属性和值,ARIA允许开发人员相对轻松地解决这些可访问性问题。

以下提供一些非常基本的例子如何实施ARIA。

必填表单元素

(需要)

<label for =“name”>名字</ label>:<输入名称=“名称”id =“名称”咏叹调-需要=“真”> <em>(必填元素)</ em>

此输入框演示了一个常见问题 - 表单元素是必需的,但单词“required”不包含在表单元素的标签中,因此不太可能被屏幕阅读器说出ARIA的咏叹调-需要=“真”将告知屏幕阅读器需要指定的表单元素。

注意:

ARIA通常不会更改页面功能在上面的例子中,咏叹调,需要属性不会以某种方式强制用户在文本框中输入内容相反,它只是通知用户该字段是必需的。

按钮示例

以下是可以使用键盘单击或激活的文本元素(不是实际的HTML按钮)(选项卡到按钮并按Enter或空格键)。

推我

<span style =“background-color:#ddd; border:medium outset white;”role =“button”tabindex =“0”onkeydown="if(event.keyCode==13 || event.keyCode==32) alert('You activated me with the keyboard');" onclick="alert('You clicked me with the mouse');">Push Me</span>

在此示例中,文本的样式在视觉上显示为按钮该角色=“按钮”告诉浏览器文本应该像按钮一样。的tabindex = “0”将元素放入键盘导航流程中,以便键盘用户可以激活按钮onkeydown事件处理程序检测用户是否在关注元素时按Enter或空格键虽然这个例子有点人为(为什么不只是使用一个实际的按钮?),它展示了ARIA能够为任何元素添加语义和交互性的能力。

表格验证示例

在这个例子中,允许浏览器导航到页面的其他部分。

输入1到10之间的数字

输入答案:

由于在错误响应后将键盘焦点设置回带有JavaScript的表单元素,因此屏幕阅读器将不会读取反馈消息在这种情况下,给出反馈消息角色=“警报”当它显示这导致屏幕阅读器立即读取反馈消息用户现在可以使用适当的反馈重新尝试响应一旦提供了正确答案,焦点就会被释放到紧随其后的文本中(已给出的tabindex = “0”这样它就可以获得焦点而不是聚焦跳转到页面中的下一个表单元素或链接。

对于更复杂和自定义构建的小部件,ARIA定义了标准的ARIA属性和键盘交互模式一定要遵循标准化ARIA设计模式

结论

这些示例演示了现在可以实现ARIA的几种基本方法,以增强交互元素的可访问性但是,ARIA支持许多其他类型的小部件和交互对于复杂的小部件和交互,开发人员很可能会使用现有的脚本库来创建这样的元素,而不是从头开始构建。幸运的是,ARIA正在实现许多脚本库(例如jQuery的道场YUI,和GWT)虽然开发人员当然可以将ARIA实现到他们的高级小部件和应用程序中,但使用ARIA支持的库可以极大地简化提供此级别可访问性的过程。

ARIA无法解决所有可访问性问题,并且可能有点难以实现,但它提供的可访问性水平远高于目前仅通过HTML和脚本编写的可访问性随着浏览器,辅助技术和脚本库的支持不断增加,ARIA正成为确保富Internet内容和应用程序可访问性的绝佳工具。