2015年末におけるWAI-ARIAの今をものすごくざっくりと

このエントリーはWeb Accessibility Advent Calendar 2015の11日目のエントリーです。


出足から私的な話になって恐縮ですが、今年の筆者のアクセシビリティーに関係する活動実績としては、WAI-ARIA 1.0 日本語訳の訳出を完了し、さらに1.0の後続となるWAI-ARIA 1.1 日本語訳の訳出を追いかけているという年になりました*1。さらに、ARIA in HTML 日本語訳という仕様の訳出も行っています*2。ということで日本語訳の宣伝も兼ねて、折に触れて訳文を引用していきたいと思います*3。


さて、WAI-ARIAの今ということですが、そもそもWAI-ARIAとは何なのかというところにスポットライトを当てつつ、少し掘り下げてみたいと思います。せっかくのアドベントカレンダーですので、WAI-ARIAという言葉は聞いたことがあっても、中身はいまいちという人にもなるべく分かりやすく書いてみることにします（そのため、既知の方にとっては冗長な説明になるかもしれません）。それでは、仕様の概要から少し長いですが引用してみましょう。

支援技術が障害をもつ人に対し適切な情報を伝えられるようにするために、ウェブコンテンツのアクセシビリティーは、ウィジェット、構造、動作に関するセマンティック情報を要求する。この仕様は、アクセシブルなインターフェースの要素を定義するロール、ステート、プロパティーのオントロジーを提供するものであり、ウェブコンテンツやウェブアプリケーションのアクセシビリティーと相互運用性を向上する目的で使用することができる。これらのセマンティックは、文書レベルのマークアップにおいて開発者がユーザーインターフェースの動作と構造情報を支援技術に適切に伝えることができるよう設計されている。

WAI-ARIA 1.1 日本語訳 - 概要

言い換えるならば、ウェブページが（ユーザーに）適切に情報を伝えるためには、セマンティック*4（意味論）に則ることが必要だという思想の下に、WAI-ARIAは設計されています。より具体的に言うならば、マークアップ言語に対して、（ロール）属性を通してそのマークアップ言語自身の要素が持つ意味を明確化する、あるいは増強する、といったところでしょうか。ここでごく簡単な例示をしてみましょう。

<h1>はじめに</h1>
<h2>WAI-ARIAとは</h2>

何の変哲もない見出しです。W3C HTML5仕様 日本語訳によれば*5 *6、例示した1行目の見出しはランク1の見出しであり、2行目の見出しはランク2であると言えます。そして、ARIA in HTML仕様においてh1-h6要素は、デフォルトの暗黙ARIAセマンティックとしてaria-level = 正の整数をもつ、role=headingを持つとされます。つまりWAI-ARIAを使ってもし書くならば、

<h1 aria-label="1" role="heading">はじめに</h1>
<h2 aria-label="2" role="heading">WAI-ARIAとは</h2>

と書くことも出来ないことはない、ということになりますが普通はしません。なぜなら、h1、h2要素自身がデフォルトでそれぞれランク1の見出し、ランク2の見出しという意味をすでに持っているからです。このHTML自身が既に持っている「意味」をWAI-ARIAの用語で言い換えると、（HTML要素の）デフォルトの暗黙のARIAセマンティック（default implicit ARIA semantics）になります。ARIA in HTML仕様によれば*7、

ウェブ開発者は、表に定義されるデフォルトの暗黙のARIAセマンティックと一致する値にARIA roleおよびaria-*属性を設定すべきでない。

ARIA in HTML 日本語訳 - 1. ARIA in HTMLの使用に対するウェブ開発者の要件

とあるので、特別な理由*8がなければするべきではありません。

それでも、どうしてもWAI-ARIAを使いたいと思う人がいるかもしれません。見出しのセマンティックを持たない要素でもって見出しを表現すればよいというような斜め上の発想をすれば、たとえば、div要素は一切特別な意味を持たない*9*10わけですから、

<div aria-label="1" role="heading">はじめに</div>
<div aria-label="2" role="heading">WAI-ARIAとは</div>

と書けばよいだろうというのは容易に思いつくと思います。しかし、WAI-ARIA仕様によれば、

同一のロールのセマンティックと値をもつホスト言語における機能が使用可能である、かつ著者がホスト言語の機能を使用しないようにするための説得力のある理由がない場合、著者は、WAI-ARIAをもつ他の要素を再利用するよりもむしろ、ホスト言語の機能を使用すべきである。

WAI-ARIA 1.1 日本語訳 - 7.5 ホスト言語のセマンティックとの競合

とありますので、特に理由が無い限り、ホスト言語（ここではHTML言語）の機能を使用すべきです。すなわち、この場合の見出しを表したいのであれば、単にh1、h2要素だけを使用するべきです（最初のマークアップ例のとおり）。


では、どのようなシーンでWAI-ARIAを使用すればよいのでしょうか。ARIA in HTML仕様によれば、次の例示が挙げられています。

<figure role="img" aria-labelledby="fish-caption">
   <pre>
   o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
   </pre>
   <figcaption id="fish-caption">
    Joan G. Stark, "<cite>fish</cite>".
    October 1997. ASCII on electrons. 28×8.
   </figcaption>
