お問い合わせ

TPAC 2014 レポート2 WAI-ARIAを扱いやすく

アクセシビリティ・エンジニア 黒澤

引き続き、米国サンタクララで開催中のTPAC 2014に参加しています。

この記事では、TPACの1日目と2日目に行われたミーティングの中から、WAI-ARIAをCSSやDOMからより扱いやすくする提案を紹介します。WAI-ARIAは現在、値の設定と取得が要素の属性（roleやaria-*）からしか行えませんが、TPACの1日目と2日目のミーティングではCSSやDOMからより簡単にWAI-ARIAを扱えるようにする提案が複数なされました。

WAI-ARIAのreflected attributes

Web Applications Working GroupとIndie UI Working Groupの合同ミーティングではWeb Accessibility Properties and Actions (WAPA)が提案されました。

WAPAに関する議論ではいくつかの話がでましたが、そのうちの1つがWAI-ARIAのrole属性やaria-*属性をreflected attributesにするというものです。reflected attributesでは要素に指定された属性値とDOMオブジェクトのプロパティ値が互いに反映されます。例えば、HTMLのbutton要素の有効・無効はdisabled属性でも設定できますし、disabledプロパティでも設定できます。

button.setAttribute("disabled", "");
button.disabled = true;
button.hasAttribute("disabled");
let disabled = button.disabled ; // true or false

しかし、同じことをWAI-ARIAのtabロールで行おうとすると、現在はaria-disabled属性を読み書きするしかありません。

tab.setAttribute("aria-disabled", "true");
tab.getAttribute("aria-disabled"); // "true" or "false"

WAI-ARIAの属性がreflected attributesになれば、次のように記述できるようになるかもしれません。

tab.ariaDisabled = true;
let disabled = tab.ariaDisabled; // true or false

:roleセレクター

CSS Working Groupのミーティングでは、WAI-ARIAのロールに基づいて要素を選択する疑似クラスが提案されました。提案によると、buttonロールをもっている要素を選択するセレクターは次のように記述できます。

:role(button)

このセレクターはrole="button"が指定されている要素にも、暗黙のARIAセマンティックがbuttonである要素、HTMLではbutton要素やinput要素（type属性がbuttonやsubmitなど）、にもマッチします。

この提案は受け入れられ、CSS Selectorsの仕様に追加することになりました。

getComputedRole、getComputedLabel

WAI-ARIAでは要素のロールをrole属性で指定しますが、この属性は複数の値を空白で区切って指定することができます。role属性に複数の値が指定されていた場合、ブラウザーは最初に出現した対応しているロールを利用します。例えば、WAI-ARIA 1.1ではswitchやtableといったロールの追加が検討されています。これらのロールはWAI-ARIA 1.0では定義されていないため、WAI-ARIA 1.1に対応していない環境向けには、WAI-ARIA 1.0の類似したロールをフォールバックとして指定できます。これは次のように記述できます。

role="switch checkbox"
role="table grid"

switchやtableに対応しているブラウザーであればswitchロールやtableロールを利用し、対応していないブラウザーではcheckboxやgridを利用します。つまりrole属性だけを見ても、ブラウザーがどのロールを認識しているのかはわかりません。同様に要素の名前（ラベル）も、ブラウザーがどのように認識しているかをコンテンツから取得することは困難です。

そこで、ブラウザーが認識しているロールを取得するためのDOM APIを追加しよう、という提案がWeb Applications Working Groupでなされました。提案されているAPIは次の通りです（WebIDL）。

partial interface Element {
    String computedRole();
    String computedLabel();
}

ミーティングでは、Protocols and Formats Working Groupが標準化しているWAI-ARIAの仕様そのものに追加しては、という話になりました。

まとめ

いずれの提案も現時点では仕様化されていませんし、最終的な仕様では現在の提案とは異なる形になっているかもしれません。ですが、WAI-ARIAをDOMやCSSからより扱いやすくなることは間違いないだろうと感じました。今後の標準化に期待したいと思います。

2014年の記事一覧に戻る