アクセシビリティの高いナビゲーションとは何か。4つの方法と事例

アクセシビリティとは、アクセスが簡単であることを意味します。Webでは、高齢者や障害を抱えた人でも問題なく利用できることを指して使われる言葉です。

今回は、アクセシビリティを意識した使いやすいナビゲーション設計について考えてみました。

なぜアクセシビリティを高めるのか

Webサイトはどのような人でも使えるべきものであり、障害のある人でも使うときに不自由しない設計を考慮すべきです。キーボードのみでアクセスしていることも考えられます。設計を考える段階で、考慮すべきことはほかにもあります。私たちデザイナーが、問題に対して最善を尽くすことはアクセシビリティを向上させます。

デザイナーが留意するべきポイントは次の3つ。

1. 視認性を高める
2. 誰でも理解できるようにする
3. ページ内の移動を速やかにする

本を月額で郵送してくれるNYサービス『Book of the Month』のナビゲーションを参考にみてみましょう。

トップページは白地に黒い文字が記されていて視認性が高いですね。
さらに、簡潔な説明文をインターフェイスの要所要所に入れています。

ナビゲーションのアクセシビリティを高める4つの方法

1. スキップリンクを使う

アクセシビリティに大切な3つのポイントのうち、「ページ内の移動を速やかにする」を叶えるのがナビゲーションです。

可能であれば、無関係なコンテンツや冗長なコンテンツをスキップする機能があれば望ましいでしょう。最も簡単でよく見かける方法は、ヘッダーからコンバージョンリンクに移動させるのに、優先度の低いコンテンツをスキップするリンクを設置する施策です。
この機能がない場合、ユーザーは求めていない情報を繰り返し受け取り、目的の情報に行き着くまで時間がかかってしまいます。

ユーザーにストレスを与えないためにも、この方法は有効です。Airbnbでは、タブ移動を行うと「Skip to Content」のリンクが表示されるようになっています。

メインコンテンツへの移動、フッターへの移動、記事内からナビゲーションバーや検索バーへの移動など、あらゆるページ内アクセスを簡単にしています。

2. 障害がある人のための、メニュー改善

障害がある人へ最適化した代替ナビゲーションを作りましょう。視覚に障害のある人は画面上のアイコンを識別できないので、キーボードからアクセスできるメニューを作らなければなりません。設計段階で、どのような情報をユーザーに伝えればアクセスしてもらえるかを考える必要があります。

Facebookのアクセシビリティメニューの場合、ページ間の移動をドロップダウンを形式で選べるようになっており、メニューを読み上げてくれます。

3. ショートカットキーを取り入れる

ショートカットキーは、視力の低い人や作業を効率化させたい人の支えになります。

Twitterには、ショットカットが沢山用意されていいます。
たとえば、「 j 」 キーや、 「 k 」　キーがリンクを行き交うタブキーのように動作します。これによって、キーボードのみでツイートを行き来することができるようになります。

ほかにも、必要ない情報をスキップしたり、必要に応じてコンテンツの詳細を表示することのできる簡単でスマートな方法です。Twitterでは、「ctrl + opt + 数字」 で、ページを移動できます。

Facebookでもショートカットを使用できます。「opt + 数字 」を押せば、どこからでもナビゲーションにアクセスできます。これによって、タブキーを繰り返し押すことも再読込を行うこともなく、ページの上部まで戻れます。

TwitterとFacebookは、アクセシビリティへの取り組みを促進させています。

4. 読み上げ機能がちゃんと機能する構造に

近頃普及している主なデバイスには、読み上げ機能（VoiceOver）をはじめとしたスクリーンリーダーが標準搭載されています。読み上げ機能を有効化すると、コンテンツにアクセスするためのショートカットと、動作を指定するショートカットが作成されます。ユーザー何にフォーカスした要素を読み上げて説明します。

構造が適切なものであれば、ユーザーは読み上げ機能を活用して自分の求めたコンテンツまでアクセスできます。もし、あなたがスクリーンリーダーの振る舞いに慣れていないのであれば、有効化してお気に入りのWebサイトを回遊してみることをおすすめします。
普段から当然のように行っている商品の注文やページの移動を、マウスやトラックパッドを使わずに行うとストレスを感じることが伝わるのではないでしょうか？

障害のあるユーザーにとって、スクリーンリーダーはブラウザを閲覧する上で重要な役目を果たします。フォームの入力、商品の購入、コンテンツの位置や内容をスクリーンリーダーを通して理解します。

さらに読み上げ機能の最も便利な機能としてローラー機能があります。
ローラー機能を使うと、見出しや記事、リンク、フォームコントロール、ランドマークへ簡単にアクセスできます。

まとめ

デザイナーは一般ユーザーだけでなく、障害のある人でも使いやすいアーキテクチャを設計することが望ましいです。
今回紹介した補助機能、キーボードショートカット、ローラー機能をサイトに取り入れることは、すべてのユーザーにとって使いやすい体験を提供することにつながります。

音声アシスタント機能を搭載した端末が徐々に普及されているいま、一般ユーザーであってもアクセシビリティの効果を実感する機会が増えるのではないでしょうか。
音声アシスタントについては、こちらの記事も参考にご覧ください。