レッスン6：アクセシビリティ——設計の前提としての到達可能性

このレッスンで学ぶこと

WCAG の 4 原則（知覚可能・操作可能・理解可能・堅牢）を説明できる
達成基準と適合レベルの考え方を理解する
色だけに頼らない情報伝達、キーボード操作、代替テキストの考え方を身につける
日本の規格と、民間事業者に関わる法制度の位置づけを正しく理解する

レッスン5では、画面を見せずに設計意図を言葉で伝える技法を学びました。このレッスンでは、レッスン1で示した中核メッセージの 5 つ目、「アクセシビリティは特別な配慮ではなく、設計の前提である」を掘り下げます。ここまでのレッスンで扱ってきた情報設計や仕様の書き方は、実はアクセシビリティと深いところでつながっています。構造がわかりやすく、意図が言葉で明確に示された設計は、多くの場合、そのままアクセシビリティの向上にもつながるからです。

アクセシビリティとは何か

アクセシビリティとは、年齢や身体的な状態、利用する環境にかかわらず、できるだけ多くの人がその情報やサービスに到達し、利用できる状態を指します。視覚や聴覚、運動機能に障害のある人だけを対象にした話ではありません。一時的に片手しか使えない状態、日差しの強い屋外で画面が見えにくい状態、周囲が騒がしく音声を聞き取れない状態など、誰にでも起こり得る一時的な制約も、アクセシビリティが扱う範囲に含まれます。

アクセシビリティを「特別な配慮」として、設計が一通り終わったあとに付け加える発想では、多くの場合、対応が中途半端になります。構造や仕様を決める最初の段階から、アクセシビリティを前提として組み込むことが、結果として手戻りの少ない進め方になります。

一時的な制約について、もう少し具体的に見てみましょう。片手に荷物を持っていて、もう片方の手だけで画面を操作しなければならない状況、電車の中で音声を出せず、画面の表示だけを頼りに操作しなければならない状況、慣れない言語環境で、聞き慣れない言葉の説明を読み解かなければならない状況。これらはいずれも、障害の有無にかかわらず、誰にでも起こり得る場面です。恒常的な状態を対象にした設計は、こうした一時的な制約を抱えた利用者にとっても、同じように助けになります。

💡 ポイント レッスン4で扱った、利用者の言葉に沿ったラベリングや、レッスン5で扱った、状態の変化を言葉で明示する設計は、視覚に頼らずに画面の状況を伝える際にも役立ちます。ここまでのレッスンで学んだ技法は、アクセシビリティの土台そのものでもあります。

WCAG とは

アクセシビリティを判断する際の代表的な国際的指針が、WCAG（Web Content Accessibility Guidelines）です。W3C（World Wide Web Consortium）という国際的な標準化団体が策定しています。最新のバージョンである WCAG 2.2 は、2023 年 10 月に W3C の勧告として公開されました。

WCAG は、次の 4 つの原則から構成されています。

知覚可能（Perceivable）：情報や画面の構成要素を、利用者が知覚できる形で提示する
操作可能（Operable）：画面の操作方法や機能を、利用者が操作できる形にする
理解可能（Understandable）：情報や操作方法を、利用者が理解できる形にする
堅牢（Robust）：さまざまな支援技術を含む、多様な環境で確実に動作する形にする

flowchart TD
    W[WCAG の 4 原則] --> P[知覚可能]
    W --> O[操作可能]
    W --> U[理解可能]
    W --> R[堅牢]
    P --> P1[代替テキストなど]
    O --> O1[キーボード操作など]
    U --> U1[わかりやすい説明など]
    R --> R1[支援技術との互換性]

この図は、WCAG の 4 原則と、それぞれに関わる代表的な観点の対応関係を示しています。4 つの原則は、それぞれ独立した基準ではなく、互いに補い合う関係にあります。情報が知覚できても、操作できなければ意味がありません。操作できても、理解できなければ、やはり目的を達成できません。4 つがそろって初めて、多様な利用者が到達できる設計になります。

