Webアクセシビリティ・イニシアティブ

Webアクセシビリティ・イニシアティブ(Web Accessibility Initiative)の頭文字を取って、WAI(ワイ)といいます。
WAI(ワイ)は、W3Cの活動の1つです。

WAI(ワイ)の基本概要、原則、アクセシビリティに関係する技術をかんたんに説明しています。

記事元は以下ですが、わかりやすい文章にするために、大幅に意訳しています。
自分の理解で学びたい方は、直接引用リンクをご覧ください。

引用:Accessibility Fundamentals Overview | Web Accessibility Initiative (WAI) | W3C

Webアクセシビリティの原則

Table of Contents

the appearance of braille

はじめに

ここでは、「Accessibility Principles | Web Accessibility Initiative (WAI) | W3C」を機械翻訳し、理解しやすい日本語に書き換え、さらに適宜削除・修正・加筆をしています。

Webサイトに忠実な内容を理解したい場合には、本家サイトをご覧ください。

Webアクセシビリティの原則

以下は、WebサイトやWebアプリケーション、ブラウザなどに求められるWebアクセシビリティについてご紹介します。また、W3Cウェブ・アクセシビリティ・イニシアティブ(WAI)の国際規格や、Webユーザーの体験談なども参考にしています。

Webアクセシビリティ基準

Webアクセシビリティ構成要素。

  • Webコンテンツ
    • テキスト、画像、フォーム、マルチメディアに加え、マークアップコード、スクリプト、アプリケーションなど、Webサイトのあらゆる部分を指します。
  • ソフトウエア・ハードウエア/User agents
    • 人々がWebコンテンツにアクセスするために使用するソフトウェアで、デスクトップのグラフィックブラウザ、音声ブラウザ、携帯電話ブラウザ、マルチメディアプレーヤー、プラグイン、および一部の支援技術など。
  • メディアコンテンツを作るためのアプリケーションソフトウェア(Authoring tools)
    • コードエディター、ドキュメント変換ツール、コンテンツ管理システム、ブログ、データベーススクリプト、その他のツールなど、Webコンテンツを作成するために使用するソフトウェアやサービス。

知覚・認識

テキスト以外のコンテンツの代替テキスト

代替テキストとは、テキスト以外のコンテンツです。例えば、以下のようなものがあります。

  • アイコンやボタン、画像
  • 図表やイラストなどの説明
  • オーディオファイルやビデオファイルなど、テキスト以外のコンテンツの簡単な説明
  • フォームコントロール、入力、その他のユーザーインターフェースを構成するラベル

代替テキストは、画像や図表、ビデオファイルの機能や目的を伝え、同等のユーザー体験を提供します。例えば、検索ボタンの適切な代替テキストは、「拡大レンズ」ではなく「検索」です。

代替テキストは様々な方法で表示することができます。画面を見ることができない人や読むことが困難な人のために読み上げたり、独自の文字サイズに拡大したり、点字デバイスに表示したりなど。

代替テキストは、キーボードによる操作や音声認識(音声入力)による操作を助けるためのコントロールやラベル機能になります。また、音声、動画、その他の形式のファイルや、Webサイトの一部として組み込まれているアプリケーションを識別するためのラベルとしても機能します。

マルチメディアのためのキャプションとその他の代替手段

音声が聞こえなかったり映像が見えない人には、代替手段が必要です。例えば、以下のようなものがあります。

  • ラジオインタビューの録音など、音声コンテンツの字幕やキャプション
  • ビデオの視覚的な詳細を説明するナレーションや音声ガイド
  • 音声コンテンツの手話通訳

聴覚的、視覚的な情報が正しい順序で記載されているトランスクリプト(音声テキスト化)は、基本レベルのアクセシビリティであり、キャプションや音声ガイドの作成を容易にします。

コンテンツは様々な方法で表現する

多くの人は、予測可能なユーザーインターフェースに依存しているため、一貫性のない外観や動作により混乱したり、気が散ったりします。コンテンツを予測しやすくする例としては、以下のようなものがあります。

  • 複数のページで繰り返されるナビゲーションが、毎回同じ場所に表示される
  • Webページ上で繰り返されるユーザーインターフェースコンポーネントには、毎回同じラベルが付いている
  • Webページの大幅な変更は、ユーザーの同意なしには行われない

これらの要件を満たすことで、ユーザーは、Webサイトで提供されている機能やナビゲーションの仕組みをすぐに理解し、自分のニーズや好みに合わせて操作することができます。

例えば、よく使う機能にショートカットキーを設定し、キーボードの操作性を向上させる人がいます。また、特定のページを表示する手順や、Webサイト上のプロセスを記憶している人もいます。いずれの場合も、予測可能で一貫性のある機能が重要です。

見やすい、聞きやすいコンテンツ

