ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その２・情報設計編）

2023年3月12日 20:25

この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その１）」の続きです。

ウェブサイトの情報設計は、大きく分けて「サイト全体での設計」と「ページ単位での設計」の２つがあるかと思いますが、ここでは後者の「ページ単位での情報設計」を対象にしています。

私の会社では主にワイヤーフレーム制作のフェーズがここに該当します。
サイト全体で共通する構造・パーツに関するチェックが基本であまり項目数は多くありませんが、一部デザイン時に影響を与える要素についてはこの段階でチェックしておくのが望ましいです。

ナビゲーションがサイト全体で一貫性のある見た目・レイアウトになっている

同じ機能を持ち、サイト内で繰り返し利用されるコンテンツを同じ順序で提示することで、ユーザが迷わないようにする。

グローバルナビゲーションやフッターリンクのほか、トップページへ移動するリンクや、ページの上端へ移動するリンクなども同様。

同じ機能のUIには同じラベル・説明が付与されている

サイト全体で共通の機能を有するUIは同じ名前にすることでユーザがそれらの機能を利用しやすくする。

複数の種類の情報を含む画面においては、情報の区切りに見出しを配置する

セクションの区切りには明確な見出しを配置する。
見出しのない長いコンテンツは、全体の概略を把握するために時間を要したり困難になる。
ユーザーによってはページの内容を理解できないままサイトが利用不能になってしまうため、コンテンツ量が多い、または１ページで多様なコンテンツを扱う場合は見出しによるセクショニングが行われている必要がある。

コンテンツに到達できる手段がある

サイトマップ、サイト内検索、パンくずリンク、グロナビ、メニューリンクなどから２つ以上を実装し、ユーザーがサイト内の全てのコンテンツに到達できるようにする。

パンくずリストがある

集中力が長く持たない利用者がウェブサイト中で自分の現在位置を確認することができ、関連する情報にアクセスしやすくする。

リンクテキストに「もっと見る（more）」や「詳細を見る（detail）」は使わない

スクリーンリーダーにはページの内容をすばやく理解するためにページ内のリンクテキストだけを読み上げる機能を持つものがあり、そういった機能を利用した際にリンク先の内容が正しく理解できるようにしなければならない。

「もっと見る（more）」や「詳細を見る（detail）」は、それだけではリンク先の内容がわからないため避ける。
「続きを見る」は、その直前の要素や、リンクを含む一連の要素との組み合わせでリンク先が類推できる場合はOK。

関連項目：2.4.4（A）、2.4.9（AAA）

ポップアップや別タブが開くリンクはそのことを明示している

別タブや別ウィンドウが開くと、一部のユーザは現在地を見失い、元のページに戻ることができなくなってしまうことがある。
別タブや別ウィンドウ、別のアプリケーションに遷移するリンクには、必ずその旨を明らかにする必要がある。

リンクテキストに「（別タブが開きます）」を付与する
アイコンの場合はアイコンの代替テキストに「別タブが開きます」と入れる

関連項目：3.2.5 要求による変化（AAA）

自動的なコンテンツの切り替えをおこなわない

ユーザーの操作なしに動き続けるコンテンツは、ユーザーの注意や認識を妨げる場合がある。

以下に該当するコンテンツがある場合、それらはユーザーが非表示・停止・一時停止できるUIおよび機能を設けなければならない

動き、点滅、スクロールのあるコンテンツ

自動で開始し
５秒以上継続し
他のコンテンツと並行して表示される場合

自動更新するコンテンツ（カルーセルなど）

自動で開始し
他のコンテンツと並行して表示される場合

時間制限のあるコンテンツは設けない

認知機能に問題のあるユーザーは、プロセスを完了するために長い時間や休憩を要する場合がある。
そういったユーザーもプロセスを適切に完了できるようにしなければならない。