当前位置: 代码迷 >> HTML/CSS >> HTML5 aria- and role
  详细解决方案

HTML5 aria- and role

热度:1905   发布时间:2013-12-02 12:00:40.0
HTML5 aria-* and role

在video-js的demo中看到了很多aria-*,不知道干嘛的。google一下,发现aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等。

?

google到了一个youtube的视频,讲解的很清楚,有代码有示例。估计是Google Developer Day 2011的分享演讲。真是个有责任感人性化的公司啊!

http://www.youtube.com/watch?v=pwm73Pe5xb8

主要内容是说明并演示了HTML5针对html tag增加的属性:role 和 aria-*。

?

role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button。

ARIA Roles

? ? Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.

?

而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如,

<div role="checkbox" aria-checked="checked"></div>

辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。

Add ARIA for screen readers

? ? ARIA attributes provides semantic information to screen readers that is normally conveyed visually.

? ? Note that using ARIA does not automatically implement the standard widget behavior, you'll still need to add focus management and keyboard navigation yourself.