Korea Platform
System
お問い合わせ

アクセシビリティガイド

誰もが使える画面、アクセシビリティは企画から

企画、デザイン、開発、運用の各段階で、Webアクセシビリティに配慮する方法をまとめます。

このガイドの内容

アクセシビリティは、開発が終わってからチェックリストで確認する項目だと思われがちです。しかし、画面構成とコンテンツが決まったあとで直すと、変更すべき箇所が多くなります。誰がどのような環境でサービスを使うのかを企画の段階で整理しておけば、デザインと開発が同じ基準で進められます。

スクリーンリーダーとキーボードでWebサイトを使ってみる視覚障害のある方と、そばで意見を記録する専門家

01. まず利用環境を幅広く想定します

マウスを使わずキーボードだけで操作する人、スクリーンリーダーで内容を聞く人、文字を拡大して見る人、明るい屋外でスマートフォンを見る人まで、実際の利用場面を思い浮かべます。高齢者や、けがをしたり荷物を持っていたりして一時的に手が使いにくい人のことも念頭に置きます。

案件の要件や発注機関の基準にアクセシビリティの項目が含まれているかを、初期の段階で確認します。適用する基準と検収方法が決まれば、その後の段階の作業範囲もはっきりします。

整理する項目

  • 主な利用者と利用環境(機器・支援技術)
  • 適用するアクセシビリティ基準と検収方法
  • 申し込み・決済・照会のように最後まで完了させる必要がある主要な流れ

02. まず構造とコンテンツが読み取れることが大切です

見出しの階層、リストと表の構造、リンクの文言が、画面を見なくても理解できるように整理します。「詳しく見る」のような同じ文言が繰り返されると、スクリーンリーダーで聞いたときに、どこへ移動するリンクなのかがわかりにくくなります。

情報を伝える画像は代替テキストで内容を説明し、装飾用の画像はスクリーンリーダーが読み飛ばすようにします。ダウンロードする文書や動画のように本文とは別に提供する資料についても、内容を確認できる手段を用意します。

整理する項目

  • 見出しの階層とページの構造
  • 移動先がわかるリンク・ボタンの文言
  • 情報を伝える画像の代替テキストと装飾用画像の区別

03. デザインの段階で基準を決めます

文字と背景のコントラスト、文字の大きさと行間、押しやすいボタンの大きさをデザインの基準に含めます。エラーや必須項目のような重要な情報は、色だけで区別せず、文言や記号を併用します。

キーボードで操作するときに現在位置を示すフォーカス表示も、デザインの対象です。標準の表示を消して代わりの表示を用意しないと、キーボードで操作する人は自分がどこにいるのかわからなくなるため、サービスに合った表示方法を最初から決めておきます。

04. 自動チェックと手動での確認をあわせて行います

自動チェックツールは、代替テキストの抜けやコントラスト不足のように、ルールで見つけられる問題をすばやく知らせてくれます。ただし、代替テキストが内容に合っているか、移動の順序が自然かどうかは、人の目で確認する必要があります。

キーボードだけで主要な流れを最後まで進めてみて、スクリーンリーダーで主なページを聞いてみます。ブラウザーや機器ごとの違い、画面の拡大、モバイル環境も検収の範囲に含めます。

整理する項目

  • キーボードだけでメニュー・フォーム・ポップアップを使う
  • スクリーンリーダーで主なページを聞く
  • 画面拡大・モバイル・複数のブラウザーでの表示

05. 運用しながらも維持できるようにします

リリース時に基準を満たしていても、新しい投稿や画像が増えるにつれて、アクセシビリティは再び低下することがあります。コンテンツの担当者が代替テキストと見出しの構造を入力できるよう、管理画面と登録の手引きを用意します。

機能を追加したりデザインを変更したりするときに確認する項目を、定期点検に含めます。利用者が不便を伝えられる連絡経路を設け、寄せられた意見を改善項目として管理します。

ご相談の前には、これだけご準備いただければ十分です。

以下の内容を整理しておくと、初期の打ち合わせで範囲をより早くすり合わせられます。すべてそろっていなくても、現在の状況からご相談いただけます。

  • 主な利用者と利用環境
  • 適用するアクセシビリティ基準と検収方法
  • コントラスト・文字の大きさ・フォーカス表示のデザイン基準
  • キーボード・スクリーンリーダーで確認する範囲
  • コンテンツ登録の手引きと定期点検の担当者

KPSプロジェクトガイド · 具体的な技術構成と適用条件は、要件によって異なります。

今の課題を整理してみませんか。

アイデアの段階から運用まで、KPSが一緒に考えます。