達成基準と適合レベル

WCAG の 4 原則は、それぞれさらに具体的な達成基準へと分解されています。達成基準とは、「この基準を満たしているかどうか」を、比較的客観的に判定できる形で示した個別の要件です。

達成基準には、適合レベルという段階があります。レベルは A・AA・AAA の 3 段階で構成され、A が最も基本的な水準、AAA が最も高い水準を示します。多くの組織では、基本的な到達可能性を確保しつつ現実的に対応できる水準として、レベル AA を目標に設定することが一般的です。

すべての達成基準を暗記する必要はありません。実務で重要なのは、4 つの原則という大きな枠組みを理解したうえで、個別の達成基準は、設計や実装の判断が必要になった際に、都度 W3C の公式資料などで確認する姿勢です。

具体的にどのような要件が達成基準として定められているのか、代表的なものを原則ごとに紹介します。

原則	代表的な達成基準の例
知覚可能	画像に代替テキストを用意する。文字と背景の間に十分なコントラスト比を確保する
操作可能	すべての機能をキーボードだけで操作できるようにする。利用者が読み終えるまでの時間を制限しすぎない
理解可能	使用している言語を明示する。入力欄で誤りがあった場合、原因と対処法を伝える
堅牢	支援技術が正しく認識できるよう、意味に沿った構造で情報を組み立てる

このように、達成基準は抽象的な理念ではなく、具体的に確認できる要件として定められています。自分たちの設計がどの達成基準に関わるのかを都度確認する習慣を持つことで、原則を実務の判断に落とし込みやすくなります。

色だけに頼らない情報伝達

知覚可能の原則に関わる代表的な観点が、色だけに頼らない情報伝達です。「エラーの項目は赤色で表示する」という設計だけでは、赤色と緑色の区別がつきにくい利用者や、そもそも色を認識できない利用者にとって、エラーがどこにあるのかがわかりません。

色に加えて、形やアイコン、文字による説明を組み合わせることで、色を認識できない利用者にも情報が伝わるようになります。例えば、エラーの項目には赤色の枠を付けるだけでなく、項目の近くに注意を示す記号と、具体的な文章による説明を添えます。こうすることで、色を手がかりにする利用者にも、色を手がかりにできない利用者にも、同じ情報が届きます。

コントラスト比、つまり文字の色と背景の色の明るさの差についても、基準値が定められています。文字が背景に対して十分な明るさの差を持たないと、視力の弱い利用者や、明るい場所で画面を見る利用者にとって、文字が読み取りにくくなります。具体的な数値基準は、達成基準として WCAG に定められており、通常サイズの文字とそれより大きな文字とで、求められる基準が分けられています。

⚠️ 注意 コントラスト比の確認は、感覚だけに頼らず、明るさの差を数値として算出して判断します。似たような色合いに見えても、実際に測定すると基準を満たしていない組み合わせは少なくありません。

キーボード操作

操作可能の原則に関わる代表的な観点が、キーボードだけで操作を完結できる設計です。マウスやタッチ操作を前提にした設計は、手や腕の動きに制約のある利用者や、視覚に障害があり画面を見ずに操作する利用者にとって、大きな障壁になります。

キーボードだけで操作するとは、次のような操作がすべてキーボードのキー操作だけで行えることを指します。

画面内の要素を順番に移動する
選択した要素を実行する（ボタンを押す、リンクを開くなど）
入力欄に文字を入力する
一覧やメニューの中を移動する

キーボード操作に対応する際、特に注意したいのが、いま画面のどこに焦点が当たっているかを、利用者が視覚的に確認できるようにすることです。焦点の位置がわからないまま操作を進めると、利用者は自分がいまどこを操作しようとしているのかを見失ってしまいます。

📝 補足 キーボード操作への対応は、身体的な制約がある利用者だけの話ではありません。マウスに手を伸ばすよりもキーボードで手早く操作したい利用者や、片手がふさがっている状況の利用者にとっても、キーボード操作ができる設計は助けになります。

