阅读 41

关于无障碍可访问性你需要了解

一、什么是无障碍

1、名词解释

  • 网络无障碍俗称可访问性,英文accessibility,简称[a11y]。
  • Accessible Rich Internet Applications (ARIA) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用的一套机制。
  • W3C Web Accessibility Initiative (WAI) 互联网针对无障碍推出指导纲领。

image.png

2、全球 76 亿人中,互联网人口突破44.3亿。联合国残疾人调查世界上10%的人口即七亿六千万是残疾人。他们是世界上最大的少数群体。网络的伟大性在于,突破地域限制,人人可以通过畅游网络带来的生活便利,每一个人都应平等享受科技的便利。

  • 互联网将近4亿五千万残疾用户。2018年facebook的65岁及以上的老人用户增长了20%。
  • 根据中国互联网状况统计,网民规模达到8.29亿,中国65岁以上老人1.3亿,视障者1300万,听障者2000万,读写障碍人士7000万。

get_ada_compliant_disability_population_600.png

3、使网站有可访问性是强制做法,同时它也是一些国家法律的一部分,它将打开一些重要的市场,否则就无法使用你的服务,购买你的产品等等。
image.png

  • 根据国际律师事务所统计,ADA Title III(Title III是禁止基于残疾歧视的部分)诉讼的数量从2015年的4,789起增加到2018年的10,163起
  • 美国“康复法”第508条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。2011年《中国残疾人事业“十二五”规划纲要》指出了建设无障碍环境的主要任务之一,就是加强信息无障碍建设,并明确了相关的政策措施。

二、如何支持无障碍

1、评测标准

WAI【网页易读性倡议】组织在相关无障碍标准的设计,使用 A、AA、 AAA 来作为移动端无障碍优化的成功标准级别。
A 级是对广泛的用户群体有重要影响,不 是针对某一特定残疾群体,AA 级可能针对某一类型残疾群体,AAA 级通常专注于某一类 群体无障碍的改进,收益-成本率较低。

2、具备能力

  • 对键盘友好的支持
  • 所有内容可被理解,如语义HTML支持。
  • 增加尽可能多的文本信息,如图片增加文案说明。
  • 提供高对比清晰的颜色
  • 屏幕阅读器的支持

5468551-05340632fbc2fd1a.webp

三、无障碍如何修复

1、结构语义化

关闭样式测试能否理解内容层次化结构。
错误案例

<div>Play video</div>
复制代码

推荐案例

<button>Play video</button>
复制代码

<button>标签不仅提供了按钮的样式,还提供了键盘的可访问性,如:使用tab键更换按钮,使用回车键点击按钮。
在HTML里面使用语义化,其它好处:

  • 更便于开发,方便用户理解
  • 更适更多设备
  • 更便于SEO优化

2、键盘友好支持

合理使用tabIndex,默认的HTML 元素是具有自带的键盘辅助功能的,当其他元素与JavaScript一起进行交互时,键盘的辅助功能和屏幕阅读器的报告会因此收到影响,可以通过设置tabIndex数字来重新设置tab顺序,你也可以通过负值屏蔽tabIndex。Tab顺利规则,按照从上到下,从左到右。

3、友好的表单支持

表单标签很重要,可以让用户了解您需要输入每个表单输入的内容。

填写您的姓名: <input type="text" id="name" name="name">
复制代码

在上面的示例中,没有任何内容将标签与表单输入明确关联。
建议修正

<div>
  <label for="name">填写您的姓名:</label>
  <input type="text" id="name" name="name">
</div>
复制代码

3、文字说明

如果用户有视觉和听觉障碍,尽可能多的描述,可以增加可访问性体验,最简单的实现,增加 alt 属性,比如链接,图片,video,表单,table等常用属性,都需要补充说明。

<img src="图片.png"
     alt="这是个图片说明">
复制代码

如果您想将相同的文本用作多个图像的标签,可以通过:

<img src="图片1.png" aria-labelledby="image-label">
<img src="图片2.png" aria-labelledby="image-label">
<p id="image-label">这是个图片说明</p>
复制代码

4、高对比度支持

对于视觉障碍的用户,相近的颜色会对用户造成视觉干扰,无法正确识别文本内容,可以通过操纵系统配置高对比度模式,对页面进行测试。

  • 对于视力不太好的人或者对于不太好的显示设备来说,黑底白字或者白底黑字是最佳的。
  • 某些搭配 - 比如黑色和红色,黑色和蓝色,黄色和绿色 - 都会使人产生视觉疲劳甚至癫痫发作。
  • 对于视力比较弱的读者,比较近的字母行间距会带有不小的阅读困难。
  • 避免花哨的字体

高对比在线颜色测试:webaim.org/resources/c…

5、WAI-AIRA

WAI-ARIA 是W3C编写的规范,定义了一组可用于其他元素的HTML 特性,用于提供额外的语义化以及改善缺乏的可访问性。

  • 角色 — 这定义了元素是干什么的。例如 role="navigation"
  • 属性 — 我们能通过定义一些属性给元素。例如: aria-required="true"
  • 状态 — 用于表达元素当前的条件的特殊属性。例如 aria-disabled="true"

更多文档:developer.mozilla.org/zh-CN/docs/…

四、无障碍工具

1、在线测试站点

wave.webaim.org/

2、Chrome 无障碍检测

image.png

Screen-Shot-2018-05-24-at-3.25.02-PM.png

3、屏幕阅读器

ChromeVox、NVDA、JAWS 或VoiceOve
打开浏览器,开启屏幕阅读,Mac 通过 Command + F5 开启语言屏幕阅读,测试页面可读性。

image.png

更多内容 www.ibm.com/developerwo…

六、其他

中国信息无障碍联盟 www.capa.ac/
W3C无障碍指导纲领 www.w3.org/WAI/

关注下面的标签,发现更多相似文章
评论