アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーションに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常にこの点に配慮していきたいものです。参考になったリソースなぜアクセシビリティか障碍のある人でも支障なく利用できる「バリアフリー」、誰にとっても使いやすく設計する「ユニバーサルデザイン」という考え方がさまざまな分野で重視されるようになってきました。ユニバーサルな情報共有のためには、ウェブ文書でもこの考え方はとても大切です。コンピュータの環境はまだまだ障碍のある方や高齢の方にとって使いやすいものとは言えません。WindowsのようなGUIが全盛になって、かえってそういう配慮が置き去りにされたとも言えるでしょう。新聞報道にも示されるように、官公庁のウェブですら健常者のみを念頭に置いたページがたくさん作られてきたのです。私たちも、病気やけがによって、いつ障碍を持つことになるかわかりません。言うまでもなく誰もが年をとります。車を運転しながら「目で読む」ことは危険極まりなく、騒音の中では「聞き取る」ことは困難です。誰でも、どんな環境でもアクセスできるページを提供するのは、特別なことではないと理解しましょう。2.1私たちがウェブで情報を発信するのは、このメディアを通じて利用者(読者)とのコミュニケーションを図ろうとすることだと言っていいでしょう。このコミュニケーションが成立するためには、「ページ内に情報や機能があることを認識(認知)できる」→「必要な機能を操作したり他のページに移動したりして情報を利用できる」→「コンテンツの内容を理解する」という段階を経て、利用者に内容が伝わらなければなりません。2.1)は、この段階を踏まえた構成で、誰もが利用しやすいウェブコンテンツコンテンツを設計する指針を目指しています。「何のために」を考えながらアクセシビリティを検討するにはとても参考になるので、紹介しながらページづくりの基本を考えてみます。1.2...などは指針(guideline)に相当します。2.0勧告候補まで行なっています。40500:2012となりました。コンテンツは認識可能であることそもそも情報や操作機能が「そこにある」ということが分からなければ、コミュニケーションは始まりません。狭い意味での「アクセス可能性」をきちんと整えることが、全ての出発点です。シンボルや簡略言語など他の形態に変換できるようにする非テキスト内容が情報やユーザへの応答である場合は、同じ目的を達成できる(それが困難なら、少なくともその目的を示す)代替テキストを用意します。ボタンなどのコントロールや入力フィールドの場合は、その要素に目的を表す名前(label要素)を与えます。experience)をもたらすことを目的とする場合は、それが何であるかを説明するラベルを提供します。純粋な装飾や視覚フォーマットのためなら、補助技術がそれを正しく無視できるようにします(たとえばalt="")。代表的なのは、img要素にalt属性で代替テキストを記述することです。これによって、画像を表示できない環境や見ることができない利用者でも、音声合成などの方法でその内容を認識できるようになります。当サイトの「img要素におけるalt属性について」も参照してください。時間ベースメディア:時間軸を持つメディアには、代替内容を提供する音声と同等内容のテキストを用意する、動画に音声トラックを付加する、主な会話や音楽にキャプションを付ける、同期マルチメディア(内容と同期したインタラクションがあるコンテンツ)ではやり取りも含めた代替テキストもしくは適切な代替メディアを提供する、など。マルチメディアコンテンツを作成する時に考えるべき点です。適応性:情報内容(information)や構造(structure)を失うことなく、異なる表現(presentation)ができるようにする内容と表現を分離しておくことで、その表現が困難な環境でも内容はきちんと伝えることができます。見出し要素やリスト要素を適切に用い、表現はスタイルシートに委ねましょう。識別性:前景(foreground)情報を区別できるようにするなど、障碍のある人が内容を見たり聞いたりしやすいようにする情報の区別を色だけに依存しないようにしましょう。内容をはっきり認識できるようにするためには、文字と背景色のコントラストを明瞭にする、背景に画像やパターンを使うことを控えるなどの配慮が必要です。デザインだけにこだわって、背景色と文字色を同系統にしたりしないようにしましょう(背景「イメージ」に濃色系の画像を使って文字色を白にしているページは、画像を表示しないと全く読めないことに注意してください。この場合は、背景「色」も合わせて指定しておくべきです)。2005年11月の草案では、輝度比を用いたコントラスト評価の導入が検討されています。聴覚表現の場合は、意味のないBGMや音を使わない、あるいはこれらをOFFにできるようにすることが大切です。コンテンツのインターフェイス要素は誰にでも操作可能であること移動、入力などの機能は、存在を認識できるだけでなく、特別な装置に依存することなく操作可能でなければなりません。キーボードアクセス:コンテンツの全機能を、キーボードで操作可能にするキーボードによるインターフェイスは、視覚に障碍があっても操作可能ですし、音声入力デバイスでも(キーボードをシミュレートするので)利用できるようになります。keystrokes)キーボードで操作できるようにします。入力フォーカスは、矢印キーやTABキーなどで移動可能にします。これと合わせてマウスなどの別の操作インターフェイスを提供することは問題ありません。文字によるキーボード・ショートカットを実装している場合は、その機能を無効化する、割り当ての変更を可能にする、もしくはその利用者インターフェイス部品にフォーカスが当たっている時のみ有効になるようにします。十分な時間:コンテンツを読んだり操作をしたりするための時間を十分提供する入力に時間制限があったり、勝手に次の画面に移動したり、リフレッシュしたりすると、環境や利用者によってはコンテンツが使えなくなってしまいます。自動的な動きが必要な場合は、利用者がその挙動を抑制もしくは変更できるようにするか、十分ゆとりを持って予告する、あるいはやり直すときにいったん入力したデータが失われないようにします。発作:てんかん発作などを招くことが知られているようなコンテンツをつくらない激しく明滅する画面は光過敏性てんかん発作の原因になることがあります。コンテンツが1秒に3回以上明滅する要素を含まないように求められています。このガイドラインでは触れられていませんが、点滅したり動いたりする情報は、煩わしいだけでなく、障碍のある人には読解不能だったりもします。してもその効果が必要な場合は、あらかじめ警告し、ユーザーが解除できるようにします。移動可能:利用者が移動し、コンテンツを見出し、それがどこにあるかを把握することを助ける手段を提供する次のような基準が示されています。2.1での追加)次のような基準が示されています。コンテンツの内容、および操作方法が理解可能であることせっかくコンテンツにたどり着いてもらっても、内容や操作ボタンなどが理解しにくくてはコミュニケーションがうまく成立しません。いくつかの工夫で、理解しやすいコンテンツを提供することができます。読解可能:テキスト内容は読むことができ、理解できるようにする音声読み上げの正しい発音などのためにページ全体(および部分)の言語情報を示し、辞書に載っていないような専門用語や省略語は、その定義あるいはフルスペルを与えておきます。abbr要素やdfn要素を活用し、必要に応じて用語集などにリンクすると良いでしょう。予測可能:ウェブページの内容の現れ方と機能・動作は予測可能なものにする予期せぬ内容や挙動は利用者を混乱させます。フォーカスを与えたり入力しただけで(アクションを起こしていないのに)ページが遷移する、リンクをクリックすると別ウインドウが開くなど、突然コンテクストが変わってしまう設定は避けるべきです。複数のページで用いられる要素は常に同じ相対順序になるようにする、同じ機能には同じ用語(ラベル)を用いるなど、一貫性を持たせます。その他、リンク色が一般的な色と異なる、あるいはページによって違う、リンクに下線がない、ボタン状のオブジェクトをクリックしても反応しないなど、常識的に反応が予測できないインターフェイスを避け、できるだけ一般常識を尊重し、特殊な挙動は事前に予告したり、ユーザーがその機能を制御できるようにしてください。入力補助:誤りを犯さないように、また訂正できるように利用者を助ける利用者が間違いやエラーをおかしにくいような配慮と工夫を施します。入力エラーが生じた場合は、利用者に問題の所在と内容をテキストで提供します。入力を求めるときは、ラベルや指示を適切に与えます。セキュリティやコンテンツ上の問題が生じない限り、できるだけうまく正常な状態に復帰できるようサポートしてください。選択肢を提供すればテキスト入力よりミスの可能性は減りますし、ミススペルに対して正しい綴りの候補を提供することもできます。法的、あるいは金銭的なやり取りが関係する、あるいはデータを変更したり削除するような重要なフォームは、操作を元に戻したり、エラーチェックを行ったり、最終的な送信の前に確認ができるようにすることも大切です。コンテンツは、幅広いユーザエージェントで十分な信頼性をもって解釈できるよう、脆さがない(robust)ものであることエージェントの技術は変化していきます。特殊な手段ではなく、標準的な技術を仕様に準拠してコンテンツを作成する方が、相互運用性が高く、将来にわたってアクセシブルなものとなります。独自のインターフェイスを採用する場合は、それがアクセシブルになるよう十分注意して設計する必要があります。互換性:現在および将来の、支援技術を含むユーザエージェントと互換性が保てるようにするたまたま自分が使っているブラウザで表示できるというだけではなく、将来登場するさまざまなものも含め、異なる環境でも通用するためには、標準に準拠したコンテンツづくりが基本です。コンテンツは曖昧さなく解析(parse)できるようにします。開始タグと終了タグが正しくマッチすることが重要です(整形式XHTML!)全てのユーザインタフェイス要素について、名前と役割がプログラムに分かるようにします。状態、プロパティ、値の設定などユーザが行うことは、支援技術を含むプログラムにも実行できるようにします。1.0は、14の指針と付随するチェックポイントで、主としてHTMLを用いたコンテンツのアクセシビリティ向上のための留意点を示します。今となっては必ずしも適切な指針とは言えないところもありますが、アクセシビリティといえばWCAG1.0だと思いこんでいる人も多いようなので、参考までに列挙しておきます。音声や画像コンテンツには、同じ意味を伝える代替手段を用意する色に依存した表現をしないマークアップとスタイルシートを正しく使う使用している自然言語を明示するテーブルは適切に表示・表現できるように記述する最新技術をサポートしていなくてもきちんと表示・表現できる動いたり、チカチカしたりするものをユーザーが制御できるアクセシビリティをきちんと持つ埋め込みオブジェクト機種に依存しないデザイン:マウス以外にも、キーボードや音声によって操作できる補助技術や古いブラウザが正しく動作するような解決策を用意するW3Cの技術と指針を利用する文脈や文書の流れを理解するための情報を提供する明解なナビゲーションの機能を提供する簡潔明瞭な文書にするWCAG1.0はHTML4のアクセシビリティ関連機能がブラウザに組み込まれることを期待していたところがあるため、一部のチェックポイントが実情に合わなくなっていることは否めません。優先度3のチェックポイントの中には、(WAIのメイ氏も言ってましたが)無理に適用しようとすると、ページやサイトの全体設計を損ないかねないものもあります。ガイドラインに書かれているから、チェックツールで警告されたからといって、無闇に機能を追加するのではなく、何のためにその機能が必要なのかを考えて採用するようにしましょう。大切なのは、AAAのロゴを表示したり、チェッカーで高得点を上げることではなく、できるだけ多くの利用者とコミュニケーションを実現させることなのです。第3部:ウェブコンテンツ」が制定されました。1.0に近いものですが、対象をHTMLに限定せず、また内容も「構造及び表示スタイル」「操作及び入力」といった項目に整理されているので、応用範囲が広いと言えます。8341-3:2016に改定されています。ハンディにかかわらずコンテンツを操作・利用できることをあげ、(3)推奨要件として、認知及び記憶に過度な負担をかけない、多様な環境で利用できる、操作に不慣れな利用者でも使える、ということを掲げています。開発及び制作に関する個別要件」のセクションで定義されています。各要件には参考や例が添えられ、具体的にどうやって適用すべきかが示されていますが、ここでは要件のみを列挙してみます。規格及び仕様ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつそれらの文法に従って制作しなければならない。ウェブコンテンツには、アクセス可能なオブジェクトなどの技術を使うことが望ましい。構造及び表示スタイルウェブコンテンツは、見出し、段落、リストなどの要素を用いて文書の構造を規定しなければならない。スタイルシートを用いて記述することが望ましい。利用者がスタイルシートを利用できない場合、又は意図的に使用しないときにおいても、ウェブコンテンツの閲覧及び理解に支障が生じてはならない。表は、分かりやすい表題を明示し、できる限り単純な構造にして、適切なマーク付けによってその構造を明示しなければならない。表組みの要素をレイアウトのために使わないことが望ましい。ページのタイトルには、利用者がページの内容を識別できる名称を付けなければならない。フレームは、必要以上に用いないことが望ましい。使用するときは、各フレームの役割が明確になるように配慮しなければならない。閲覧しているページがウェブサイトの構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供することが望ましい。操作及び入力ウェブコンテンツは、特定の単一デバイスによる操作に依存せず、少なくともキーボードによって全ての操作が可能でなければならない。入力欄を使用する時は、何を入力すればよいかを理解しやすく示し、操作しやすいように配慮しなければならない。入力に時間制限を設けないことが望ましい。制限時間があるときは事前に知らせなければならない。制限時間があるときは、利用者によって時間制限を延長又は解除できることが望ましい。これができないときは、代替手段を用意しなければならない。利用者の意志に反して、又は利用者が認識若しくは予期することが困難な形で、ページの全部若しくは一部を自動的に更新したり、別のページに移動したり、又は新しいページを開いたりしてはならない。ウェブサイト内に置いては、位置、表示スタイル及び表記に一貫性のある基本操作部分を提供することが望ましい。ハイパリンク及びボタンは、識別しやすく、操作しやすくすることが望ましい。共通に使われるナビゲーションなどのためのハイパリンク及びメニューは、読み飛ばせるようにすることが望ましい。利用者がウェブコンテンツにおいて誤った操作をした時でも、もとの状態に戻すことができる手段を提供しなければならない。画像には、利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。ハイパリンク画像には、ハイパリンク先の内容が予測できるテキストなどの代替情報を提供しなければならない。ウェブコンテンツの内容を理解・操作するのに必要な音声情報には、聴覚を用いなくても理解できるテキストなどの代替情報を提供しなければならない。動画など時間によって変化する非テキスト情報には、字幕又は状況説明などの手段によって、同期した代替情報を提供することが望ましい。同期して代替情報が提供できない場合には、内容についての説明を何らかの形で提供しなければならない。アクセス可能ではないオブジェクト、プログラムなどには、利用者がその内容を的確に理解し操作できるようにテキストなどの代替情報を提供しなければならない。アクセス可能なオブジェクト又はプログラムに対しても、内容を説明するテキストなどを提供することが望ましい。色及び形ウェブコンテンツの内容を理解・操作するのに必要な情報は、色だけに依存して提供してはならない。ウェブコンテンツの内容を理解・操作するのに必要な情報は、形又は位置だけに依存して提供してはならない。画像などの背景色と前景色とには、十分なコントラストを取り、識別しやすい配色にすることが望ましい。文字のサイズ及びフォントは、必要に応じ利用者が変更できるようにしなくてはならない。フォントを指定する時は、サイズ及び書体を考慮し読みやすいフォントを指定することが望ましい。フォントの色には、背景色などを考慮し見やすい色を指定することが望ましい。自動的に音を再生しないことが望ましい。自動的に再生する場合には、再生していることを明示しなければならない。音は、利用者が出力を制御できることが望ましい。変化又は移動する画像又はテキストは、その速度、色彩・輝度の変化などに注意して作成することが望ましい。早い周期での画面の点滅を避けなければならない。言語が指定できるときは、自然言語に対応した言語コードを記述しなければならない。日本語のページでは、想定する利用者にとって理解しづらいと考えられる外国語は、多用しないことが望ましい。想定する利用者にとって理解しにくいと考えられる用語は、多用しないことが望ましい。使用するときは、初めて記載されるときに定義しなければならない。想定する利用者にとって、読みの難しいと考えられる言葉(固有名詞など)は、多用しないことが望ましい。使用するときは、初めて記載されるときに読みを明示しなければならない。表現のために単語の途中にスペース又は改行を入れてはならない。ウェブコンテンツは、文章だけではなく、分かりやすい図記号、イラストレーション、音声などを合わせて用いることが望ましい。運用、検証、フィードバック、サポートという観点からウェブコンテンツの情報アクセシビリティを確保するような仕組みを求めています。8341-2)という規格があります。「共通指針」にはより一般的な形で考え方や機能、技術的要件が示されていますが、これを併読すると、小手先の技術ではなく、本質的に何を念頭に置くべきなのかがよく分かります。2.0の場合と同じく、「何のために」を考えながらアクセシビリティを検討することができます。「第二部:情報処理装置」の附属書1には、高齢者・障碍者が遭遇する問題点が解説されており、やはり利用者の立場に立った設計のための参考になります。PDFを閲覧することは可能です(印刷はできません)。8341-3:2010が発行されました。頑健性に関する原則」という原則が示されます。試験方法」においては、達成基準を満たしているかどうかを客観的に検証するための方法が示されます。8341-3:2016に改定されています。40500:2012一致規格となるよう、JIS独自の要求事項は附属書(参考)に分離されました。当サイトのアクセシビリティ関連情報いろいろな配慮を求められても、それが実際、例えば音声ブラウザなどでどう反映されるかがわからないと、使いにくいことも確かですね。新しい音声ブラウザは、いろいろな付加情報を提供できるようになってきています。当サイトでは、主としてIBMホームページリーダーで確認した結果をもとに、いくつかのページ(の一部)で関連情報を紹介しています。音声ブラウザと見出し音声ブラウザには見出し読みモードがあるほか、「現在位置を確認」とすることで直前の見出し内容をチェックできます。見出しを読み上げるときはチャイムを鳴らしたり、ゆっくり読み上げたりします。テーブルとアクセシビリティテーブルの見出し項目をth要素できちんとマークアップすると、個々のセルの情報として対応する見出しを読み上げさせることができます。scope属性、headers属性、summary属性も有益です。title属性について「ステータスバーの状況と現在の日時を確認する」という機能で、title属性の内容を読み上げさせることができます。日付の表記に関するノート01/08/02というスタイルの日付は、文脈や文化的背景によって解釈が違う上に、音声ブラウザでは分数として読み上げられてしまいます。2001-08-02というW3C-DTFの書式を用いることで、データとして処理しやすく、かつ理解しやすい日付とすることができます。色の組み合わせチェック文字色と背景色のコントラストが確保できているかどうかを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意しました。色覚の違いのシミュレーションも合わせて行います。ブックマークレットも作ってみました。2005年時点での音声ブラウザの読み上げ機能については、日本の視覚障害者用ウェブ利用ソフトの機能調査において詳しくレポートされています。Machineへのリンクを用いて)掲載しておきます。このリストの中での定番:こころWebは「障害を持つ方のコミュニケーション支援機器や関連する技術情報を集めた」サイトで、利用の実例も含めて詳細な紹介がありますした。NCSUは、ユニバーサルデザインの7つの原則などで知られる、この分野の研究のメッカ。ある東京女子大学の小田先生のサイト。比較的最近(2003~2004年頃)ご縁があったところ:みんなのウェブでは、ウェブアクセシビリティの普及のために解説やセミナー、コンテストなどが行われてきました。アクセシビリティは高い技術と正しい思想により実現するは、新しい技術を正しくもちいつつ高いアクセシビリティを目指すという考え方で研究されている石川准先生のサイト。さまざまな研究発表の内容や翻訳など。毎日新聞ユニバーサロンでは、2003年6月に「日本のウェブアクセシビリティ最新事情」と題した対談もさせていただきました。個人の情報提供の中にも、古くから優れたものがありました:バリアフリーWebデザインガイドでは、音声ブラウザで読み上げやすいホームページ作成法などのノウハウが提供されます。IBMホームページリーダーの実際の動作に基づいたポイント解説が具体的。カラーバリアフリーガイドは、色覚上の困難(色弱)を理解するための具体的な情報を提供してくれます。色を使うときに考えるべきことがたくさんあります。チェックツールの老舗:Bobbyは、ハンディのある人にも使えるページになっているかどうかを検証してくれます。2007年にIBMに買収され、フリーのオンラインツールとしては利用できなくなりましたが、製品の案内がありますした。1.0の指針を実際にHTMLに反映させるための具体的な方法を示唆してくれます。手探りしてきた記録として:『日経バイト』1997年10月号のY.O.さんの解説記事「Windows95で低下したパソコン・アクセシビリティ」は、このページを作るきっかけを与えてくれました。当時の状況が手際よくレポートされていました。PCオープンアーキテクチャ推進協議会(OADG)のアクセシビリティのページには開発者向け情報やいろいろなリソースへのリンクがありました。Projectは、インターネット上で障碍者支援のための本当に必要な情報や問い合わせ先を探すことができるようにと、さまざまな分野別リンク集と連携したり、紹介方法の統一やデータベースの構築をはかったプロジェクト。このページ公開当時、いろいろ参考にしました。Resourcesのリンクを参考にしました。拙著『ユニバーサルHTML/XHTML』でも、第14章「利用者の立場で考える」を中心に、アクセシビリティやユニバーサルな情報発信について記述しています。http://www.kanzaki.com/docs/html/accessible.html。