Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
无障碍的Web应用[ARIA]介绍专题

无障碍的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

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


网页可以用性测试与验证


对蜘蛛也要友好

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

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


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

  • jquery ui
  • google closure
  • dojo
  • YUI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment