1. 程式人生 > >bootstrap 中關於 HTML5 aria-* and role的用法

bootstrap 中關於 HTML5 aria-* and role的用法

key you 方便 clas win manage 意思 ces 主題

HTML5 aria-* and role

在bootstrap中看到role和aria-*,不知道幹嘛的。google一下,發現aria的意思是Accessible Rich Internet Application。 Accessible一般是為不方便的人士提供的功能,比如windows的放大鏡,語音朗讀,高對比度主題等。

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.

bootstrap 中關於 HTML5 aria-* and role的用法