分类目录归档:web无障碍

增强网站可访问性的25种方法

随着web使用量的增加和人们网络意识的增强,可访问性(或“通用设计”)变得更加重要。可访问性不仅取决于一个网站的代码,还受网站设计和内容的影响,这就是为什么可访问性、标准和可用性关系如此紧密。

网页无障碍是一个庞大的课题,已自成一个领域。 但不要被它吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。这是一种高明的(smart)设计和开发方式。

让我们来看看建立一个无障碍网站的25个重要技术。

1.一致的布局和结构

为了帮助用户快速和轻松地浏览您的网站,你应该提供一个一致的布局和结构。页面的主要元素——banner、navigation、sidebar侧栏,在整个网站中应该出现在的相同位置 。他们也应该标记一致,如使用同一标题结构(heading structure)。这有利于认知障碍者和使用屏幕阅读器(用来处理屏幕上的内容,并大声读出)的用户访问。 继续阅读增强网站可访问性的25种方法

WebAIM第三次屏幕阅读器用户调查报告

查看报告完整中文版 或 下载 PDF版本

2010年12月,WebAIM进行了第三次屏幕阅读器用户的偏好调查。2009年1月2009年10月,WebAIM先后进行了两次屏幕阅读器用户调查,这是前两次调查的跟进调查。本次调查共收到1245份有效调查结果(其中英语1049份,西班牙语101份,法语91份和葡萄牙语4份)。

虽然国内与国外的互联网环境、辅助技术、无障碍政策法规、视障群体的信息素养有差异,但该报告结果对我们了解视障群体的使用习惯和信息需求有一定帮助,为国内的信息无障碍优化提供事实依据,故笔者将此报告做了全文翻译,现将一些结论摘录于此:

在之前的屏幕阅读器用户调查中发现的结论仍然存在—— 没有典型的屏幕阅读器用户。这些结果突出显式了两年内的重大变化和趋势,我们希望这些结果能够推动网页无障碍有根据的实践。

值得注意的几个点:

  • JAWS仍然是主屏幕浏览器,但其使用量因为NVDA和VoiceOver使用量的显著增加而下降。
  • 实行免费或低收费的屏幕阅读器的看法正在改善。
  • 98.4%的受访者启用JavaScript。
  • 对网页可访问性的前景是乐观的。
  • 三分之二的受访者在移动设备上使用屏幕阅读器,两年前只用12%的人使用。
  • 大部分受访者认为longdesc有用。

 

确保DOM顺序与视觉顺序一致

C27: Making the DOM order match the visual order

适用性

CSS与HTML和XHTML使用

该技术涉及:

描述

该技术的目的是确保内容在源代码中的顺序与内容的视觉呈现顺序一致。作者通过改变css可以将同一源代码的内容呈现为多种视觉顺序。每种顺序本身可能有意义,但可能会导致辅助技术用户困惑。这可能是由于用户关闭了作者指定的展现形式,而是直接通过源代码访问内容(如屏幕阅读器),或者使用键盘与内容交互。如果一个使用屏幕阅读器跟踪源代码来阅读网页的盲人用户与通过视觉顺序阅读网页的明眼用户一起工作,当他们以不同的顺序获取信息时,他们可能会遇到困惑。使用屏幕放大镜和屏幕阅读器组合的低视力用户可能会感到困惑,当阅读顺序在屏幕上来回跳转时。当源代码顺序与视觉顺序不匹配时,键盘用户可能会在预测下一个焦点位置时遇到麻烦。

也有这种情况,视觉呈现顺序对页面的整体理解很重要,如果源代码顺序与展现的不同,它可能会更加难以理解。

当源代码顺序与视觉顺序匹配时,每个人会以同一(正确)的顺序阅读内容并与之交互。

注:tabindex属性有两个功能:其一是使元素可获取焦点,另一个是为元素分配在焦点序列中的位置。tabindex等于0可使元素聚焦,但是是以源元素的顺序添加到焦点序列中的。焦点的顺序依照tabindex正值的顺序。设置tabindex值导致元素的顺序与元素在DOM对象模型(DOM)中的顺序不一致,这意味着该顺序对辅助技术用户来说是不正确的。这主要是因为tabindex属性是在HTML或XHTML中定义的,而不是CSS指定。这可能会在未来的规范中改变,它也可能与视觉呈现顺序不一致。

from: Techniques for WCAG 2.0

键盘可访问性

一些思考