識別可能なコンテンツは、見たり聞いたりしやすいです。そのようなコンテンツには

  • 情報の伝達やコンテンツの識別のための手段として、色が使用されている
  • 既定の前景色と背景色の組み合わせで十分なコントラストが得られる
  • ユーザーがテキストのサイズを最大400%まで変更したり、テキストの間隔を変更しても、情報が失われることはない
  • 小さなウィンドウ(ビューポート)でも、ユーザーがテキストを大きくしても、テキストは再表示される
  • テキスト画像は、サイズを変更したり、実際のテキストに置き換えたりなど、可能な限り使用しない
  • Webサイトで再生される音声は、ユーザーが一時停止、停止、または音量を調整することができる
  • バックグラウンドの音声は、干渉や気が散らないように、小さくするか、またはオフにすることができる

これらの要件を満たすことで、重要な情報をより見分けやすくすることができます。支援技術を使用していない人への配慮や、支援技術を使用していても、Webページから流れる音楽や多彩な動きのあるビジュアルコンテンツからの干渉を受ける可能性がある人への配慮も含まれます。

例えば、色覚異常のある多くの人は、特定のツールを使用しません。さらにテキストと周囲の背景との間に十分な色のコントラストがある適切なデザインが好ましいです。また、自動再生される音声は、ときには音声合成や聴覚支援機器(ALD)の妨げになる場合もあります。

操作性(ユーザーインターフェイス(UI)とナビゲーション)

キーボードのみでもアクセス可能に

多くの人はマウスを使用せず、キーボードに頼ってWeb操作をしています。そのため、入力フォームのテキストボックス、チェックボックスなどその他のコンポーネントを含むすべての機能にキーボードでアクセスする必要があります。

キーボードのアクセシビリティは以下の通りです。

  • マウスで利用できる機能はすべてキーボードでも利用できる
  • キーボードのフォーカスが入力・チェックボックスなど以外の部分に引っかからない
  • Webブラウザやオーサリングツールなどがキーボードに対応している

これらの要件を満たすことで、人間工学に基づいたレイアウトキーボード、オンスクリーンキーボード、スイッチデバイスなどの代替キーボードを使用している人を含め、キーボードユーザーの利便性が向上します。また、音声認識(音声入力)を利用してWebサイトを操作したり、キーボードインターフェースを使ってテキストを入力したりする人にも役立ちます。

時間の確保(ユーザーがコンテンツを読み、利用する)

コンテンツを読んだり利用するために、他の人よりも多くの時間を要する人がいます。例えば、テキスト入力、説明理解したり、コントロールを操作したり、その他Webサイト上のタスクを完了するために、より多くの時間を必要とする人がいます。

十分な時間を確保するための例としては、以下のような仕組みがあります。

  • 必要な場合を除き、制限時間の停止、延長、調整
  • 動いている、点滅している、またはスクロールしているコンテンツを一時停止、停止、または隠す
  • 必要な場合を除き、中断を延期または抑制する
  • データを失うことなく、セッションの終了時に再認証を行う

痙攣(けいれん)や発作を起こさないコンテンツ

特定の速度やパターンで点滅するコンテンツは、痙攣などの光感受性反応を引き起こす可能性があります。点滅するコンテンツは完全に避けるか、既知のリスクを引き起こさない方法でのみ使用することが理想的です。また、アニメーションや動きのあるコンテンツは、不快感や身体的反応を引き起こす可能性があります。

痙攣や身体反応を起こさないようにする例。

  • 特定の速度やパターンで点滅するコンテンツを掲載しない
  • 点滅するコンテンツを表示する前に、ユーザーに警告し、代替手段を提供する
  • 必要不可欠なものを除き、アニメーションをオフにする仕組みを提供する

ユーザーは簡単にコンテンツを見つけれるようナビゲートされ、どこにいるかを判断できる

よく整理されたコンテンツは、ユーザーが自分の方向性を確認し、効果的にサイト内を移動します。そのようなコンテンツには次のようなものがあります。

  • ページには明確なタイトルがあり、説明的なセクションの見出しで構成されている
  • 一連のWebページの中で、関連するページを見つける方法が複数ある
  • 一連の関連ページの中で、ユーザーは現在の位置を知ることができる
  • 複数のページで繰り返されているコンテンツブロックを回避する方法がある
  • キーボードのフォーカスが見え、フォーカスの順番が意味のある順番になっている
  • リンクの目的が明らかであり、理想的にはそのリンクを単独で見た場合でも明らかである

この要件を満たすことで、人々はそれぞれのニーズや好みに応じて、さまざまな方法でWebページを閲覧することができます。例えば、特定のウェブページを探すのにメニューバーなどの階層的なナビゲーション構造を利用する人もいれば、代わりにウェブサイトの検索機能を利用する人もいます。また、コンテンツを見ている人もいれば、聞いている人もいます。また、マウスやキーボードだけで操作する人もいれば、両方で操作する人もいるでしょう。

