翻訳 / 監修 ：ソシオメディア株式会社
アクセシブルなサイトを作成するには
アクセシビリティポリシーを実装するには、最初に、アーキテクチャおよびテクニックの面で、アクセシブルなデザインへのアプローチを確立します。目的は、サイトの構造やページの作成方法を統一することで、ワークフローを合理化すること。そして、開発中にありがちなミスをなくすことです。サイトアーキテクチャやデザインテクニックの基準を確立しておくと、Web コンテンツのデザイナーや開発者が同じ出発点に立つことができるとともに、関連する問題について議論する下地もできます。
アプローチを策定する際には、Web コンテンツのデザインや開発の経験が浅いグループと、経験が豊富なグループに分けて考慮する必要があります。経験が浅いグループでは、アクセシビリティが容易に達成できるアプローチを用意することが大切です。このグループには、テンプレートやライブラリオブジェクトなど、アクセシブルなページを手早く作成できるツールを配布すると効果的です。経験豊富なグループには、高度なスキルを活用しながら、アクセシブルなデザインプロセスを合理化できるアプローチを用意します。経験豊富なデザイナーや開発者の場合、CSS、XHTML、データ駆動型モデルなどを利用して、カスタマイズ可能な上質の機能をユーザーに提供することができるでしょう。
静的なサイトと動的なサイト
アクセシブルなサイトを作成するときは、静的なサイトにするか動的なサイトにするかを最初に決めておく必要があります。静的なサイトとは、ユーザーが読み込んでも変化しないサイトです。静的なページを編集するには、HTML ドキュメントを開いて、ページごとに編集を行います。動的なサイトは、データベースに接続する Web ページです。ページ上の情報は、ユーザーに応じて変化します。動的なページを編集するには、情報が格納されているデータベースを編集する必要があります。
静的なサイトにするか動的なサイトにするかを決定するときは、組織の能力を考慮する必要があります。動的なページは、セットアップが難しくても管理は簡単という特徴があります。また、Macromedia ColdFusion MX 6.1 などのアプリケーションサーバーも必要です。スタッフの専門技能レベル、ハードウェアおよびソフトウェアが利用可能かどうか、管理スタッフの有無などがこの決定に影響します。
次の 3 種類のサイトデザインモデルは、完全な動的モデルから完全な静的モデルまでカバーしています。アクセシビリティやデータ駆動型デザインに関する専門技能や経験は進化していくので、その組織のニーズに最も適したモデルを見つける必要があります。
データ駆動型モデル
データ駆動型 Web サイトとは、コンテンツがデータベースに格納されているサイトを指します。各 Web ページは、データベースからコンテンツを取り出して動的に生成されます。データ駆動型モデルを利用すると、2 つの点でアクセシブルなデザインプロセスを合理化できます。1 つは、Web ページ上のフォームを使用してコンテンツをデータベースに入力できるため、HTML やオーサリングツールを学習しなくても、組織の中のだれもがサイトにコンテンツを追加できるようになります。Web ページの作成経験がほとんどないコンテンツ開発者を多数抱えているような場合は、この方法が理想的でしょう。
データ駆動型モデルの 2 つ目の利点は、ページ作成プロセスが自動化でき、なおかつサイトのビジターが自分のニーズに合ったコンテンツフォーマットを選択できる点です。そのため、同じページでも、テキストのみのフォーマット、グラフィックを利用した HTML バージョン、Macromedia Flash MX 2004 などのリッチメディアフォーマットというように、動的に配信することが可能になります。静的 HTML サイトの場合、複数のバージョンを用意すると、1 つのバージョンしか実質的に管理されなくなる問題があります。複数のバージョンの静的サイトを管理するのは、動的サイトを管理するよりもはるかに多くの手間がかかります。動的サイトでは、すべてのバージョンが、最新のコンテンツを反映して動的に更新されます。
ただし、データ駆動型モデルを採用できるのは、ハードウェアおよびソフトウェアのインフラストラクチャが用意できる場合に限ります。ColdFusion MX 6.1 などの動的なサーバーアプリケーションを実行するサーバーも必要です。また、動的ページの開発はもちろん、サーバー管理にも十分なリソースが必要になります。
また、組織の専門技能が十分なレベルに達するまで、Web サイトの管理者は、Web サーバーの管理だけでなく、Web コンテンツ開発者のサポートもしなくてはなりません。
静的サイトモデル
静的な Web サイトは、動的なサイトよりもシンプルですが、長い目で見ると管理の手間がかかります。アクセシブルな静的コンテンツを合理的にデザインするには、Macromedia Dreamweaver MX 2004 のテンプレートやライブラリオブジェクトなどの機能を使用すると便利です。また、Macromedia Contribute 2.0 という便利なオーサリングツールもあります。Contribute 2.0 では、アクセシビリティの設定を指定することができます。
Dreamweaver MX 2004 のテンプレート機能を使用すると、共通の要素を持つページのテンプレートを作成してアクセシビリティ機能を組み込んでおくことができます。テンプレートを使用すると、Web サイトの管理者や上級デザイナーは、テンプレートを修正するだけでサイト全体の問題修正やデザイン変更を行うことができます。テンプレートには、組織のロゴやナビゲーションバー、著作権の表示など、そのページの標準要素をすべて組み込んでおきます。これらの要素をロックしておき、経験の浅い Web コンテンツ開発者が Contribute 2.0 を使用して編集可能領域にコンテンツを追加するようにすれば、一貫性のあるアクセシブルなページを維持することができます。
ここできわめて重要になるのは、最初にテンプレートを開発する Web コンテンツデザイナーや開発者にアクセシビリティに関するトレーニングを行っておくことです。
Dreamweaver MX 2004 のライブラリには、サイト全体で再利用したり頻繁に更新するイメージやテキストなどのページ要素を保存しておくことができます。ライブラリ項目として保存されたページ要素は、複数の Web ページで利用することができ、ライブラリ内の要素を更新するだけですべてのコピーを自動的に更新することができます。ライブラリを使用すると、複数のページのすべてのアクセシビリティ機能を簡単に作成および編集することができます。例えば、代替テキストを組み込むことのできるアクセシブルなナビゲーションバーを作成してライブラリに保存しておくと、ナビゲーションライブラリ項目を複数のページやテンプレートにドラッグして利用し、さらにその内容を一斉に変更することができます。
複合モデル
動的デザインを実装するための知識や経験が十分でなくても、必要なハードウェアやソフトウェアが揃っているときは、データ駆動型要素と静的要素を組み合わせたアプローチを選択してもよいでしょう。この場合は、動的なデザイン 1 つから始めます。例えば、頻繁に更新する必要のあるページを、経験の浅いデザイナーが開発してもよいでしょう。データ駆動型モデルに関する専門技能が組織に蓄積されていくにつれて、動的ページへの依存度は高くなり、サイト内で利用される動的なテクニックも高度化して成熟していきます。このモデルを成功させるには、 Web サイト管理者、 Web コンテンツデザイナーおよび開発者双方に継続的なトレーニングを行う必要があります。
ツールとテクニック
アクセシブルなサイトを作成するには、 Web コンテンツのデザイナーと開発者が一貫したアプローチを取ることができるように、サイト全体でツールやテクニックを統一しておくことが大切です。
ツール
アクセシビリティポリシーの実装部分で重要なのは、適切なツールを使用することです。これらのツールは、高度な技能を持つユーザーだけでなく、経験の浅いコンテンツ開発者も利用できるツールでなければなりません。Macromedia Dreamweaver MX 2004 と ColdFusion MX 6.1 は幅広いスキルレベルに対応できる点でお勧めです。Dreamweaver MX 2004 は、アクセシビリティ機能をビジュアルに編集したりドラッグアンドドロップで簡単に作成できるだけでなく、専門技能を修得すれば高度なテクニックも使用できます。
ツールを統一するもう 1 つの大きな理由は、アクセシビリティ関連のトレーニングを容易に行うためです。トレーニングでは、アクセシビリティの問題と適切なテクニックを関連付け、テクニックの使用方法を段階的に指示していかなくてはなりません。そのため、アプリケーションが統一されていると、余分な説明を行う必要がなく、同じ時間でより多くの問題をカバーすることができます。アクセシビリティの問題の広さや注目すべきテクニックの多様さを考えると、時間は、限りある貴重な資源といえます。
テクニック
組織全体でテクニックを統一しておくと、 ある程度主観的なアクセシビリティの問題でも、具体的かつ統一的なアプローチを取ることができます。ナビゲーション、イメージ、CSS、プラグイン、デザインサポートメカニズムなどについて検討するとよいでしょう。
ナビゲーション
ナビゲーションは、アクセシビリティに絡む問題を数多く提起します。特に一貫したアプローチが求められるのは、次の 2 つの点です。1 つは、スキップナビゲーションメカニズムの使用に関する問題です。たとえば、アメリカのリハビリテーション法第 508 条では、「冗長なナビゲーションリンクをスキップできる手段を提供すること」が要求されています。スキップナビゲーションメカニズムが組み込まれていると、ページを移動するたびに、スクリーンリーダーがナビゲーションバーのすべてのリンクを読み上げるのを防ぐことができます。スキップナビゲーションを作成するには、ページの先頭に配置した小さな透明のイメージから、メインコンテンツの直前に配置したアンカーに飛べるようにリンクをかけるのが一般的です。このイメージの代替テキストには、「コンテンツにスキップ」「ナビゲーションをスキップ」などの説明を加えます。
2 つ目は、JavaScript ロールオーバーの使用に関する問題です。ドロップダウンリストを表示したり、ページ内の別の部分にイメージを表示するようなロールオーバーは特に難問です。現在、一部のスクリーンリーダーが JavaScript を読み取れるようになっていますが、ほとんどのスクリーンリーダーには読み取る機能がありません。したがって、ほとんどのスクリーンリーダーユーザーは、JavaScript ロールオーバーで表示されるリンクやコンテンツを利用することができません。プルダウンメニューは可能ですが、JavaScript 単独ではなく、JavaScript と CSS を組み合わせて使用する必要があります。これらのテクニックは複雑になるため、綿密なデザイン計画が必要になります。また、これらのツールには、複数のスキップナビゲーションメカニズムを使用するのがよいかもしれません。アクセシブルな JavaScript ロールオーバーを使用したナビゲーションの開発手順を統一しておくと、一貫した実装をかなり合理的に行うことができます。
イメージ
イメージを標準化しておくと、少なくとも 2 つの点で役立ちます。まず、サイト内で共有するイメージの代替テキストを統一して 1 か所に保存しておくと便利です。Dreamweaver MX 2004 のライブラリ項目としてイメージを保存すると、適切な代替テキストを一度入力しておくだけで、すべてのページに同じ代替テキストを使用することができます。他のデザイナーや開発者も、ライブラリ項目として保存されていれば、正しい代替テキストが入力されているものと安心してページに配置することができます。
次に、50 文字を超えるような長い説明を、代替テキストとしてイメージに指定する場合の対応です。イメージに長い説明を追加する方法はいくつかあります。1 つめは、longdesc 属性を使用する方法です。longdesc 属性は、スクリーンリーダーや音声ブラウザに、別のページにある長い説明へのリンクを提供します。
長い説明を追加する 2 つめの方法は、d リンクと呼ばれるものです。d リンクは、ハイパーリンクのかかった文字「d」(説明を表す description の略) を次のようにイメージの右側に配置します。
文字 d は、イメージの長い説明が用意された別のページにリンクされています。注意しなければならないのは、このｄリンクという手法は、もともと英語圏のガイドラインで提案された手法なので、リンクのラベルに「d」というアルファベットの頭文字が使用されていることです。日本語のサイトでは、「グラフの詳細」といったユーザーに分かりやすいラベルにする必要があります。
3 つめの方法は、d リンクとよく似ていますが、イメージの横にキャプションを配置し、そのキャプションから説明ページにリンクするというものです。d リンクと同じ機能を提供しますが、キャプションの方がデザインスキームに組み込みやすいという利点があります。ページのレイアウトに与える影響も最小限に抑えられるため、前述のｄリンクよりはこの方法のほうが現実的かもしれません。
いずれにしても、サイト内で長い説明の実装方法を統一しておくことは、説明の場所がわかりやすくなるため、コンテンツ開発者だけでなくユーザーにとっても有意義です。
CSS (カスケーディングスタイルシート)
CSS (カスケーディングスタイルシート) は、アクセシビリティに大変有効です。CSS の使用は、アメリカのリハビリテーション法第 508 条では義務付けられていませんが、イギリスやカナダの基準では義務付けられています。
CSS を使用してサイトのテキストを書式化すると、ユーザーは、スタイルを無効にして自分のニーズに合った書式でテキストを表示することができます。そのため、例えば視力障害や色覚異常のあるユーザーであれば、テキストのサイズや色を変更して表示できます。注目すべきは、HTML を使用してテキストを書式化すると、ユーザーが定義したスタイルも含めてすべての CSS スタイルが HTML によって無効化されてしまうことです。そのため、CSS で書式を指定すると定めたら、サイト全体に一貫してその基準を適用する必要があります。
Macromedia Flash コンテンツ
Macromedia Flash MX 2004 は、刺激的で魅力のある Web コンテンツを作成するツールです。Macromedia Flash Player 7 には、新たに、Flash コンテンツにアクセスするためのアクセス支援技術が搭載され、最高の Web 体験をより多くのユーザーにお楽しみいただくことができます。Macromedia Flash MX 2004 でアクセシブルなリッチメディアを作成するときは、まずスクリーンリーダーの環境に配慮する必要があります。デザイナーと開発者は、ムービーで表現される要素に相当するテキストを用意しなくてはなりません。また、これらのテキストが、スクリーンリーダーで正しい順に読み上げられるような配慮も必要です。
Macromedia Flash コンテンツのデザイナーが次に配慮すべきことは、デバイスに依存しないコンテンツにすることです。Macromedia Flash ムービーは、キーボードでもマウスでも操作できなければなりません。経験の浅い開発者には、このようなコンテンツを作成するためのガイダンスも必要になるでしょう。これらについては、Macromedia Accessibility Design Center の詳しい情報を参照してください。
プラグイン
プラグインは、特定の形式のファイルをブラウザで表示するためのツールの総称です。各プラグインごとに、それぞれ異なるアクセシビリティ対策が必要になります。アメリカのリハビリテーション法第 508 条を例にとると、プラグインの使用は、ソフトウェアの基準に準拠するよう規定されています。ソフトウェアの基準でも、 Web コンテンツの基準と同様に、マウスなしでも操作可能であることが求められています。
ビデオやオーディオを使用するには、クローズドキャプション方式などの同期テキストを用意する必要があります。サイトでマルチメディアを頻繁に利用する場合は、クローズドキャプションをサポートするハードウェアやソフトウェアの購入を検討してください。