键盘辅助功能是残疾访问的一个重要方面。盲人通常不能使用鼠标,因为他们看不到点击的地方。他们几乎完全依靠键盘。(一些有有限残余视力的法定盲,在页面被放大和高对比度下可以使用鼠标。)(注:法定盲(legal blind)法律上对视觉障碍的界定。目的是为教育、福利或其他方面的工作提供统计标准和确定的依据。在美国为优眼最佳矫正视力在20/200以下,或中心视野直径在20°以下者。在中国则为优眼最佳矫正视力在0.5以下或视野半径小于10°者。大部分仍有一些残余视力,完全看不见的只占少部分。)

一些有神经肌肉障碍的用户也不能使用鼠标。震颤麻痹的用户不能很好的控制肌肉,还有一些很少或者从没使用过他们的双手,由于脊髓损伤、脑损伤或者其他一些原因。有些人根本就没有手,无论是由于出生缺陷、事故或截肢。总之,有很多种情况导致使用鼠标困难或者根本无法使用鼠标。

无法使用鼠标的人可能也不能使用键盘。一些人使用”puff and sip”(吹吸)设备,这种设备通过口腔气流来控制鼠标。(译者注:puff and sip设备是一种为有行动障碍的人提供辅助的计算机技术,是一种替代鼠标的头戴式设备,用户可以在不使用手的情况的下通过向管子内吹气来控制鼠标的指针移动。)

继续阅读键盘可访问性

实用技巧:Firefox下显示网页中的accesskey键盘快捷键

原文:http://www.ampercent.com/how-to-display-keyboard-shortcuts-on-a-web-page-in-firefox/6253/

翻译:Jace (有修改)

在打开的程序、对话框之间或者内部切换、访问菜单项,以及执行简单的任务(如复制、粘贴)时,使用键盘快捷键或热键可以节省你很多时间。

键盘快捷方式在浏览网页时同样也能派上用场。很多网页能够较好的展示出设置的快捷方式,同时也有很多网页的快捷键不被用户察觉。如果您使用的是Firefox,只需对与此类网页链接的CSS做小的修改即刻呈现出设置了的键盘快捷键。 继续阅读实用技巧:Firefox下显示网页中的accesskey键盘快捷键

制作无障碍的星型评级控件

原文:Developing an Accessible Star Ratings Widget

作者:Thierry Koblentz

先睹为快,跳到演示页

许多电子商务网站、社交网络服务以及网上社区都包括评级或评估的功能。征集用户的意见已经成为一种商业模式,现在有许多网站致力于评价产品、服务、企业或其他。

最常见的显示投票的界面是“星级系统”,每个评论者给评审项目赋予一定数量的分值(通常以星表示)。很多网站都使用了这种模式,无论Amazon还是Yelp。

Examples of star rating systems

图A     Amazon 和 Yelp 的星型评级

正如图A所示,两者的视觉界面类似,但使得这两种方案变得有趣的是它们使用的基本标记。一个使用的是<map> ,另一个是<img> 。

你也许会认为大多数评级系统所使用的标记是具有语义的,并在多种用户代理下都可以操作 – 也就是说,这种评级系统应当基于一组特定的HTML元素和属性集来构造,使用JS和CSS来控制行为和样式。如果是这样的话就好了,但事实远非如此。作者使用的标签可谓是千奇百怪: 继续阅读制作无障碍的星型评级控件

读屏软件NVDA测试:图片alt、title属性

1.只有alt值,NVDA朗读”图片,我就乐意这样寂寞了”。浏览器在IE8模式下运行时,alt 属性不再显示为图像工具提示。

我就乐意这样寂寞了

2.只有title值,NVDA朗读”图片,摇滚音乐话剧”。title属性显示为图像工具提示。

3.同时有alt、title,NVDA朗读”图片,我就乐意这样寂寞了”,即alt值。title属性显示为图像工具提示。

我就乐意这样寂寞了

WAI-ARIA实时区域( Live Regions)

———————————————————————-

注:这篇文章的内容已过时,请查看《WAI-ARIA Live Regions[更新]

———————————————————————-

原文:WAI-ARIA Live Regions

作者:Gez Lemon

摘要

使用WAI-ARIA的实时区域(live regions)将能够解决大多与ajax相关的无障碍问题。实时区域(live regions)能够将更新内容通知给辅助技术,如屏幕阅读器,而且不会失去他们在内容中的位置。

目录

  • 无障碍富互联网应用
  • Live Regions属性
    • atomic属性
    • controls属性
    • describedby属性
    • labelledby属性
    • live属性
    • relevant属性
  • 一致性
  • 未来

无障碍富互联网应用

今天的许多Web应用都将残疾人士排除在外,因为目前的技术在传达重要信息方面能力不足。富互联网应用(RIA)通常使用多种技术, HTML,CSS和javascript,但往往不能提供足够的语义,因此,web应用对残疾人士难以使用,或者完全不能访问。 继续阅读WAI-ARIA实时区域( Live Regions)