属性などによって要素に名前を付けていたが、これだけでは機械から見て構造を理解することができなかった。属性を使用したシンプルなWebページのマークアップの一例である。role="contentinfo">フッター</div></body>HTML5においては、文書構造を示す要素がいくつか定義されているので、一部はWAI-ARIAのロール属性と重複するが、以下のように併用することも可能である。role="contentinfo">フッター</footer></body>緑字はHTML5で新たに定義された要素。属性の属性値は勝手に付けていいものではなく、WAI-ARIAによって定められている通りに使用する。フォーム部品の使い方を示すフォーム部品の現在の状態を示して、使いやすくすることができる。-->スクリーンリーダーへの配慮スクリーンリーダーの利用者がWebページをより利用しやすくするためには、HTMLやWAI-ARIAなどのWeb標準だけでなく、様々な配慮が求められるだろう。HTMLを解釈して読み上げるというスクリーンリーダーの特性を利用したその他の配慮を少し紹介する。文章は順番にスクリーンリーダーは、HTMLで記述された順に文章を読み上げる。見た目が順番通りになっていても、スクリーンリーダーは読み上げる順番までは理解できない。マシン・リーダブルのためにも、文章は構造的に、順序よく記述すべきだ。目で見なければ使い方がわからない部分を説明するために、スクリーンリーダー向けの説明文を挿入するのは良い方法だ。すると、上述の通りスクリーンリーダーも読み上げなくなる。この場合、以下のようなCSSにより単に要素を不可視とする方法で問題を解決できる。することで、通常の利用者からは視覚的に隠し、スクリーンリーダーには読み上げさせることができる。ゼロにすれば......と思うかもしれないが、大きさがゼロの要素をスクリーンリーダーは読み飛ばすことがあるらしい。Safariでパフォーマンスの問題があるらしいので推奨しない。するとスクリーンリーダーは読み飛ばすようになるが、これは本来の使い方ではない。WAI-ARIAの仕様書によると、「冗長な要素などを支援技術から隠すことがアクセシビリティの向上に繋がる場合に限り、注意深く」この方法を用いることを認めている。この場合、支援技術に対して代替となる要素を利用可能としなければならない、とされている。この方法を用いる場合、「目は見えるが肢体が不自由なためにマウス操作のかわりにスクリーンリーダーを使用している人」など、あらゆる状況を想定すること、とされている。したがって、この方法で隠すのは、リンクやフォームなどを含まず、隠しても全く問題にならないような要素に限るのが無難だろう。音声ブラウザって視覚障害者がWebブラウジングに使うのは「音声ブラウザ」というイメージが根強く存在する。俺も最近までそう思っていたのだが、実は音声ブラウザなるソフトは現在ではほとんど存在しない。メーラーやオフィスソフトを含む画面上のあらゆる文字を読み上げることができるスクリーンリーダーに対し、Webページしか読み上げることができない音声ブラウザは使いにくい、ということらしい。スクリーンリーダーを使用してWebブラウジングする人は、CSSによる見た目の装飾が必要ないから、CSSを一切解釈しない「テキストブラウザ」を使用する、というのも誤解だ。上述の通り、スクリーンリーダーの使用者は、健常者と同じ通常のブラウザを使用していて、ブラウザによるWebページの解釈を利用している。スクリーンリーダーなどの支援技術についてより深く知るには、実際にスクリーンリーダーを使ってみるのが一番だ。「NVDA」など、無料のスクリーンリーダーも存在する。自分のサイトや、よく行くサイトをスクリーンリーダーに読み上げさせてみると、いろんなことに気付くだろう。まとめ今回は、Webアクセシビリティのための規格「WAI-ARIA」を紹介した。アクセシビリティに配慮したサイトを作るのはとても大変だが、このような仕組みがあるということだけでも、頭の片隅に置いておくことは無駄にならないと思う。俺は新しいもの好きなので、最近せっせとWAI-ARIAを調べつつ実装したりもしているが、奥が深すぎてどこを妥協するかに腐心している有り様だ。凝ったことをすればするほど、アクセシビリティから遠ざかる俺のサイト......リッチでインタラクティブなサイトを追求した結果、こうなったのか。いや、WAI-ARIAのような配慮を重ねれば、どんなWebサイトもアクセシブルにできるはず。ARIAの名の通り、CSSもJavaScriptも駆使した、リッチなWebアプリケーションをアクセシブルにすることが、WAI-ARIAの究極の目標なのだと思う。(2015/09/17)こめんとコメントはまだありません。こめんとする本文のみ必須。メールアドレスは公開されないよ。お名前メアド名前とメアドを記憶する数式の空欄を正しく埋めてね。※本文には日本語を“数文字”以上含めてね。(詳細)コメントを投稿すると、メールアドレスを含む投稿内容と、投稿者を識別するIPアドレスなどが当サイトのサーバーに送信され、保持される。これらの情報は当サイトのサービスの提供やコンテンツの改善のために利用される。あなたは、当サイトによるこれらの情報の取り扱い(取得・処理・利用)に同意しなければ、コメントを投稿することはできない。この同意の要件は法的な要件として追加されたもので、当サイトによるこれらの情報の取り扱いは従来から変わっていない。当サイトの個人情報の取り扱いについて詳しくは、プライバシー・ポリシーを読んでね。(929)※過去30日間の閲覧数データによる。