frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

アクセシビリティを深める①ナビゲーション設計

スポンサードリンク

アクセシビリティについて何回かこのブログでも取り上げました。

frontendmemo.hatenablog.com

良書「デザイニングWebアクセシビリティ」の項目の問題と解決策を挙げていっただけなので今回からは各トッピクスによりクローズアップしていきたいと思います。

改めてアクセシビリティとは

一言でいうとどんな環境からもアクセスできるということです。

それは、障害者だけではなくキー操作を主とするユーザー、javascriptcssをoffにするユーザー、ネットの通信が遅く画像が読み込めない、または意図的に画像を読み込まないユーザー、それから昨今普及したタブレットスマートフォンなど多くの環境でも、同じ情報が得られることです。

ナビゲーション設計

ナビゲーションと一口に言っても何種類かパターンがあります。グローバルナビゲーション、ローカルナビゲーション、サブナビゲーション、検索(サイト内検索)、サイトマップパンくずリストなどです。

ナビゲーションのルール

各ページにおいてナビゲーションのルールがばらばらだとユーザーのストレスが増加する一つの原因になります。ナビゲーションの位置、順番、文言は各ページ統一させましょう。
しかし、あえて通常のナビゲーションルールが適用されないケースもあります。その理由とケースはとはどんなページでしょう。

その理由は、コンテンツに集中させるためナビゲーションによるページ遷移させないことになります。ページとしては、以下が例です。
TOP、問い合わせフォーム、sitemap、サイト内検索、404ページ、その他キャンペーンページなどもそのケースの一つでしょう。

サイトマップナビゲーションはどうあるべきか

サイトマップナビゲーションは、迷ったユーザーにとって大事なナビゲーションとなります。
しかし、わかりづらいサイトマップナビゲーションは逆効果になります。例えば、5階層以下を掲載すると情報量が多く目的のページを見つけづらくなります。
しかしグローバルナビゲーションのリンクだけを掲載してはサイトマップの意味がありません。また掲載順がナビゲーションの順番と異なっていたり、情報が古く更新されてないなどもユーザーを混乱させます。

共通ヘッダーのTOPナビゲーション

ユーザーが迷った時はTOPページに遷移したくなるものです。そのため共通のヘッダーの企業やブランドロゴにすぐTOPページに戻るためのリンクを設けることは重要です。
その際、望ましいaltに記載する代替えテキストは「企業名:ホーム、企業名:トップ」などTOPへ遷移することがわかるとよいでしょう。

検索ページの注意点

検索した際、該当ページが見つからなかった場合、それだけで終わらすにはあまりにも不親切なサイトとなってしまいます。
該当ページが見つからなかった場合もナビゲーションしてあげることが大切です。方法としては、検索の条件を変更できる機能や、同じような単語で検索した場合の結果を載せるとよいでしょう。
また、入力時のサジェスト機能はユーザーの助けになります。

参考:デザイニングWebアクセシビリティ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