第4回:ユーザーが多様であるという気づき | わたしたちの“ウェブアクセシビリティ”を考える

BACK

2025.03.26

執筆者 : 萩原俊矢

イラスト。もやもやとしたオレンジ色の背景の上に、ノートパソコンが描かれている。ディスプレイにはZOOM通話画面があり8人の人物が映っている。話す人、腕を組む人、考えごとをする人、カメラをオフにする人などが描かれている。

このレポートでは、複雑で多様化する現代のユーザー環境と、ウェブサイト制作のプロセスを見つめ直しながら、ウェブアクセシビリティの“いま”を捉え直します。

全5回を通じて、ウェブサイトづくりのこれからや、わたしたち一人ひとりができることを探ります。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. (この記事) 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける

ユーザーの感想は気づきをもたらす

イラスト。左上に描かれたきれいな球体の中に『DESIGN』の文字がある。球体から伸びた矢印の先に、さまざまな漫画の吹き出しに囲まれた『Design』の文字が描かれている。

これまでも述べてきたように、ウェブサイトを閲覧・操作するユーザーの多様な視点から意見をもらうことで、制作者では気づけないアクセスしにくさが浮かび上がります。特に、「一般的」とされている設計では考慮されにくい環境で利用するユーザーの感想は、貴重な気づきをもたらします。こういった方々はUX(ユーザー体験)デザインの世界において「エクストリームユーザー(注1)」と呼ばれます。

制作者がどれだけ意識的にウェブアクセシビリティを考え、工夫を凝らしてデザインしても、実際のユーザーが感じるアクセスしづらさは、つくり手の意識の外側からやってきます。よかれと思って実装した機能が、あるユーザーにとってはむしろアクセスの妨げになったり、便利だと思って加えた演出が、別のユーザーにとっては先に進めなくなる要因になってしまうことがあるのです。

制作者が多様なユーザーのアクセスのしかたを的確に想像しながらデザインできれば理想的ですが、経験を積まないとその勘所をつかむことは難しいでしょう。だからこそ、ユーザーとの接点を増やし、実際の声を聞くことが重要になります。

ここでは、わたしがこれまでに経験したユーザーによるレビューの中で、よく意見をもらうポイントを紹介します。

ポイント1:キーボード操作で開けないメニュー

「マウスカーソルを乗せたとき」にメニューが展開するようなインターフェースが、キーボードでは操作できないことがしばしば起こります。また、「Tabキー」で画面上のボタンなど操作可能な要素を選択した際に、強調表示するフォーカスリング機能が無効化されていると、いまどの要素を選択しているのかがわからず、操作ができなくなります。

これらは、実際にキーボードだけで操作してみると、すぐに気づくことができるポイントです。開発者からすると比較的手軽にアクセシビリティ向上に繋げられるポイントと言えます。

ポイント2:操作の「手応え」は大切

ユーザーがボタンをマウスカーソルでクリックしたり、タッチパネルでタップしたときに、その操作に対してインターフェースが適切な反応を示すことは、些末なようで実はとても大切なポイントです。

もし、マウスカーソルをボタンに乗せても、ボタンをクリックしても反応がないとしたら、操作している側はほんの少しだけ不安な気持ちが残ります。多くの人にとっては気にならない程度の違和感かもしれませんが、こうした小さな不安の積み重ねが漠然としたアクセスしにくさを感じさせます。

少し話はそれますが、「ストリートファイター」という格闘ゲームをご存知でしょうか?

この作品は近年、情報のアクセシビリティの観点からも注目されています。このゲームでは、プレイヤーがキャラクターを操作し、攻撃や防御をするたびに、効果音やコントローラーの振動による反応が起こるため、視覚に障害がある方でも楽しめるようです。実際に、ゲームが好きな全盲のスクリーンリーダーユーザーの方から「ストリートファイターは、攻撃や防御、一挙手一投足の動きに対して音や振動のフィードバックがあり、遊んでいてとても臨場感がある」という話を聞いたことがあります。

ウェブサイトのデザインにおいても、ユーザーの操作に対しての反応・手応えを意識的に設計することで、多様な人に、操作できている実感を生み出すことができるのです。

ポイント3:読みやすさは相対的なバランス

色のメリハリは、ウェブサイトの見やすさに大きく関わるポイントです。一般的にウェブアクセシビリティの規格では、背景色と文字色のコントラスト比は「4.5:1」以上が「レベルAA」として推奨されています。

「コントラスト比」という言葉に耳慣れない方もいるかもしれません。たとえば、白い背景に黒い文字を配置すると、最大のコントラスト比である「21:1」になります。一方で、薄いグレーの背景に濃いグレーの文字を使うと、コントラスト比が低くなり、視認性が低下して文字を判別しづらくなります。

しかし、コントラスト比の基準を満たしているからといって、必ずしもすべての人にとって読みやすいとは限りません。逆に、コントラストを強くしすぎると、別の問題が生じることもあります。たとえば、真っ白で広い面積の背景の上に黒い文字を小さく配置すると、「眩しくて読めない」と感じる人がいます。

また、色に関係なく、文字サイズが小さすぎたり、密度の高くアキが均一ではない書体では、文字が潰れて読みにくくなることがあります。

「読みやすさ」とはコントラスト比だけでなく、画面全体の明るさ、文字の大きさ、書体の種類、さらには文章の書き方など、さまざまな要素が絡み合って決まります。そのため、一概に「正解」を定義するのは難しいものなのです。