ユーザーはキーボード以外のさまざまな入力方法を利用できる

キーボード以外にも、タッチ操作、音声認識(音声入力)、ジェスチャーなどの入力手法は、多くの人にとってコンテンツをより使いやすくします。しかし、すべての人がこれらの入力手法を同じように使えるわけではありません。これらの入力手法の利点を最大限に生かすために、デザイン上、特に考慮すべき点があります。これには以下が含まれます。

  • 手先の器用さや細かい動きを必要とするジェスチャーには、手先の器用さを必要としない代替手段を用意
  • コンポーネントは、元に戻す機能を提供するなど、誤って起動しないように設計されている
  • ユーザーに提示されるラベルは、コード内の対応するオブジェクト名と一致し、音声による起動をサポートする
  • 動作によって起動する機能は、ユーザーインターフェースコンポーネントによっても起動することができます。
  • ボタン、リンク、その他のアクティブなコンポーネントは、触って簡単に起動できるように十分な大きさになっている

この要件を満たすことで、幅広い能力を持つ多くの人々が、さまざまなデバイスを使ってコンテンツを使いやすくすることができます。これには、携帯電話、タブレット端末、発券機などのセルフサービス端末で使用されるコンテンツが含まれます。

理解可能

テキストが読みやすく、理解しやすい

コンテンツ制作者は、テキストコンテンツが、音声合成による読み上げ時も含めて、可能な限り多くの人に読まれ、理解されるようにする必要があります。そのようなコンテンツには

  • アラビア語、オランダ語、韓国語など、ウェブページの主要言語の識別
  • Webページのテキストの文章、フレーズ、その他の部分の言語の識別
  • 珍しい単語、フレーズ、イディオム、略語などの定義を提供すること
  • 可能な限り明確でシンプルな言語を使用する、または簡略化したバージョンを提供する

この要件を満たすことで、支援技術を含むソフトウェアがテキストコンテンツを正しく処理できるようになります。例えば、この要件は、ソフトウェアがコンテンツを読み上げたり、ページの要約を生成したり、技術的な専門用語などの珍しい単語の定義を提供したりするのに役立ちます。また、より複雑な文章やフレーズ、ボキャブラリーを理解するのが難しい人にも役立ちます。特に、さまざまなタイプの認知障害を持つ人々を支援します。

予測可能な方法でコンテンツが表示され、動作する

多くの人は、予測可能なユーザーインターフェースに依存しており、一貫性のない外観や動作によって混乱したり、気が散ったりします。コンテンツを予測しやすくする例としては、以下のようなものがあります。

  • 複数のページで繰り返されるナビゲーション機構が、毎回同じ場所に表示される
  • ウェブページ上で繰り返されるユーザーインターフェースコンポーネントには、毎回同じラベルが付いている
  • ウェブページの大幅な変更は、ユーザーの同意なしには行われない

この要件を満たすことで、ユーザーは、ウェブサイトで提供されている機能やナビゲーションの仕組みをすぐに理解し、自分のニーズや好みに合わせて操作することができます。例えば、よく使う機能にショートカットキーを設定して、キーボードでの操作性を向上させる人がいます。また、特定のページに到達するための手順や、ウェブサイト上のプロセスを記憶している人もいます。いずれの場合も、予測可能で一貫性のある機能が重要です。

ユーザーがミスを正したり避けたりしやすい

フォームやその他のインタラクションは、多くの人にとって分かりにくかったり、使いにくかったりすることがあり、その結果、ユーザーがミスを犯しやすくなることがあります。ユーザーがミスを回避・修正するための支援の例としては、以下のようなものがあります。

  • 説明的な指示、エラーメッセージ、修正提案
  • より複雑な機能や操作のための状況に応じたヘルプ
  • 必要に応じて、提出物の見直し、修正、取り消しが可能

この要件を満たすことは、コンテンツを見たり聞いたりすることができず、暗黙の関係や順序、その他の手掛かりを認識できない人々を助けることになります。また、機能を理解していない人、混乱している人、忘れている人、その他の理由でフォームやインタラクションを使用してミスをする人にも役立ちます。

安定・互換性

現在および将来のユーザーツールと互換性のあるコンテンツ

堅牢なコンテンツは、さまざまなブラウザ、支援技術、その他のユーザーエージェントに対応しています。これを実現するための例として、次のようなものがあります。

  • マークアップが確実に解釈されることを保証する(例えば、マークアップが有効であることを保証する)。
  • 非標準的なユーザーインターフェースコンポーネントの名前、役割、値の提供

この要件を満たすことで、支援技術を含む現在および将来のユーザーエージェントとの互換性を最大限に高めることができます。特に、支援技術がコンテンツを確実に処理したり、さまざまな方法でコンテンツを表示したり操作したりできるようになります。これには、非標準の(スクリプト化された)ボタン、入力フィールド、およびその他のコントロールが含まれます。

google 広告