代替テキスト

知覚可能の原則に関わるもう 1 つの重要な観点が、代替テキストです。画像や図として提示されている情報を、目で見ることができない利用者にも伝えるために、その内容を文章で説明したものを指します。

代替テキストを適切に用意することは、スクリーンリーダーと呼ばれる支援技術を使う利用者にとって、特に重要です。スクリーンリーダーは、画面上の文字情報を音声で読み上げるソフトウェアです。画像そのものは読み上げられないため、代替テキストが用意されていない画像は、スクリーンリーダーの利用者にとって「何が表示されているかわからないもの」として扱われてしまいます。

代替テキストを書く際は、画像の見た目をそのまま説明するのではなく、その画像が画面の中でどのような役割を果たしているかを説明します。装飾のためだけに置かれた画像であれば、代替テキストを空にして、読み上げの対象から除く判断も必要です。すべての画像に一律で長い説明を付けることが、必ずしも親切とは限りません。

見出しの階層構造を、意味に沿って正しく組み立てることも、同じ考え方の延長にあります。見た目の大きさだけで大見出しや小見出しを決めるのではなく、内容のまとまりを示す構造として一貫させることを、意味づけを伴った、つまりセマンティックな構造と呼びます。この構造が整っていると、スクリーンリーダーの利用者は、見出しを目印にして、必要な範囲まで読み飛ばすことができます。

支援技術の存在

ここまでに登場したスクリーンリーダーのほかにも、多様な支援技術が存在します。音声で文字を入力する技術、視線の動きで操作する技術、画面を拡大して表示する技術など、利用者の状態や好みに応じて、さまざまな支援技術が使われています。

設計者や実装者は、こうした支援技術のすべてを個別に把握している必要はありません。大切なのは、WCAG の 4 原則、特に堅牢という原則が示すとおり、標準的な構造や記法に沿って設計・実装することで、多様な支援技術が正しく情報を認識できる状態を保つという考え方です。独自の作り込みに頼りすぎた設計は、見た目こそ整っていても、支援技術がうまく情報を認識できないことがあります。

🔰 初学者の方へ 支援技術の種類や使い方をすべて覚える必要はありません。まずは「自分がいま設計しているものは、多様な支援技術を使う利用者にも到達可能だろうか」と、一呼吸置いて考える習慣から始めてみましょう。

アクセシビリティ対応の始め方

ここまで多くの観点を紹介してきましたが、初めて取り組む際は、どこから手をつければよいか迷うかもしれません。すべてを一度に完璧にしようとするのではなく、影響の大きい観点から段階的に取り組む進め方が現実的です。

まず取り組みやすいのは、見出しの構造を意味に沿って整えることと、画像に代替テキストを用意することです。この 2 つは、既存の画面を大きく作り直さなくても着手でき、支援技術の利用者にとって効果が大きい対応です。次の段階として、コントラスト比の確認と、色だけに頼っていない表示への見直しに取り組みます。これも、配色を大きく変更せずに部分的な調整で対応できることが多い観点です。

キーボード操作への対応は、比較的手間のかかる取り組みです。既存の画面の作りによっては、構造そのものを見直す必要が生じる場合もあります。優先順位としては後回しにせざるを得ないこともありますが、新しく作る画面については、最初の設計段階からキーボード操作を前提に組み込んでおくことで、あとからの手戻りを避けられます。

📖 もっと詳しく 自分たちの画面がどの程度アクセシビリティに配慮できているかを確かめる方法の 1 つに、実際にキーボードだけで一通りの操作を試してみる、あるいはスクリーンリーダーを使って画面を読み上げさせてみるという、簡易的な自己点検があります。専門的な診断ツールを使わなくても、こうした簡易点検だけで見つかる問題は少なくありません。

日本の規格と法制度における位置づけ

