デザイナーが知るべきWebアクセシビリティ入門

過去にWebサイトを訪れて、サイトが使いにくかったり、何らかの問題が生じて不満を抱いた経験はありませんか? それは、そのWebサイトのWebGLがあなたの使用するブラウザをサポートしていないからかもしれません。またそのWebサイトがモバイルに対応しておらず、テキストが小さすぎたり、読めなかったりした可能性が考えられます。

UXの質とアクセシビリティの質は比例関係にあります。一般の人にとって使いづらいUXは、例えば障がいのある人にとってはより一層使いづらいものといえるでしょう。

たとえば、サイト上の文字が小さくてが読みづらいとしましょう。視覚障害のある人に至っては、読み辛いどころかまったく読めない可能性があります。そこで、文字サイズを大きくすると、すべてのユーザーの操作性とアクセシビリティが向上します。

このように、障害を持つユーザーの使いやすさを考慮するというのは、万人にとって扱いやすいデザインを作成するための基本中の基本であるといえるでしょう。

アクセシビリティの高いWebサイトとはつまり、障がいをもつ人々にとっても使いやすいWebサイトのことです。具体的には、視力、聴覚等に障がいを持つ人々に焦点を当てています。我々デザイナーは、操作しやすく、誰にでも分かりやすいオールマイティなウェブサイトを作成するよう努めなければなりません。

なぜWebサイトのアクセシビリティが重要なのか?

アクセシビリティについては、設計時に「便利にする」ことだけを考えれば良いと思われがちですが、これはUXの優れたWebサイトを作成するのには逆効果です。サイトのUXを向上させるデザインを計画する際は、障害者だけでなく、健常者にとっても使いやすいサイトづくりを心がけましょう。そうすることで、ユーザーのクレームや訴訟問題の回避にもつながります。

アクセシビリティにまつわるガイドライン

アクセシブルなWebサイトのデザインに対する数多くの懸念に対処するために、World Wide Web Consortiumは、アクセシビリティにまつわるガイドラインを設けました。このドキュメントは、WCAG(Web Content Accessibility Guidelines)と呼ばれ、アクセシビリティを、4つの原則に分類しています。デザインを行う際には、自らに次の4つの問いを投げかけてみましょう。

  • 知覚性:サイト上のコンテンツをさまざまな方法で使用できるか?
  • 作動性:複雑なインタラクションやマウス操作なしでも混乱せずにサイトの機能を利用できるか?
  • 明快さ:ユーザーはサイトのUIや機能、情報を理解できるか?
  • 柔軟性:さまざまな支援デバイス(ex. スクリーンリーダー)に対応しているか

AAAAAAAAA

これらの異なる原則のそれぞれは、AAA、またはAAAのいずれかの評価の達成率を左右します。アクセシブルなサイトの最小要件はA評価であり、AAA評価はアクセシビリティのゴールデンスタンダードです。難しく思うかもしれませんが、アクセシブルなウェブサイトの設計は、思うほど難しくはないのでご安心を。今回は、Webサイトのデザインのアクセシビリティを向上させるための実用的なコツをいくつかご紹介します。

1. タイポグラフィ

見出し設計における階層

見出しにおいて、階層ルール(hタグ)は非常に重要です。ユーザーが情報をすばやく解析する手助けとなるからです。

サイトの入れ子になっている各セクションは、一貫したタイプスタイル(通常は<h2>)で始めましょう。

Airbnbは一貫したタイポグラフィーの好例です。

見出しは、視覚的・機能的に正しいだけでなく、そのコピーもわかりやすくあることが大切です。これはSEO対策における良い習慣の一つであり、短期記憶が苦手な人や、視覚障害を持つ人のためのUXの改善にもつながります。

テキストの幅は日本語で一行40字以内

大量のテキストを見て、全て読む気が失せた経験はありませんか?これは、大量のテキストブロックは、集中し続けるのが難しく、読み切る前に疲れてしまうが故に起こることです。

幅の狭いテキストブロックなら、難読症者や、視覚障がい者の方でも読みやすくなります。WCAGでは、1行のテキストの文字数を英字80文字以下(日本語なら40文字以下)にすることを推奨しています。

ブルームバーグは、80文字ルールに厳密に沿っているサイトの好例です。

また、WCAGは、ユーザーが横にスクロールせずとも、サイトを200%拡大できるように、両端揃えのテキストの使用を避けるべきだとも伝えています。

色のコントラストははっきりと

テキストの色と背景色とのコントラストは、サイトの読みやすさに大きく影響します。WCAGは、AA評価を達成するためには、テキストのカラーが少なくとも4.51のコントラスト比を有するべきであり、AAA評価を達成するためには、71のコントラスト比をキープすべきであると述べています。

KKW Beautyのサイトは、テキストの色と背景色のコントラストが低く、読みにくい

前述のコントラスト比がよく理解できないという方もご安心を。スケッチプラグインChrome拡張機能を使えば、テキストのコントラスト比をテストし、デザインの成否を教えてくれます。

MOMAは、ユーザーにデフォルトのテキストと、ハイコントラストテキストのどちらかを選択できる仕様になっています

また、ユーザーが各々テキスの色と背景色を調整できる機能を与えることも重要です。MOMAのサイトでは、フッター内のリンクをクリックすることで、デフォルトと高コントラストのテキストを変更できるようになっています。

