Accessibility,只需我们改变一点点儿

Accessibility这个词频率这么高,但是一直没有深究过。通过”D2前端技术论坛“这个平台,几个专题下来,我意识到它的重要性,我们在感受互联网带来幸福的同时,却把残障人士也应该得到幸福给无形的隔开了。

中国是全世界盲人最多的国家约500万盲人,占全世界盲人口的18%.每年在中国约有45万人失明,如果允许目前的趋势继续保持不变,到2020年预期中国盲人将增加4倍,如果让500万人口的盲人兄弟组成一个国家的话,他们在200多个国家中排名是110多位左右。

网页可访问性设计,只需我们改变一点点儿,盲人兄弟们也可以向我们一样畅游网络世界。

Accessibility是什么?

关于Accessibility,按照英语的构词法,”可访问性”没有任何问题。且”性”有”能力”的意思,因此”可访问性”即可被理解为”网页可被访问的能力”。而”无障碍性”则没有了”访问”的意思,如果要使用的话,也应该是”无访问障碍性”。综上,”可访问性”虽称不上完美,但仍差强人意。

可访问性(Accessibility)是互联网产品用户体验的指标之一,即网站的服务与内容能被用户访问到。

主演能够解决的问题:

  1. 应付极端环境下的正常浏览需求;
  2. 结构、表现、行为跨终端跨平台兼容支撑;
  3. 保障残障人士无障碍信息获取;
  4. 强化搜索引擎友好。

可访问性专题:页面的可访问性设计

ARIA (Accessible Rich Internet Applications)基础

WAI-ARIA( Web Accessibility Initiative – Accessible Rich Internet Application)是W3C 的无障碍网页倡议(WAI)工作小组一直在倡导大家使用的无障碍网页应用技术。它是一套独立的规范,它弥补了HTML中的不足,帮助Web应用程序和Web页面变得更具可访问性。主要是用来解决应用了大量Ajax, HTML, Javascript和SVG等丰富前端技术的网页更具备可访问性的问题。所以说ARIA是web app 与AT(可访问性工具) 的桥梁。例如,我们经常见到的Dialog 、弹出层,模拟select 的下拉菜单等Web widget 小组件等都没有提供所需的语义作支持,辅助性技术很难做出分析和解读,当然残障人士也无法获取有效的信息流,可见它的重要性。

屏幕读取器、语音识别软件和屏幕键盘均通过特定的语义标识(title、button~)读取网页组件本质信息,而WAI-ARIA 角色标准在语义化标识约定方面起至关重要的作用。

ARIA的目标是,通过引入浏览器和辅助性技术能够识别的一系列的新属性,来弥补这种情况。

ARIA对于开发者来说并不是万能药和救命稻草,我们应该正确的使用语义性的标签,来建立良好的文档结构,只有这样,我们再使用ARIA辅助语义,才能使我们的网页更具有可访问性。

ARIA规范说:“我们期望,随着时间的流逝,主语言将会通过改进,能够为之前只能使用WAI-ARIA声明的那些对象提供语义。当给定功能的本地语义变得可用时,开发者应该开始使用本地功能,并且停止使用WAI-ARIA来实现该功能”。

WAI-ARIA技术主要包括三个方面:

一. Role (描述区域作用或组件类型。侧重语义信息。)

WAI-ARIA定义了几种角色,告诉辅助性技术一个文档的重要部分和结构。常见的一些如下:

  • role=”application” (Web App一些小控件)
  • role=”article”
  • role=”banner” (company logo和 site slogan)
  • role=”complementary” (相当于主题内容的补充说明区域,包括,联系信息,Extra区域,博客的相关文章,博客和新闻的侧边栏)
  • role=”contentinfo” (版权信息区域,包括版权声明,链接隐私声明)
  • role=”document” (整个页面)
  • role=”form”
  • role=”heading” (标题区域)
  • role=”main” (内容主体区域)
  • role=”navigation” (导航条或菜单区域,通常情况下,就是您的网站的各种功能的链接。)
  • role=”search” (搜索区域),搜索框
  • role=”region” (通用模块区域)

HTML5结构元素,对应的WAI-ARIA role

HTML5 Element WAI-ARIA Role
<article> article
<aside> note, complementary, search
<footer> contentinfo
<header> banner
(see note)
<nav> navigation
<section> region, contentinfo, main, search

二. State/property (描述状态与属性)

Web App 中 ARIA States and Properties的应用场景:

ARIA States and Properties
State Examples
activedescendant
atomic
busy  

checked
controls  

datatype  

describedby All Examples
disabled
expanded
flowto  

hasparent  

haspopup  

invalid
labelledby All Examples
multiselectable  

pressed
readonly  

selected
required  

valuenow
valuemax
valuemin
tabindex All examples
politeness
relevant

参考资料:http://test.cita.illinois.edu/aria/(ARIA(role ,states and properties)各种web app的完整测试例子)

三. keydown + tabIndex (键盘操作的快捷方式)