アクセシビリティに関する日本の工業規格として、JIS X 8341-3 があります。現行の規格は JIS X 8341-3:2016 で、2016 年 3 月に改正されました。この規格は、WCAG の考え方を踏まえて、日本語の表記も含めた形で整備されています。

法制度の面では、障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）の改正により、2024 年 4 月 1 日から、民間事業者による合理的配慮の提供が法的義務となりました。合理的配慮とは、障害のある人から社会的な障壁を取り除いてほしいという意思が伝えられた際に、負担が重すぎない範囲で、必要かつ合理的な対応を行うことを指します。

ここで、正確に理解しておきたい点があります。合理的配慮の提供が法的義務になったことと、ウェブサイトのアクセシビリティ対応そのものが法的に義務づけられたことは、同じではありません。合理的配慮は、個別の場面で申し出があった際の対応を求める仕組みであり、すべてのウェブサイトに一律の技術基準への適合を義務づける制度ではありません。

とはいえ、あらかじめアクセシビリティに配慮した設計をしておくことは、個別の申し出への対応の負担を減らし、より多くの利用者が支障なく利用できる状態を実現します。義務かどうかという最低限の線引きにとどまらず、設計の前提としてアクセシビリティを組み込む姿勢が、本コースが一貫して伝えたい考え方です。

⚠️ 注意 法制度の解釈には専門的な判断が必要な場面があります。具体的な対応を検討する際は、内閣府など公的機関が公開している資料を確認し、必要に応じて専門家に相談することをおすすめします。

講師の現場メモ：規格を読む力が仕事になった話

私が Web 制作会社でディレクターをしていた頃、自治体や大学、金融機関のサイトリニューアルを担当する機会が多くありました。これらの案件では、必ずと言ってよいほど、アクセシビリティに関する要件が仕様書に含まれていました。最初のうちは、正直なところ、規格の文書を読むこと自体に苦手意識がありました。専門用語が多く、達成基準の一覧を眺めても、実際の画面のどこに当てはめればよいのか、ぴんとこなかったのです。

転機になったのは、ある案件で、規格の担当箇所を自分の言葉で噛み砕き、実装チーム向けの資料に書き直す作業を任されたときでした。達成基準をそのまま転記するのではなく、「この基準は、要するに、色だけで情報を区別していないかという話です」というように、自分なりの言い換えを添えながら資料を作りました。すると、実装チームからの質問が驚くほど減りました。規格の原文だけでは伝わらなかった意図が、噛み砕いた言葉によって、初めて実務の判断に落とし込めるようになったのです。

この経験を通じて気づいたのは、アクセシビリティの規格は、暗記して従うものではなく、読み解いて自分たちの現場の言葉に翻訳するものだということです。公共性の高い案件を重ねる中で、規格を読み、翻訳し、実装者や関係者に伝えるという役割は、次第に私自身の専門性の 1 つになっていきました。いまでも新しい案件に取り組む際は、規格の原文に立ち返り、自分たちの状況に照らして読み直す作業を欠かしません。

まとめ

このレッスンでは、以下のことを学びました。

アクセシビリティは、年齢や身体的な状態、利用する環境にかかわらず、多様な利用者が到達し利用できる状態を指す
WCAG は、知覚可能・操作可能・理解可能・堅牢という 4 つの原則で構成される
達成基準には A・AA・AAA という 3 段階の適合レベルがある
色だけに頼らない情報伝達、キーボード操作、代替テキストは、いずれも設計の前提として組み込むべき観点である
日本の規格は JIS X 8341-3:2016 であり、2024 年 4 月からは民間事業者の合理的配慮の提供が法的義務となったが、これはウェブアクセシビリティ対応そのものの義務化とは異なる

次のレッスンでは、視点をさらに広げ、画面の内側だけでなく、その裏側にある業務や仕組みまで含めて設計する「サービスブループリント」を扱います。

確認クイズ

このレッスンの理解度をチェックしましょう。