Web 2.0 技术中的可访问性

  简介

      可访问性移除了特定群体访问信息的障碍,它正在成为 Web 应用程序的公共需求。可访问 Web 应用程序要帮助的目标群体包括残疾人、老年用户和其他难以操作程序的可视及物理元素的人。在现代辅助技术的帮助下,这些人将能够与软件应用程序交互,但前提是这些应用程序能全面兼容可访问性标准。

      随着富客户机技术的迅速发展,许多 Web 应用程序都已经发展到了 Web 2.0 时代。使用 Dojo 等 Ajax库或 Flash 等其他客户端技术,网站正在为浏览器带来更加可靠的用户体验。用户可以动态更新 Web 元素,并在页面中随意拖放它们。曾经认为只适用于桌面应用程序的用户体验现在已经可供 Web 用户使用。

      2008 年,致力于开发 Web 标准的国际组织万维网联盟(World Wide Web Consortium,W3C)发布了 Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0 文档定义了一系列指导方针,以提高 Web 内容对于残疾人的可访问性。WCAG 2.0 旨在涵盖大多数已有 Web 技术以及可能的未来技术,包括 Web 2.0 技术中的动态内容。

WCAG 2.0 称,Web 2.0 应用程序中通常存在一些常见的可访问性问题。这些问题可以分为四类:

  • 文档结构
  • 动态内容更新
  • 增强键盘的可访问性
  • 小部件的可访问性

  在本文中,我们将分别讨论这些问题,并提供一些可行的解决方案。

  WAI-ARIA 简介

      WAI-ARIA 的全称是 Web Accessibility Initiative – Accessible Rich InterNET Application 套件。它定义了一些方法来提高 Web 内容和 Web 应用程序对于残疾人的可访问性。它的一些 Web 2.0 特性尤其有用,比如动态内容以及使用 Ajax、HTML、JavaScript 及相关技术开发的其他高级用户用户界面控件。WAI-ARIA 是一组由普通 HTML 标记组成的标记库,这些标记只能由浏览器和支持它们的 Assistive Tools (AT)映射到有用的信息。WAI-ARIA 充当 AT 和 Web 用户界面之间的协议,这为 Web 页面用户界面带来了更加丰富的信息,比如角色和状态。图 1 显示了 Assistive Tool 与 Web 用户界面之间的关系。

AT 和 Web 页面之间的关系(使用 WAI-ARIA)

图 1. AT 和 Web 页面之间的关系(使用 WAI-ARIA)

      WAI-ARIA 主要包括两种内容:WAI-ARIA Roles 以及 WAI-ARIA States 和 Properties。表 1 显示了 WAI-ARIA 内容的主要分类。

表 1. WAI-ARIA 的主要内容

角色(Roles)状态和属性(States and Properties)
基本类型(Base Types)小部件属性(Widget Attributes)
用户输入小部件(User Input Widgets)实时区域属性(Live Region Attributes)
用户界面元素(User Interface Elements)拖放属性(Drag-and-Drop Attributes)
专用区域(Specialized Regions)关系属性(Relationship Attributes)
路标角色(Landmark Roles) 

      目前,许多 Web 2.0 特性都无法提供给残疾人使用,特别是那些依赖屏幕阅读器和无法使用鼠标设备的人。WAI-ARIA 定义了一些 Assistive Tools 的功能,我们将在后续小节中讨论这方面的信息。另外,一些浏览器和 Assistive Tools 已经提供了对 WAI-ARIA 的支持,比如 FireFox 3.0 和 JAWS 10.x。

  使用 WAI-ARIA 解决动态 Web 内容中的常见可访问性问题

      现在,我们将介绍 WCAG 2.0 确定的四种常见问题,并讨论一些解决方案。

      文档结构在当前的 HTML 版本中,无法采用编程的方式来识别页面元素的功能和作用。因此,要让屏幕阅读器将当前页面位置告诉用户是几乎不可能的。此外,屏幕阅读器也不能识别页面元素的作用。举例来说,<div> 可以是弹出窗口、文本输入框或者其他对象。WCAG 2.0 表示,Web 应用程序应该提供一种快捷方式(通常是一些链接)来允许用户直接定位页面上的主要内容。这些链接将被识别为“跳转到主要内容”的链接。这将帮助用户快速识别页面的主要内容,而这是远远不够的。

      在 IAccessible 和 IAccessble2 这样的 GUI 可访问性 API 中,常见的解决方案是为 GUI 对象提供一个“角色”属性,用于指定其作用。W3C ARIA 标准也定义了此“角色”属性。接下来,我们来领略一下角色属性的魔力,以及如何使用它为 Web 应用程序提供清晰的结构。WAI-ARIA 将所有 HTML 元素划分为以下几种角色:

  • 基本类型(Base Types)—此角色用于描述角色层次结构的最高层次。基本类型角色都是抽象的,并且不应在内容中使用。这些基本角色包括复合(composit)、路标、角色类型、结构、小部件和窗口。
  • 用户输入小部件(User Input Widgets)—这些角色适用于表单元素或其他常用用户输入小部件。因此,属于这种角色的元素将用于收集和维护用户输入。这些角色包括复选框、组合框和单选按钮等。
  • 用户界面元素(User Interface Elements)—这些角色适用于图形用户界面。这些元素对于向用户显示小部件类型非常有用。这些角色包括按钮、链接和树等。
  • 文档结构(Document Structure)—这些角色描述页面内容的组织结构。文档结构通常不具有交互性。这些角色包括文章、文档和标题等。
  • 专用区域(Specialized Regions)—这些角色描述应用程序用户界面的特殊独立区域。这些角色包括警告、对话框、进度条等。
  • 路标角色(Landmark Roles)—这些角色与文档结构极为类似,但其作用是充当导航路标,并且通常描述 Web 页面上的某个区域。这些角色包括应用程序、横幅、补充说明、内容信息、主内容、导航和搜索。

     现在,我们将通过一个示例来演示如何使用路标角色来确定 Web 页面中的区域。图 2 显示了一个典型的网站(http://www.aol.com)。

图2: 一个典型网站

这个网站包括若干部分:搜索、导航和主内容等。在本例中,您可以通过编写如清单 1 所示的代码来使用路标角色。

清单1:向页面元素添加路标标识符
<html>
<body>

<div role="search">
The search area
</div>

<div role="navigation">
The navigation area
</div>

<div role="main">
The main content area
</div>

</body>
</html>

it知识库Web 2.0 技术中的可访问性,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。