2. アセット

代替テキストとARIAラベル

アクセシブルなサイトの作成は、画像にalt属性をちょっと記述するだけでは不十分です。視覚障害者がスクリーンリーダーを利用して、画像の代替テキストを認識できるようにする必要があります。

また、Googleこの記事で良い代替テキストと悪い代替テキストの例を紹介しています。よろしければご参考にどうぞ。

Aldo Shoesは、画像とARIAラベルのalt-texに細心の注意を払っています

さらに、ARIAラベル(アクセシブルなインターネットアプリ)は、サイトに、ナビゲーション、フォーム、またはセクションなど「ランドマーク」を表示する必要があります。これにより、スクリーンリーダーが情報を解析しやすくなり、スクリーンリーダーにとって無関係な情報を隠すべきかどうかを定義することもできます。

alt属性とARIAラベルは開発者だけが気にすれば良いもので、自分の分野外だと思われがちですが、正しく設計を行うためにも、開発者と作業する際には、上記のを念頭に置いておくことが大切です。

テキストを含む画像を避ける

Well and Good は、画像とライブテキストのバランスが最適です

テキストを含む画像の使用はなるべく避けましょう。代わりに、ライブテキストを使用して、テキスト要素を画像上に配置し、CSSを使用してスタイルを設定するのがおすすめです。プル・クォート用の引用符等、装飾的なグラフィックとなるテキスト要素を使う際にも、この法則を覚えておくと便利です。

3. コンテンツ

できるだけシンプルに書く

コピーライティングは、サイトのUXの基本です。常にデザイナーがコピーライティングについて責任を負う義務があるわけではありませんが、できるだけコピーライターと協力し、より良い製品になるよう努めるべきでしょう。

▲より明確に書くツール、Hemingway Appをご覧ください

アクセシビリティを実現するためには、コピーライティングを考える際、できるだけ専門用語や珍しい言葉を使わないことです。特に、複雑な言葉を使って「賢そうなコピー」を書こうとしないでください。WCAGは、コピーライティングの際には、中等教育レベルのワードで書くことを推奨しています。そこでおすすめなのが、Hemingway Appような、自分の文章の読み易さを判断できるツールです。またこのツールは、あなたの文章をできる限りシンプルにするためのアドバイスも与えてくれます。

4. UI

一貫したナビゲーションとUIを設計する

Huromは明確なナビゲーションとUI要素が魅力的

ユーザーがあなたのウェブサイトの操作で迷うことがあるとすれば、それは非常に良くないことです。一般に良いとされるアクセシブルなデザインは、”予測可能なデザイン”です。サイト上のエレメントや、UI表示がページごとに異なるのはよろしくありません。ナビゲーション要素は、サイト上において、同じ順序で配置する必要があります。また機能要素も、ページごとに同じように動作する必要があります。

フォーカスステートを明確にする

▲YouTubeはフォーカスステートをわかりやすく表示しています

フォーカスステートとは、現在自分が操作している箇所の状態のことです。

全てのユーザーがマウスを使ってサイトを操作できるわけではありません。操作方法が限られているユーザーは、キーボードのタブで移動してサイトを操作したりすることもあります。そのような場合、ユーザーはマウスやトラックパッドを使用せずとも、自分がページ上のどこにいるかを認知できる必要があるでしょう。そこでフォーカスステートが需要になります。フォーカスステートが明確なことで、ユーザーは自分が操作している場所を正しく把握できます。

サイトの入力フィールド、ボタン、その他のインタラクティブな要素に、フォーカスステートを意識したデザインを施しましょう。

エラー表示はエラーの理由を明確に

Aesopは、エラーの説明が丁寧にされています

エラー表示は、単にエラーをわかりやすく提示するだけでなく、何が間違っていたか、エラーをどのように修正すべきかをユーザーに知らせる文章も必要です。

WCAGは、フォームを介して情報を送信する際に、可逆送信と確認画面によるユーザーエラーを防止することを推奨しています。

5. インタラクション

UIアニメーションの点滅を避ける

GQがニュースレターキャプチャに使用しているスライド式のアニメーションは、ユーザーの注目を集める良い例です

ユーザーの気が散るのを防ぐためにも、1秒間に3回以上点滅するUIアニメーションを作成しないようにしてください。さらにいえば、点滅するアニメーションはそもそも使わないのがベストです。

シンプルなジェスチャーを心がけよう

大事なコンテンツが、複雑なジェスチャーやインタラクションの背後に隠れてしまうことがないように気をつけましょう。操作が制限されているユーザーでも、きちんとウェブサイトのすべてのコンテンツにアクセスできるようにする必要があります。

まとめ

アクセシビリティは、デザイナー、開発者、コピーライターetc.全てのコンテンツ作成者のたゆまぬ努力によって実現します。製品をアクセシブルなものに仕上げるには、チームの全メンバーがこのガイドラインを念頭に置いた上で、協力することが必要不可欠です。

アクセシビリティの高いウェブサイトの作成は、非常に困難なことに思えるかもしれませんが、今回ご紹介したルールを守ることで、すべてのユーザーにとってより良いサイトを生み出すことが可能になります。ウェブアクセシビリティについてもっと詳しく知りたい方は、WCAGドキュメントWUHCAGのチェックリストAutomatticのチェックリストについての記事をチェックしてみてください。

(翻訳:Ayaka Takei)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