开发和测试可访问的 Web 应用主要有以下几个步骤:

  1. Webking 进行静态检查,通常由开发人员在单元测试时进行,检查 HTML 页面中不满足 CI162 所对应列表的项。目前由于 WebKing 不支持 ARIA,很多 ARIA 的标签不能被正确的识别,所以 WebKing 检查出的错误需要一一去检查区别是真正的违反 Checklist 还是由于 WebKing 不能识别 ARIA 的标签引起的。
  2. 键盘支持,要求所有能通过鼠标完成的操作用键盘都能达到同样的效果。
  3. 高对比度的支持:在高对比度模式下,屏幕只有黑白两色,要保证 Web 应用在这种模式下不丢失信息。
  4. 读屏软件的支持,通常由测试人员完成。测试人员模拟盲人使用读屏软件,要保证页面上的内容基本都能为读屏软件所识别,并且能完成各种操作。

最佳实战:

一. 正确使用语义化标签,以获得完美文档结构。

1. 表单元素要使用lable关联提示文本。
2. img 标签
  • img标签在任何时候都必须拥有alt属性,这对读屏软件、搜索引擎、图片地址失效等都有好处的。
  • 嵌入图像中的文字必须包含在alt文本中。
  • 装饰性图片应该由CSS处理。
  • 链接中增强文本的图像,alt可以设置为空(一个alt属性值为空的图像和与图像配套的文本)。或者是用于装饰性的图片,则需设置 alt 为空,使得读屏软件可以忽略此元素。
  • 当链接内只有图像元素时,那么alt文本应描述链接的功能,而不是图像。
3. a标签
  • 一个链接在脱离语境时仍然有意义。
  • 链接文本在它出现的页面上应该是唯一的(即不同资源不要使用相同的链接文本)。
  • a标签一定要有href属性。
4. 像span等没有tab焦点的元素如果绑定onclick,要增加tabindex属性的控制。

二. Tab键

Tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道,使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。Tabindex 可以设置为 -1, 0 或者是任何自然数。

  1. Tabindex = 0 就使原本无法获取焦点的元素(例如span,em,strong,code等等)可以在用户 tab 的时候获取焦点,并且按照文档顺序排列。即,恢复到自然顺序。
  2. Tabindex = -1 使得元素可以获取焦点,但当用户用 tab 键访问的时候并不出现在 tab 的列表里面。可以方便的通过 JavaScript 设置上下左右键的响应事件。非常有利于应用小部件(widget)内部的键盘访问。
  3. Tabindex 设置小于 0 的值,将使得被设置的节点不再能够获得焦点。
  4. Tabindex 设置为大于 0 的数字则可以控制用户 Tab 时候的顺序,但是会打乱文档流中的正常顺序,一般很少用。

当用户使用 Tab 键浏览页面时,元素获取焦点的顺序是按照 HTML 代码里面元素出现的顺序排列的,有时跟实际看到的页面顺序并不一致。如浮动布局。

杜绝非法中断Tab。盲人站长深恶痛绝的onfocus=”this.blur()”

三. Title

自从w3c标准普及以后,出现了许多极端应用的例子,第一a标签内title不是必须使用的,第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签上。

  • 描述非文本内容(例如:icon图示的辅助说明)
  • 补充说明文本内容(例如:导航系统的各条中,使用title主要作用是做补充说明)
  • 操作指引 (例如:表单元素上使用title,可以为用户提供更精准、得体的操作指引,一定程度上可以代替文字说明。)

参考资料:使用Title提升可访问性

四. 替换文本(设置图片的Alt属性,Object对象的文本替换)

所有非文本内容呈现给用户时必须提供一个可供选择的替代文本去表达这些内容。

所设置的替代文本必须具有语义,能够使用户清楚它所要传达的意义。

每张图片都需要有替代文本:

  1. 纯粹修饰性质的图片设置其为空
  2. 与语义文本相邻的图片设置其为空
  3. 组合图片只需为第一副图片设置替代文本,其他图片设置为空

五. 减少新开窗口提升可访问性

1. 应该强制target=_blank :
  • 文件下载链接
  • 文件打印链接
  • 非主线任务并打断进程的链接(需要前后对比的帮助,注册表单的隐私条款都有必要target=_blank)
2. 可选择target=_blank
  • 跨域名链接
  • 跨应用平台链接
  • 布局改变链接
3. 不能强制target=_blank
  • 导航链接
  • 面包屑导航
  • tab条目链接
  • 返回操作链接
  • 翻页链接
  • 表单

参考资料:减少新开窗口提升可访问性

六. 高度对比模式下注意事项:

CSS background 不可用。即,所有在CSS中设定的带有background属性都不可用。

白色的图片在白色系高对比度模式下无法看到,黑色的图片在黑色系高对比度模式下无法看到。

兼容高对比度模式的两种方式:

  1. 添加无background支持时将替代文本显示的CSS样式
  2. 将部分background替换为image,将css sprite替换为image sprite

参考资料: Foreground <img> Sprites – High Contrast Mode Optimization

辅助工具

相关资料

站点统计