</figure>
ARIA in HTML 日本語訳 - 2. ARIA in HTMLの使用に対する文書適合性要件

このように記述することで、WAI-ARIAを解釈してくれる支援技術（スクリーンリーダー）に対して、アスキーアート部分を読み飛ばし、キャプションのみを読むことが期待できます*11。


ここまでをざっくりとまとめますと、

  • WAI-ARIAはrole属性とaria-*属性でマークアップ言語にセマンティックを補強する。
  • ARIA in HTML仕様がHTMLに対する暗黙のARIAセマンティックを規定する。
    • W3C HTML5仕様におけるARIA関連の記述と矛盾する場合、ARIA in HTML仕様を優先する。

ということになると思います。ここではわかりやすさのために静的なHTMLを取り上げましたが、JavaScriptと組み合わせた動的なコンテンツでもその力を存分に発揮します。


さて、今のところARIA in HTML仕様がHTMLに対するセマンティックを規定しているわけですが、WAI-ARIAが対象としているのは何もHTMLだけではありません。その対象はマークアップ言語であれば何でもよいわけで、


このように、少なくとも策定進行中の仕様から見て、WAI-ARIAの領域はどんどんと広まりつつあります。その一方で、実装の対応状況はかなりのバラツキがあるという話も耳にします*12。WAI-ARIA自身が進化の真っ只中にあるので、ある実装では意図したどおりに動作するけれども、別の実装では動作しない、という問題がつきまとってくると思います（別にWAI-ARIAに限らず、ウェブ技術全般に見受けられると思いますが）。また、WAI-ARIA仕様の1.4 WAI-ARIAとホスト言語の相互進化という節でも、WAI-ARIAが進化すればホスト言語（たとえばHTML）も進化する（逆もまたあり）ということを謳っています。


と、ざっくりとWAI-ARIAの立ち位置に触れつつ、執筆時点のWAI-ARIAの今について触れてみましたがいかがでしたでしょうか。何かのお役に立てれば幸いです。

*1:WAI-ARIA 1.0はW3C勧告で、WAI-ARIA 1.1はW3C草案ですが、実のところWAI-ARIA 1.0は"やっつけ"な箇所が見受けられます。作成進行中の仕様草案ではありますが、訳者の立場からWAI-ARIA 1.1を参照することをお勧めしますし、このエントリーでもWAI-ARIA 1.1を参照します。

*2:ARIA in HTML仕様は、HTML 5.1仕様に対するモジュールの位置付けということに今のところなっています。

*3:白状すると、通しでWAI-ARIA仕様訳を見直したことが実はありません。WAI-ARIA仕様に限らず、日本語がおかしな箇所を見つけられましたら、是非筆者にコンタクトしてみてください。

*4:忠実に英語の発音を音訳するのであれば、形容詞のsemanticをセマンティック、名詞のsemanticsをセマンティクスと訳し分けるべきでしょうが、この記事の執筆当時は筆者はそのように訳し分ける意味を見出すことができなかったので、どちらの品詞だろうと「セマンティック」と記述していました。訳し分けるべき、あるいは訳し分けなくても良いと言う学術的な根拠ないし関連情報をお持ちの方はissue: semanticsの訳語までどうぞ。ちなみにフランス語はどちらもsémantiqueだそうです。

*5:HTML5訳§4.3.6とHTML5訳§4.3.10あたりから。

*6:単にわかりやすさのためにW3C HTML5仕様の日本語訳から日本語を引用していますが、W3C HTML5とWHATWG HTMLで本文の文言は変わってないはずです。HTML5§4.3.6とWHATWG HTML§4.3.6、HTML5§4.3.10とWHATWG HTML§4.3.11をそれぞれ比較。

*7:W3C HTML5仕様では、strong native semantics（強いネイティヴセマンティック）とデフォルトの暗黙のARIAセマンティックが分かれて記述されており、またWAI-ARIA 1.0および1.1仕様でこの2つの用語は定義されていますが、このエントリーの執筆時点においてWHATWG HTMLからWAI-ARIAの情報はほぼ全て削除されてW3C仕様を参照しています。つまるところ、ARIA in HTML仕様こそが、どのHTML要素が暗黙のARIAセマンティックを持つかを定義します。WHATWG HTMLがどうしてこうなったのかは、ながしまさんのツイート参照ということで。

*8:1つの例として、レガシーユーザーエージェントが暗黙のARIAセマンティックを支援技術に伝えない場合が挙げられます（個人的には動機としてそれほど強いものでもないので推めませんが）。

*9:HTML5訳§4.4.13

*10:当然、ARIA in HTMLでも、div要素は暗黙のARIAセマンティックでロールを持たず、全てのロールを受け入れ、可能なすべてのaria-*属性を受け入れる旨が記述されています。

*11:例をどこかで見たことがあると思ったそこのあなた、去年の筆者のアドベントカレンダー（http://d.hatena.ne.jp/momdo/20141206/p1）と実は全く同じ例示です。

*12:2日目の日本語スクリーンリーダーにおけるインラインSVG対応状況のツラい話 - 週刊SVGは直近の調査例になると思います。