WAI-ARIA の基礎知識

WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。

WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリーンリーダーなど) に伝達することができます。

この記事では、この WAI-ARIA がどういう仕様なのかを、ごく大雑把にではありますが、見渡してみたいと思います。WAI-ARIA を使うと、こういうことが可能なんだということが何となく伝われば、と思います。

WAI-ARIA の仕様

WAI-ARIA は、HTML の各要素 (タグ) に属性を付記する、という形で実装します。HTML はそれ自体、もともとセマンティック (情報構造が「意味的」である) と言えますが、JavaScript などによるインタラクション (動き) を伴う場合、そのセマンティクス (情報の意味的な構造) が適切に維持しきれないことがあります。WAI-ARIA を付記することで、インタラクションに伴うセマンティクスの変化が、支援技術にも適切に伝わることが期待できます。

大きく分類すると、WAI-ARIA によって、各要素の「Roles (役割)」「States (状態)」「Properties (特性)」を支援技術に伝達することができます。

Roles (役割)

WAI-ARIA の「Roles」は、要素の「役割」を支援技術に伝達します。各要素の中に「role="xxx"」という属性を記述することで、「役割」を表わします。「Roles」には、Landmark Roles、Document Structure Roles、Widget Roles があります。

Landmark Roles

Landmark Roles は、Web ページ内のランドマークを表わします。たとえば、role="banner" と記述されている要素は、それがメインビジュアルのバナーである旨、支援技術に伝達されます。role="navigation" と記述されている要素は、それがナビゲーションである旨、支援技術に伝達されます。

Landmark Roles には、以下の種類があります。

Document Structure Roles

Document Structure Roles は、上述の Landmark Roles より小さな単位で、Web ページの文書構造を表わします。たとえば、role="heading" と記述されている要素は、それが見出しである旨、支援技術に伝達されます。また、role="presentation" と記述されている要素は、それが単に視覚的な表現であることを意味します (もともとの HTML 要素が持つセマンティクスは支援技術に伝達されません)。

Document Structure Roles には、以下の種類があります。

Widget Roles

Widget Roles は、各種ウィジェット類を表わします。たとえば、role="tab" と記述されている要素は、それがタブ (クリック/タップするとパネルを切り替えできる操作子) である旨、支援技術に伝達されます。また、role="tabpanel" と記述されている要素は、それが各タブに紐づいて表示されるパネル (具体的なコンテンツ表示エリア) である旨、支援技術に伝達されます。

Widget Roles には、以下の種類があります。

また、以下のように、複数の Widget Roles をひとまとめにするものもあります。たとえば、role="tablist" と記述されている要素は、一連のタブ群 (role="tab" が記述された要素) をまとめたものである旨、支援技術に伝達されます。

States (状態) および Properties (特性)

WAI-ARIA の「States」は、要素の「状態」を支援技術に伝達します。また、「Properties」は、要素の「特性」を支援技術に伝達します。いずれも、各要素の中に「aria-xxx="(属性値)"」という記述をすることで、「状態」や「特性」を表わします。

States

States には、以下の種類があります。属性値には「true」または「false」などが入ります。ユーザーの操作によって生じる状況変化を表わすものなので、JavaScript を介して、属性値はその時々で変動します。

たとえば、aria-hidden="true" と記述されている要素は、その時点では、この要素は非表示である旨、支援技術に伝達されます。aria-disabled="true" と記述されている要素は、その時点では編集不可能である旨、支援技術に伝達されます。

Properties

Properties には、以下の種類があります。属性値には、「true」または「false」、紐付け (関連付け) のための参照 ID、所定の識別子 (トークン)、具体的な数字や文字列、など、様々なものが入ります。

たとえば、aria-required="true" と記述されている要素は、それが入力必須項目である旨、支援技術に伝達されます。aria-labelledby="(参照 ID)" が記述されている要素は、そのラベルが当該 ID を持つ別の要素によって表記されている旨、支援技術に伝達されます。aria-label="(具体的なラベル表記)" が記述されている要素は、その属性値自体がラベルである旨、支援技術に伝達されます。

Managing Focus (フォーカスの制御)

WAI-ARIA には、「Managing Focus (フォーカスの制御)」という機能も含まれています。これは、tabindex 属性の適用範囲を拡張するものです。HTML5 より前の HTML 仕様では、tabindex を指定できない要素がありました。そういった要素に対しても tabindex を記述することで、[Tab] キーによるフォーカスを受け取れるようにすることができます。

もっとも HTML5 であれば、デフォルトですべての要素に tabindex を指定できる仕様になっているので、tabindex を付与するだけの目的で WAI-ARIA (Roles など) を記述する必要はないかもしれません。

HTML5 との関係

WAI-ARIA が提供するセマンティクスには、HTML5 の要素や属性と重複するものがあります。WAI-ARIA の各 Landmark Roles、たとえば「role="banner"」「role="navigation"」「role="main"」「role="complementary"」「role="contentinfo"」は、HTML5 でも同義の要素が存在しますし (それぞれ、「<header>」「<nav>」「<main>」「<aside>」「<footer>」)、また、「aria-required="true"」は HTML5 の <input> 要素や <textarea> 要素の「required」属性と同義です。

その一方、WAI-ARIA では、HTML のセマンティクスとは別に、独自に支援技術のみに対してセマンティクスを伝達することもできます。たとえば、フォームの各入力要素に対して <label> 要素でラベルを付けるのではなく、「aria-label="(具体的なラベル表記)"」という形で支援技術だけが認識できるラベルを付けることも、可能だったりします。

そうなると、「HTML5 の中で、WAI-ARIA をどの程度記述するのがよいのか?」「WAI-ARIA を記述するとき、どの程度ホスト言語である HTML を尊重する必要があるのか?」という疑問が出てきそうです。

私自身は、アクセシビリティは支援技術だけを対象にするものではないと思っています。なので基本的には、HTML でセマンティックなマークアップが可能な部分はそうすべきで、そのうえで、動的なインタラクションなど補完が必要なところで、適宜 WAI-ARIA を用いるのがよいと思います。

また、現状では支援技術側の HTML5/WAI-ARIA への対応状況がまちまちだったりするので、上述したように WAI-ARIA と HTML5 が重複するものについては、冗長にはなりますが、両方を併記するのがよいかもしれません。(たとえば、ナビゲーション部分は <nav role="navigation">、フォームの入力必須項目は <input required aria-required="true"> とマークアップする、といった具合です。)

WAI-ARIA について詳しくは...

以上、WAI-ARIA について、ごく大雑把に概要を書き連ねました。WAI-ARIA について、さらに詳しい (正確な) 情報は、W3C 勧告の WAI-ARIA 1.0 をご覧ください。

また、以下の W3C ドキュメントも用意されていますので、併せて参照されるとよいと思います。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加