気づきを分類し「担当者」と「ゴール」を決める

こうした小さな改善を積み重ね、ウェブサイトが不便になることはまずありません。きっと多くの人にとって快適な状態に近づいていくはずです。

しかし、実際にユーザーにウェブサイトをレビューしてもらうと、そこで指摘される内容はもっと曖昧で、不確かで、感覚的です。複数の課題が混在していたり、課題なのかも漠然としていて、「それって個人の好みでは?」とツッコミをいれたくなるようなこともあるかもしれません。そうした多様で自由なコメントを前に混乱しそうになったら、まずは次のように分類してみることをおすすめします。

  • 設計関連:サイトの構造や導線など
  • デザイン関連:色やレイアウト、意匠など
  • 実装関連:操作性や挙動、技術的な不具合など
  • コンテンツ関連:情報の伝え方、文章の表現など

たとえば、このようなカテゴリーに分けて整理すると、誰が主に対応を検討すべきかが明確になります。たとえば、「文字が見にくい」というユーザーの意見に対して、「デザイナーが担当し、リンクテキストを区別しやすくするために色や装飾を見直す」といった具体的なゴールを設定できます。「課題の担当者」と「何をもって解決したといえるのか」の二つの観点を明確にすることで、チームで分担しながらアクセシビリティの向上に取り組みやすくなります。

ウェブアクセシビリティは広がり続ける

イラスト。筒の上部に『ゴール』と書かれた看板がついており、その中にはハートが積み上がったオブジェが奥にある。手前には、いくつものハートがゴロゴロと自由に積み重なり、山になっており、『ゴール』と書かれた看板が転がっている。

多様なユーザーにウェブサイトを見てもらうと、コントラスト比が低く見えにくい、スクリーンリーダーで適切に読み上げられない、一貫性のないデザインが気になって先に進もうと思えないなど、ユーザーの知覚の特性によって共通する課題があるように感じることがあります。しかし、だからといって「〇〇に障害のある人はこう見る」と決めつけてしまうと、ユーザーや環境ごとの感じ方の違いや、一人ひとり異なる繊細な感覚を見落としてしまうことにもなります。

実際のところ、色の見え方は人それぞれで、わたしが出会った人たちの中でも感じ方はさまざまでした。色覚の多様性は奥深く、一律に「これが最適な配色」と言えるものは存在しません。アクセスのしづらさは単純に「ある・ない」で分けられるものではなく、グラデーションのようにつながっています。固定された枠組みに当てはめることで分かりやすくなることもありますが、実際はもっと複雑で、一つのルールで単純に捉えられるものではないということです。

一方で、より効率的にウェブアクセシビリティの向上に取り組みたい企業や組織からは、ウェブアクセシビリティの指針や対応チェックリストを求められることも多く、わたし自身もそうした資料の作成に携わった経験があります。組織が大きくなればなるほど、ウェブサイトに関わるステークホルダーは増え、一貫して継続できる仕組みとするためにも基準となるものを明確にしたいと考えます。

たとえば、ウェブサイトを管理・運営する担当者からは「委託先の制作会社に伝えるための対応チェックリストがほしい」と言われることがあり、受託側のエンジニアやデザイナーからは「どこでも利用できるベストなメニューの実装方法を教えてほしい」と相談を受けることがあります。

たしかに、チェックリストやWCAGのような規格は、何をすべきかを明確にし、対応状況を把握する上でとても有用です。しかし、それだけでは結局ユーザーの姿がみえず実感を伴わない対応をせざるを得ません。チェックリストの背後には、一律に定義できないユーザーそれぞれの思いや感じ方があるのですが、そのグラデーションは捉えづらく、「型にはめること」と相反することでもあります。

アクセシビリティに100点満点はない

つまり、ゴールを設けられないウェブアクセシビリティに「100点満点」はありません。どれだけ工夫を重ねても、すべてのユーザーにとって完璧にアクセスしやすいデザインを実現するのは不可能です。しかし、部分的な調整を続けることは着実にアクセシビリティの向上につながります。

繰り返しになりますが、まず何から手を付けていいかと悩んだら、まずはガイドラインを参考に、実際にウェブサイトをキーボード操作だけで動かしてみる、スクリーンリーダーで読み上げを試してみるなど、いつもとは異なる環境でウェブサイトを操作してみましょう。それだけでも新たな気づきが生まれます。さらに、自分とは異なる環境でウェブサイトを利用するユーザーに直接意見を聞くことができれば、より具体的な改善のヒントが見えてくるでしょう。

チェックリストや規格の背後にある「一般的と括られてこなかったユーザー」のさまざまなウェブサイトのアクセスしづらさに気づくことで、アクセシビリティは単なるチェックリストを達成するためのものではなく、さまざまな環境に対して改善を繰り返す継続的な取り組みに発展していくのではないでしょうか。

文: 萩原俊矢, イラストレーション: Maya Numata

訳注

注1

Extreme Users、 Wikipedia (英語版)、https://en.wikipedia.org/wiki/Extreme_users (2025)

続きを読む

このレポートは全5回でお届けします。

  1. 第1回:ウェブサイトのユーザーに出会う
  2. 第2回:ウェブアクセシビリティの現状を整理する
  3. 第3回:ウェブアクセシビリティ向上に取り組む
  4. (この記事) 第4回:ユーザーが多様であるという気づき
  5. 第5回:わたしたちの“ウェブアクセシビリティ”は広がり続ける
このページを共有:

関連レポート