Webアクセシビリティ勉強会

ページのレイアウトと一貫性

ぺーぞのレイアウトを工夫すると、多様なユーザが必要なコンテンツにたどり着きやすくなる。また、一貫性を持たせることでユーザがページの内容を理解しやすくなる。それではよくある事例で課題を見ていく。

ページレイアウトが視覚的特徴のみで構成されている。

例えば、領域の違いを背景色でい表現したり、区切りを余白のみで表現する場合である。このような場合、ロービジョンのユーザは領域を区別できなくなったり、領域を認識できなくなる。ユーザはページの領域を認識できないとタスクを完了するのに時間がかかったり、必要な部分に気づくことができず、タスクを完了できなかったりする。

改善策1 -見出しを利用してページの領域に到達しやすくする-

以下のように見出しをつけるとこの事例を解決することができる。

<div>
    <h2>
    （本のタイトル）</h2>
    <button>
    購入する</button>
    <button>
    お気に入りに登録する</button>
</div>
>

（本のタイトル）

こうすることで、見出しを手掛かりに領域の区切りを認識したり、ページ内検索を利用して必要な領域に到達することができる。また、次のように見出しを後につけてはならない。スクリーンリーダを利用するユーザは見出しにジャンプした後に見出し直後のコンテンツから読み始めるため、コンテンツを読み飛ばしてしまう。

<div>
    <button>
    購入する</button>
    <button>
    お気に入りに登録する</button>
    <h2>
    （本のタイトル）</h2>
</div>
>

（本のタイトル）

ページがランドマークで適切に分割されていない

HTMLにはページ全体を大まかな領域に分割するランドマークの役割を持つ要素がある。ランドマークには以下のものがある。

これらの要素にスクリーンリーダが当たると、以下のような挙動をする。

ランドマークは適切なマークアップがされていて初めて意味を持つ。そのため、製作者は気を配りながらマークアップを行う必要がある。

改善策 -ランドマークを利用してページの領域に到達しやすくする-

ランドマークを配置するときには以下の点に注意する。

ページレイアウトが一貫していない

複数のページでレイアウトが一貫していないと、ユーザは混乱する。例えば、ウェブページに慣れていないユーザはページのどこに何があるかを学習するのに時間がかかる。また、画面を拡大しているロービジョンのユーザは所望のコンテンツが上下左右どちらにあるのかを予想して画面の拡大範囲を変更する。そのため、予想が外れるとコンテンツを見つけるのに時間がかかったり、見つけることができなかったりする。ページのレイアウトは視覚的に一貫しているだけでなく、構造的にも一貫している必要がある。HTMLのタグの種類や順序で理解のしやすさが変わる。

改善策 -ページのレイアウトを共通化させる-

複数のページで繰り返される要素は一定のルールに従って配置する。例えば、ロゴはヘッダの左側、検索欄はヘッダの右側、大見出しはヘッダの直後といったようにする。また、DOMの種類や、順序も一貫させる必要がある。詳しくは第六章のデザインシステムを参照してほしい。

コンポーネントが一貫していない

同じ機能に対して異なるラベルがついていることがある。「ログイン」と「サインイン」、「トップページ」と「ポータル」などである。また、ラベルの表記ゆれもある。また、同じ機能に異なるアイコンが使われていたり、代替テキストが一貫していないこともある。

改善策 -ページのコンポーネントを共通化する-

複数のページで繰り返し現れるコンポーネントは共通化する。また、ライティングルールや、コンポーネントの使い方などを文書化するのもいい。有名な方法としてインターフェースインベントリというものがある。詳しくはインターフェースインベントリの解説サイトで確認してほしい。この方法によって、似た指定をまとめ上げて、冗長なバリエーションを削減できる。

現在位置が分からない

複数のページで構成されたサイトやアプリケーション内で、現在位置を把握する手段がない場合、ユーザはどこにいるのか分からなくなる。

改善策 -現在位置を把握する手段を設ける-

現在地を示す方法として、以下のものがある。