検索/障がいのある人も含め、だれでも読んで使えるWebの文章を作る(アクセシビリティ)

障がいのある人も含め、だれでも読んで使えるWebの文章を作る(アクセシビリティ)

多くの人が読むWebページや文書、動画を作る時に使う。読む人がつまずく所を先に考え、やさしい言葉、分かりやすい見出しとリンク、画像の説明文、字幕と文字起こしを整え、最後にキーボード操作と実際の読者で試す。

このAIルールを使うには
## 書く前に、言葉・目や耳・端末の違いでつまずく所を考える 下書きを始める前に、メッセージの受け取りやタスクの完了を妨げうる条件を特定する。次のような違いを考慮する。 - 言語の習熟度と読解力 - 主題や技術への慣れ - 視覚、聴覚、認知、運動機能 - 端末の大きさ、接続品質、メディアの欠落 - 利用できる時間、注意力、ストレス 想定した一人の利用者を標準にしない。コンテンツの設計・開発を通してアクセシビリティを確認し、重大な障壁をチームで解決できない場合は、適切な専門家に加わってもらう。 ## なじみのない言葉は説明し、短い文でやさしく書く 要点を直接伝える。必要な意味を保ちながら、なじみのある語、短い文、焦点の定まった段落を使う。 一般になじみのない科学、法律、技術の用語は、最初に出てくる場所で定義する。製品、サービス、手順の名称は、略語を導入する前に正式名称を書く。多数の定義が必要な場合は、読者が主な説明から何度も離れずに済むよう、追加の参照経路として用語集を用意する。 一部の読者を排除したり混乱させたりする可能性がある場合は、慣用句や文化に依存する表現を避ける。可読性評価ツールは診断の手掛かりとして使い、その結果を人によるレビューと対象読者を代表する人々によって確認する。 ## 補足の説明は、説明する文や画像のすぐそばに置く 不可欠な補足は、その補足が説明する文、操作要素、視覚要素のそばに置く。追加情報によって本筋が途切れる場合は、近くに置いた定義、分かりやすいラベルのリンク、ツールチップを使う。 読む状況に応じて方法を選ぶ。大きな画面では使える参照方法でも、狭い画面や支援技術では、見つけにくく理解しにくいことがある。現在の手順を理解するために必要な情報から読者を引き離す参照方法に頼らない。 ## どの画面でも流し読みできるよう、見出しで短く区切る 全文を読まなくても目的と要点が分かるよう、正確なページタイトルと見出しを使う。長い文章は、短くまとまりのあるセクションに分ける。 関連する段落を、考えの流れが明確になるようにつなげる。文の長さに変化を付けるのは、理解を助ける場合に限る。長さや構造のために行動、条件、結論が見えにくくなる場合は、文を分ける。 広い幅だけでなく狭い幅でもページを確認する。流し読みのしやすさは、デスクトップの余白に依存させず、レスポンシブレイアウトの変化後も維持しなければならない。 ## 画像やグラフに、代わりになる説明文(alt text)を付ける 画像、グラフ、アイコンなどの視覚要素ごとに、情報を伝えるもの、既存情報と重複するもの、装飾用のもののどれに当たるか判断する。 - 情報を伝える視覚要素には、その文脈で必要な情報を伝えるalt textを付ける。 - 同等のテキストがすぐ近くにある場合は、空のalt textである `alt=""` を使う。 - 支援技術に無視させる装飾用の視覚要素には、空のalt textを使う。 - alt textを「画像」などの種類を示す語から始めない。支援技術が要素の種類をすでに識別するためである。 読者に見える文脈が必要な場合はキャプションを付け、その書式を統一する。視覚要素は説明の近くに置く。重要な専門表現やデータを画像の中だけに置かず、アクセシブルなテキストまたはデータ形式の代替も用意する。 ## 行き先が分かるリンクの文を書く 周囲の段落なしで読んでも意味が分かる程度に、リンクテキストを具体的にする。曖昧な指示ではなく、リンク先または実行される操作を示す。 リンクによって別の形式が開く、ダウンロードが始まる、または異なる種類の操作環境へ移る場合は、そのことを読者に伝える。リンクテキストの語調を、ほかのコンテンツと揃える。 大規模な情報空間では、必要に応じて、説明的なページタイトル、目次、ページ間リンク、検索、サイトマップなど、実用的な経路を複数用意する。各経路のラベルは、その先にある内容を正確に予告するものにする。 ## 見出し・フォーム・言語を、読み上げなどの支援技術に伝わる形にする 意味構造を持つ見出し、ラベル、関係、指示を使い、視覚的に示される構成と同じものを支援技術でも提示できるようにする。フォームでは、ラベル、要件、エラー、指示をプログラムから取得できる形で示さなければならない。 文書の主要言語は、`lang="en"` などの適切な言語属性で宣言し、途中で言語が切り替わる箇所にも印を付ける。これにより、発音支援ツールや翻訳ツールがテキストを正しく解釈できる。 構造や必要な操作を伝える唯一の手段として、視覚上の位置、色、スタイルだけを使わない。 ## 動画や音声に、字幕と文字起こしを付ける 字幕を、話された内容や意味のある音と同期させる。字幕は逐語的でなく簡潔でもよいが、メッセージを維持しなければならない。 話された言葉、重要な画面上のテキスト、重要な視覚情報の説明を含む文字起こしを用意する。関連するメディアの近くからリンクする。 重要な情報が視覚的に示され、音声ではほかに得られない場合は、音声解説を用意する。キーボードや支援技術を使う人が、字幕と再生のコントロールを利用できるプレーヤーを使う。 ## 仕上げに、キーボード操作と実際の読者で試して直す 完成したコンテンツを複数の経路で確認する。 1. タイトル、見出し、リンクだけを流し読みし、構造とリンク先が明確か確認する。 2. キーボードと支援技術で移動し、コントロール、ラベル、状態、フォームの指示が意味の分かる形で読み上げられるか確認する。 3. 狭い画面と拡大した文字を使い、欠け、混雑、読む順序の崩れを見つける。 4. 画像、音声、動画を無効にするか省き、重要な情報を引き続き取得できるか確認する。 5. 対象読者を代表する人に、情報を見つけて目的のタスクを完了してもらう。 障壁を記録し、原因となったコンテンツまたは構造を直して、影響を受けた確認を繰り返す。ツールのスコアだけでは、体験がアクセシブルである証拠にはならない。