れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(3)(CV:三上枝織)はい、『ゆるゆり』は全く関係ないね。『ARIA』も『緋弾のアリア』も関係ないね。WAI(わぁい)といい、ARIA(アリア)といい、オタク心をくすぐるネーミングだぜ......という冗談はさておき。略で(長い......)、Webにおけるアクセシビリティの向上を目的に制定された規格だ。Web開発者にとっても聞き慣れない言葉かもしれない。そんなの見たこともないって人も多いだろう。いって、これを使わなくても一般人は全く困らない。俺も、たぶんあなたも。WAI-ARIAの仕様や書き方に関する詳しい解説は、今回はしないよ。まとめアクセシビリティって?アクセシビリティ(accessibility)とは、日本語でいえば「アクセス可能性」......横文字入ってるし。「どんな人、端末、環境でもアクセスしやすい(アクセシブル)こと」を意味する。まともに閲覧できないWebサイトは、アクセシビリティの欠片もない。Web標準に従っておけば、ほぼすべての端末、ブラウザから閲覧できるわけだけど、特別な配慮が必要な場合もある。思ったあなた、「スクリーンリーダー」とか「点字ディスプレイ」でググってきなさい。視覚障害者の9割以上がWebサイトを利用しているとのデータもある。HTMLのいいところは、テキストベースであり文書が構造化されているため、単純な機械(ソフトウェア)でもその内容を理解できる点だ。人間だけでなくスクリーンリーダー(読み上げソフト)にも効果的に読み上げさせることができる。視覚障害者にとってのスクリーンリーダーのような、アクセシビリティを支援するソフト、装置などを「支援技術」と呼ぶ。アクセシビリティは視覚障害者のためだけではない。体が不自由でマウスが使えない人のために、キーボードや各種コントローラーだけでサイトを利用可能にすることもアクセシビリティの向上に寄与する。マシン・リーダブルHTMLがいかに構造化ドキュメントのための言語といえども、スクリーンリーダーのような機械が本当に内容や意味を正確に理解できるかといえば、それは困難だ。コメントフォームなどの部品に適切にラベルなどをつけてマークアップすれば、機械でもそれがコメントを送信するためのフォームであることを理解できる。一般に「見ればわかる」ような実装でも、機械から「見て」わかるとは限らない(機械はレンダリングされた結果の画像としてのWebページを「見る」わけではない)。マシン・リーダブルとは「機械が理解できる」という意味だが、ハンデのある人にとっては機械が理解しやすいことと自分が利用しやすいことはイコールに近くなる。ハンデのある人が利用するのは機械を用いた支援技術だからだ。よって、アクセシビリティを追求することはマシン・リーダブルを追求することに等しい、と言っても過言ではない。現在のHTMLはマシン・リーダブルをより推し進め、フォーマットとしてアクセシビリティの向上に努めているので、アクセシブルなサイトを作るためにはまずWeb標準を遵守し、論理的で構造的なマークアップを心掛けるのが第一となる。ところで、Webページにおいて機械の代表格であるスクリーンリーダーがどこまで理解でき、どこから理解できなくなるかを、簡単な例を挙げて説明する。HTMLで完結するような要素(文書構造や、意味付けのタグが用意された要素)は、スクリーンリーダーにもほぼ完全に理解できる。単一行テキスト入力ボックス、など。文書の構造がわかれば、操作によって節見出しに移動、リンクを順に読み上げ、などが可能。スクリーンリーダーは単にページを片っ端から読み上げるだけではない。属性により設定された代替テキストを、スクリーンリーダーは読み上げる。HTMLだけでなく、CSSやJavaScriptもある程度解釈する、というより、スクリーンリーダーは通常のブラウザを使用して解釈した文書を読み上げる。より非表示にされた要素を、スクリーンリーダーは読み上げない。プロパティにより生成されたテキストを、スクリーンリーダーは読み上げる。JavaScriptによりクリック可能とされた要素を、スクリーンリーダーはクリック可能と認識する。それがどのような効果をもたらすかを、スクリーンリーダーは事前に(多くの場合、事後にも)認識できない。「クリックできるよ、でもどうなるかはわからないよ」ということ。CSSにより単に不可視とされただけの要素を、スクリーンリーダーは読み上げてしまう。すべてのユーザーから隠すことを意図していた場合、意図しない動作となる。画面外に描画させたもの。文字の色を透明または背景色と同じにしたもの。Webフォントを使ったアイコンなど、読み上げる必要がない要素を、スクリーンリーダーは読み上げようとする。属性を設定しても、多くのスクリーンリーダーはこれを利用しない。不可視の要素の扱いと、JavaScriptを利用したアクションに関する問題があることがわかる。それらは「見ればわかる」ことなのかもしれないが、上述の通り、マシン・リーダブルでなければアクセシブルでないのだ。これらの問題を解決するために定められたのが、Webの標準規格のひとつである「WAI-ARIA」だ。記述例WAI-ARIAも調べてみると奥が深く、ここではすべてを紹介できないが、よく使いそうな記述例をいくつか紹介する。要素が非表示であることを示す要素の現在の状態を表す属性はステート属性と呼ばれ、状態が変われば属性値も変更しなければならない。