HTML５のAccesibility

スマートフォンアプリプログラマーの加藤です。

最近読んだ本にHTML5のAccesibilityについて書いてありましたので調べてみました。
(Accessibilityについて)

標準化を行っているのはW3Cです（http://www.w3.org/WAI/）。

2011/07でのブラウザサポートスコアは、

Google Chrome が155/370

Firefox が325/370

IE が280/370

Opera が110/370

Safari が180/370

です。

（HTML5 Accessibility サポートスコア計算方法は、

３７個のHTML５の新機能　x　１０ポイント　＝３７０ポイント

一部分のみ実装されている機能　=　－５ポイント

全く実装されていない機能　＝　－１０ポイント）

  HTML５アクセシビリティ新機能 (Windows Browsers)
     

HTML5新エレメント	Chrome 13	Firefox 6.0a2	IE 9	Opera 11.5	Safari/             Webkit r90881
article	非実装	一部サポート	非実装	非実装	非実装
aside	非実装	サポート済み	非実装	非実装	非実装
audio	非実装	一部サポート	一部サポート	一部サポート	非実装
canvas	非実装	非実装	一部サポート	非実装	非実装
datalist	一部サポート	一部サポート	非実装	一部サポート	非実装
details	非実装	非実装	非実装	非実装	非実装
figcaption	非実装	一部サポート	非実装	非実装	非実装
figure	一部サポート	非実装	非実装	非実装	非実装
footer	非実装	サポート済み	非実装	非実装	非実装
header	非実装	一部サポート	非実装	非実装	非実装
hgroup	非実装	非実装	非実装	非実装	非実装
color input	非実装	非実装	非実装	一部サポート	非実装
Date input	一部サポート	非実装	非実装	非実装	一部サポート
Date and Time input	一部サポート	非実装	非実装	非実装	一部サポート
Local Date and Time input	一部サポート	非実装	非実装	非実装	一部サポート
E-mail input	非実装	非実装	非実装	非実装	非実装
Month input	一部サポート	非実装	非実装	非実装	一部サポート
Number input	一部サポート	非実装	非実装	一部サポート	一部サポート
Range input	一部サポート	非実装	非実装	一部サポート	一部サポート
Search input	サポート済み	サポート済み	サポート済み	非実装	サポート済み
Telephone input	非実装	非実装	非実装	非実装	非実装
Time input	一部サポート	非実装	非実装	一部サポート	非実装
URL input	非実装	非実装	非実装	非実装	非実装	?
Week input	一部サポート	非実装	非実装	一部サポート	一部サポート
menu > context menu	非実装	非実装	非実装	非実装	非実装
menu> list	非実装	非実装	非実装	非実装	非実装
menu > toolbar	非実装	非実装	非実装	非実装	非実装
meter	非実装	非実装	非実装	非実装	非実装
nav	非実装	サポート済み	非実装	非実装	非サポート
output	非実装	非実装	非実装	非サポート	非実装
progress	非サポート	サポート済み	非実装	非サポート	非サポート
section	非サポート	一部サポート	非サポート	非サポート	非サポート
summary	非サポート	非実装	非実装	非実装	非実装
video	非サポート	一部サポート	一部サポート	一部サポート	非サポート

 

  HTML5アクセシビリティ　新 （Windows Browsers）
   

HTML5 新アトリビュート (一部分のみ)	Chrome 13	Firefox 6.0a2	IE 9	Opera 11.5	Safari/             Webkit r90881
hidden	サポート済み	サポート済み	非実装	サポート済み	サポート済み
required	非サポート	サポート済み	非実装	非サポート	非実装
placeholder	非サポート	一部サポート	非実装	非サポート	一部サポート

例文：
<fieldset>


   <legend>Meeting alarms</legend> 


 <!-- Rule 2A: "Beep" label given by native HTML label element --> 

  
<input type="checkbox" id="beep">
 <label for="beep">Beep</label>
 <br>

 
<input type="checkbox" id="mtgTitle">
 <label for="mtgTitle">Display the meeting title</label>
 <br>



<!-- Rule 2B: Full label of checkbox includes value ("3") of embedded text input, "Flash the screen 3 times" --> 

   <input type="checkbox" id="flash">

  
<label for="flash">

     Flash the screen

    
<!-- Rule 2A: label of text input given by aria-label, "Number of times to flash screen" --> 

     <input type="text" value="3" size="2" id="numTimes" aria-label="Number of times to flash screen">

     times

  
</label>


</fieldset>


aria-label というのがWAI-ARIAのタグになります。