无障碍的Web应用[ARIA]介绍专题

gistfile1.md

无障碍的Web应用[ARIA]介绍专题

几个场景

• 一坨没有格式化的代码
• 一个无样式的页面
• 一个不支持鼠标操作的页面/表单
• 一部不带字幕的电影
• 一个由js/as生成的web页面[对蜘蛛而言]
• 一条通向“死路”的盲道

用户体验方面的问题影响着正常人 无障碍则影响着残障人士 在障碍面前我们是平等的，我们都需要帮助

导语： 不管是正常人还是残障人士都面临可用性的问题。

---

几个数字

• 大约世界上10%的人口。
• 全球IE6的市场占用率不到1%，中国占用率5%~10%
• 中国有6.4亿网民[2014.7]

导语： 网页用户是多样性的，残障人士人数众多，网页无障碍是很有必要的

---

Accessible Rich Internet Applications (ARIA)

• ARIA 是W3C的一个独立的规范，弥补了html4的不足，帮助Web应用程序和Web页面变得 更具可访问性。
• ARIA 与HTML5语义化有交叉重叠的地方。
• ARIA 主要是为了提升网页的可用性，网页对残障人士的无障碍化。

盲人使用的屏幕阅读器类似一个纯文字浏览器（无样式，例如Lynx浏览器）

---

ARIA on HTML

• 作用： ARIA属性可以被NVDA等读屏软件调用系统API识别， 转化成语音。(在MDN网站上体验下nvda读屏功能)

• 使用： 尽可能正确地使用html标签，原生标签对aria支持得更好。 在实再自定义控件的时候，添加aira相关属性可以例控件能正确被读屏软件识别。 html5语义化标签与aria有重叠的地方，用新的语义化标签但还是推荐添加aria属性

• 属性简介： 包括三个方面：roles, states, and properties 浏览器支持情况：IE8以上及其它现代浏览器，参见caniuse 参考网站： W3C mdn

---

• roles示例：

   <!-- Now *these* are Tabs! -->
   <!-- We've added role attributes to describe the tab list and each tab. -->
   <ol role="tablist">
     <li id="ch1Tab" role="tab">
       <a href="#ch1Panel">Chapter 1</a>
     </li>
     <li id="ch2Tab" role="tab">
       <a href="#ch2Panel">Chapter 2</a>
     </li>
     <li id="quizTab" role="tab">
       <a href="#quizPanel">Quiz</a>
     </li>
   </ol>
  
   <div>
     <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
     <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
     <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
     <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
   </div>

---

• status示例：

   <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
     <li id="sans-serif"
         class="menu-item"
         role="menuitemradio"
         tabindex="-1"
         aria-controls="st1"
         aria-checked="true">Sans-serif</li>
     <li id="serif"
         class="menu-item"
         role="menuitemradio"
         tabindex="-1"
         aria-controls="st1"
         aria-checked="false">Serif</li>
     ...

• properties主表象。

---

鼠标导航

鼠标导航很常见，也很实用。

• 操作系统上的ctrl+v ctr-v等。window快捷键大全
• 网页上有常见的tab切换焦点。html的可以利用tabindex属性设置tab的顺序。 小窍门：设置tabindex="-1"可以使div等默认没有焦点能力的元素获得焦点
• autofoucs 设置自动焦点，accesskey设置快捷键
• 码农高大上的vi。 装X速成指南
• chrome浏览器上的 Vimium ^荐

障碍页面人人平等，无障碍方便的不只是残疾人

---

网页可以用性测试与验证

• http://oaa-accessibility.org/testsuites/
• https://html5.validator.nu/
• IE调试工具>验证

---

对蜘蛛也要友好

• 语义化标签
• microdata格式
• 优化js生成内容的url

参考手册：http://oaa-accessibility.org/

---

节目的最后，让我们来看一组支持aria的js框架

• jquery ui
• google closure
• dojo
• YUI