ユーザー補助機能

このドキュメント セットは、ユーザー補助機能に関する Udacity コースで扱われている内容の一部をテキストベースで説明したものです。ビデオコースを直接文字に起こすのではなく、コースの元の内容をベースに、ユーザー補助機能の原則と実践方法をより簡潔に説明することを目的としています。

TL;DR

  • ユーザー補助機能の意味とウェブ開発への適用方法について説明します。
  • アクセスしやすく使いやすいウェブサイトにする方法について説明します。
  • 開発への影響を最小限に抑えながら基本的なユーザー補助機能を組み込む方法について説明します。
  • 利用可能な HTML 機能とその機能を使用したユーザー補助機能の改善方法について説明します。
  • 洗練されたユーザー補助機能の使用感を実現するための高度なユーザー補助機能の手法について説明します。

ユーザー補助機能とそのスコープや影響を理解できると、より優れたウェブ デベロッパーになることができます。 このガイドを通じて、すべてのユーザーにとってアクセスしやすく使いやすいウェブサイトを構築する方法を理解することができます。

「ユーザー補助機能」をサポートすることは難しいことではありません。このガイドでは、最小限の労力でユーザー補助機能を改善する簡単な方法、HTML に組み込まれているものを使用してよりアクセスしやすい堅牢なインターフェースを作成する方法、高度な手法を利用して洗練されたアクセス性を実現する方法について説明します。

これらの手法の多くが、ハンディキャップを持つ方だけでなくすべてのユーザーがより快適かつ簡単に使用できるインターフェースの作成に役立つこともご確認いただけます。

もちろん、多くのデベロッパーはユーザー補助機能の意味を漠然と理解しているだけで、行政機関との契約、チェックリスト、スクリーン リーダーと関係があるくらいの認識しかありません。また誤解も多く、たとえば、多くのデベロッパーは、ユーザー補助機能に対応する場合、楽しく魅力的なエクスペリエンスを捨てて、使いづらく外観が悪いけれどもアクセスできるサイトにしなければならないと考えています。

もちろん、まったくそんなことはありません。他の話題に移る前に、この点を明確にしておきましょう。 ユーザー補助機能とはどういうものでしょうか。これから何を学ぶのでしょうか。

ユーザー補助機能とは

大まかに説明すると、「サイトがアクセス可能」とは、文字どおりだれでもサイトのコンテンツを使用でき、その機能を操作できることを意味します。デベロッパーは、すべてのユーザーがキーボード、マウス、またはタッチ スクリーンを見ることができ、それを使用してページのコンテンツを自分と同じように操作できると考えがちです。その結果、一部のユーザーには快適に動作しても、他のユーザーにとっては、不快に感じたり中断せざるをえなかったり、さまざまな問題が発生します。

また、ユーザー補助機能は、狭い意味で「一般的」なユーザーに含まれないユーザーの操作を意味します。このようなユーザーは、想定と異なる手段でアクセスや操作を行います。具体的には、ユーザー補助機能は、なんらかの身体障がいや機能低下を抱えるユーザーにとって重要な機能ですが、そのような状況は、身体的な問題ではなかったり、一時的なものである場合があることも念頭に置いてください。

たとえば、身体に障がいがあるユーザーを主な対象として議論しがちですが、なんらかの理由でアクセスできないインターフェースを使用するケースについては、すべてのユーザーに関係があります。スマートフォンで PC 用のサイトを思い通りに使えなかったり、「このコンテンツはお住まいの地域では使用できません」というメッセージが表示されたり、使い慣れたメニューがタブレットでは見つからなかったことはありませんか?これらはすべて、ユーザー補助機能の問題です。

詳しく学習すると、この広義で一般的な意味におけるユーザー補助機能の問題に対処することで、ほとんどの場合はすべてのユーザーのエクスペリエンスが向上することがわかるはずです。例を見てみましょう。

ユーザー補助機能が適切ではないフォーム

このフォームには、いくつかのユーザー補助機能の問題があります。

  • テキストのコントラストが低いため、低視力のユーザーは読みにくい可能性があります。
  • 左側にラベル、右側にフィールドがあるため、多くのユーザーは関連付けがしにくく、拡大が必要なユーザーは、ほとんどページを使用できません。これをスマートフォンで見て、何と何が関連しているのかを確認するためにパンする必要があることを想像してみてください。

  • 「Remember details?」ラベルはチェックボックスに関連付けられていないため、ただラベルをクリックするのではなく、小さい正方形をタップまたはクリックする必要があります。また、スクリーン リーダーを使用するユーザーは、関連付けがわかりにくい可能性があります。

では、ユーザー補助機能の魔法をかけて、問題が修正されたフォームを見てみましょう。テキストの色を濃くして、ラベルがラベル付けの対象に近くなるようにデザインを変更します。また、ラベルを修正してチェックボックスに関連付けて、ラベルをクリックするとチェックボックスが切り替わるようにします。

ユーザー補助機能が改善されたフォーム

どちらを使いますか。「使いやすいバージョン」と答えた場合は、このガイドの大前提を順調に理解しています。多くの場合、少数のユーザーを完全にブロックするものは、多くのユーザーにとっても問題点です。そのため、ユーザー補助機能の問題を修正することで、すべてのユーザーのエクスペリエンスが向上します。

Web Content Accessibility Guidelines

このガイドでは、Web Content Accessibility Guidelines (WCAG) 2.0 を参照します。これは、ユーザー補助機能のエキスパートによって、「ユーザー補助機能」の意味を系統的に説明するためにまとめられたガイドラインとベスト プラクティスのセットです。

いくつかの国では、ウェブ ユーザー補助機能の法的要件でこれらのガイドラインの使用を義務付けています。

WCAG は、頭字語 POUR と呼ばれる 4 つの原則にそってまとめられています。

  • 知覚可能(Perceivable): ユーザーはコンテンツを知覚できますか。視覚など、1 つの感覚で認識できるからといって、すべてのユーザーがそれを知覚できるとは限らないことを覚えておくと、役立ちます。

  • 操作可能(Operable): ユーザーは UI コンポーネントを使用したりコンテンツをナビゲートしたりできますか。たとえば、カーソルを合わせる操作を必要とするものは、マウスやタッチ スクリーンを使用できないユーザーは操作できません。

  • 理解可能(Understandable): ユーザーはコンテンツを理解できますか。ユーザーが混乱することのない、分かりやすく一貫性のあるインターフェースになっていますか。

  • 堅牢性(Robust): コンテンツはさまざまなユーザー エージェント(ブラウザ)で利用できますか。 支援技術で使用できますか。

WCAG は、コンテンツをアクセス可能にすることの意味について、全般的な概要を説明していますが、これを読むのは少し大変かもしれません。この負担を軽減するために、WebAIM(Web Accessibility in Mind)グループでは WCAG ガイドラインをわかりやすいチェックリストにまとめました。これは、特にウェブ コンテンツを対象にしています。

WebAIM チェックリストには、実装が必要なものに関する短い概要が記載されており、広義の定義が必要な場合は基になる WCAG 仕様へのリンクが張られています。

この情報が手元にあれば、ユーザー補助機能への取り組みの方向性を見定めることができます。また、プロジェクトが記載されている基準を満たしている限り、ユーザーが積極的ににコンテンツにアクセスしていることを確信できます。

ユーザーの多様性について

ユーザー補助機能について学習すると、世界中のさまざまなユーザーと彼らに影響するさまざまなユーザー補助機能に関するトピックを理解できるようになります。さらに詳しく説明するために、ここでは、Google の全盲のテクニカル プログラム マネージャーである Victor Tsaran による有益な質問と回答のセッションを紹介します。

Victor Tsaran
Victor Tsaran

Google ではどのような仕事をしていますか?

Google での私の仕事は、障害の有無にかかわらず、すべての多様なユーザーが確実に Google 製品を利用できるようにすることです。

ユーザーの障害にはどのような種類がありますか?

コンテンツへのアクセスを困難にする障害の種類について考えるとき、多くの人々は、すぐに私のような盲目のユーザーを想像します。実際、この障がいによってウェブサイトを思うように使えませんし、まったく使えないサイトも多くあります。

残念なことに、最新のウェブ技術の多くは、サイトの作成に利用すると副作用が出てしまいます。そうしたサイトでは、盲目のユーザーがウェブへのアクセスに使用するツールがうまく機能しないのです。それでも、ユーザー補助機能を活用するメリットの方が多くあります。私たちは、障がいについて、大まかに視覚、運動、聴覚、認識の 4 つのカテゴリに分けると検討しやすいことに気づきました。

1 つずつ見てみましょう。視覚障がいについてなにか例をあげてもらえますか?

視覚障がいは、いくつかのカテゴリに分類できます。まずは私のように盲目で、スクリーン リーダーや点字、またはその 2 つを組み合わせて使用しているユーザーです。

点字読み取り装置
点字読み取り装置

現在は、まったく視力のない人はきわめてまれですが、なにも見ることができない人を 1 人くらいは知っていたり、出会ったことがあるでしょう。ただし、低視力ユーザーと呼ばれる方は、さらに多く存在します。

低視力ユーザーの範囲は幅広く、私の妻のように角膜がないため、基本的にものを見ることができず、印刷したものを読むにも苦労しており、法律上の失明と見なされている人もいれば、視覚能力がやや低く、強い度数のめがねをかける必要がある人もいます。

このカテゴリはかなり幅広いため、自然と含まれる人も幅広くなります。スクリーン リーダーや点字ディスプレイを使用する人(ある女性は、印刷したテキストよりも読みやすいという理由で、画面に表示された点字を読むそうです)、完全なスクリーン リーダーの機能ではなくテキスト読み上げ技術を使用している人、画面の一部を拡大するために画面の虫めがねを使用する人、ブラウザのズーム機能だけを使用してフォントを大きくしている人などが含まれます。オペレーティング システムの高コントラスト モード、高コントラスト ブラウザの拡張機能またはウェブサイトの高コントラスト テーマなど、高コントラスト オプションを使用することもできます。

高コントラスト モード
高コントラスト モード

多くのユーザーは、友人の Laura のように、高コントラストやブラウザのズーム、テキスト読み上げ機能などの機能を組み合わせて使用しています。

低視力は、多くのユーザーに関わる問題だと言えます。そもそも私たちは年を取るにつれて視力が低下しています。まだ自分が経験していなくても、視力の低下についてご両親が愚痴をこぼすのを聞いたことがあるかもしれませんね。しかし多くの人が、明るい窓際でノートパソコンを使うと突然なにも読めなくなって、それだけでもストレスを感じるはずです。または、レーザー手術を受けたり、部屋の向こう側からなにか読まなければならないとき、先ほど説明したいずれかの適応機能を使ったことがあるでしょう。ですから、デベロッパーが低視力のユーザーに共感するのはとても簡単なはずです。

そして、色覚異常のユーザーのことも忘れてはいけません。男性の約 9%、女性の約 1% は色覚に異常があります。赤と緑、黄と青などを区別できない可能性があります。以降フォームの検証をデザインするときは、このことも考慮してください。

運動障がいとは何でしょうか。

運動障がい、つまり運動機能に関わる障害について説明します。このグループには、反復性疲労傷害などの原因でマウスを使いたくないという人から、体にまひがある人、体の特定部位の可動範囲に制限ある人など、幅広い人が含まれます。

視線追跡デバイスを使用している人
視線追跡デバイス

運動障がいのあるユーザーは、キーボード、スイッチ デバイス、音声制御、視線追跡デバイスを使用して、コンピュータを操作している可能性があります。

視覚障がいと同様、運動障がいも一時的または状況的な問題である場合があります。マウスを使うほうの手首を痛めたり、ラップトップのトラックパッドが壊れたり、揺れる電車に乗っているだけかもしれません。ユーザーの動作が妨げられる状況は数多く存在します。そうした状況に備えることで、永続的な障がいのある人にも、ポインターベースの UI が一時的に使えなくなっている人にも、全体的に改善されたエクスペリエンスを提供することができます。

では、聴覚障がいに移りましょう。

このグループは、まったく耳が聞こえない人から難聴の人までが含まれます。視覚とまったく同じように、聴覚も年をとるごとに衰えてきます。 多くの人は、聴覚支援技術のような一般的なアフォーダンスを利用します。

下部に字幕が表示されるテレビ
画面の字幕

聴覚障がいのあるユーザー向けには、音声に依存せず、動画の字幕や書き起こしテキストなどを使用し、音声がインターフェースに含まれる場合は代替手段を用意する必要があります。

視覚および運動障がいの場合と同様に、適応機能によって得られるメリットは、聴覚に問題がない人にとってもメリットであることは容易に想像できると思います。字幕や書き起こしテキスト付きの動画は、仕切りのないオフィスでヘッドフォンがなくてもそのまま視聴できるので、友人の間では大変好評です。

では、認識機能障がいについて少し説明していただけますか。

認識機能障がいには、ADD(注意力欠如障がい)、難読障がい、自閉症などが含まれ、異なる方法でのアクセスを希望する、または必要とする人を意味します。このようなグループ向けの適応機能は、当然ながら実にさまざまです。しかし他の分野と明らかに共通しているのは、ズーム機能を使用して読みやすくしたり、集中しやすくすることです。また、こうしたユーザーには、注意力や認識の負担を最小化できる、最小限のデザインが非常に効果的です。

認識の過負荷によるストレスは、すべての人に関係する問題です。ですから、認識障がいのある人を対象に効果的な機能を作成できれば、あらゆる人にとって快適な操作性を実現できることになります。

ユーザー補助機能についてまとめていただけますか。

人々が持つ幅広い機能や障がいを知れば、完全な視覚、聴覚、運動機能、認識能力を持つ人だけを対象にして製品をデザインおよび作成するのは、非常に狭い考え方であることがわかります。ほぼ自滅的な行為といえるでしょう。なぜなら、だれにとってもストレスがかかり、使いづらく、さらに一部のユーザーを排除するようなエクスペリエンスを生み出していることになるからです。


このインタビューで、Victor は幅広い障がいについて取り上げ、大まかに視覚運動聴覚認識の 4 つのカテゴリに分類しました。また、それぞれの障がいには、状況的一時的永続的なタイプがあることを指摘していました。

アクセスに関わる実際の機能障がいの例を挙げながら、それが先ほど説明したどのカテゴリとタイプにあてはまるのかを見てみましょう。障がいによっては、複数のカテゴリやタイプに該当する場合があります。

状況的 一時的 永続的
視覚 振動 失明
運動 赤ん坊を抱えている 腕の骨折、RSI* RSI*
聴覚 騒音のあるオフィス
認識 振動

*反復性疲労傷害: 手根管症候群、テニス エルボー、ばね指

次のステップ

非常に幅広い領域を取り上げました。ここで学習した内容は次のとおりです。

  • ユーザー補助機能の説明およびすべての人に関係している理由
  • WCAG および WebAIM ユーザー補助機能チェックリスト
  • 考慮すべきさまざまなタイプの障がい

このガイドの残りのセクションでは、アクセス可能なウェブサイトの作成について実践的な面から説明します。 この取り組みは、主に 3 つのテーマに分けられます。

  • フォーカス:マウスの代わりにキーボードで操作できる機能を構築する方法について説明します。 これは、運動障がいのあるユーザーにとって重要であり、当然ながら、すべてのユーザーにとって使いやすい UI を作成することにもつながります。

  • セマンティクス:さまざまな支援技術と連携できる堅牢な方法で、ユーザー インターフェースを作成できるようにします。

  • スタイル設定:ビジュアル デザインについて検討し、できる限り柔軟で便利な視覚要素を作成するためのテクニックを紹介します。

これらのテーマは単独でも 1 つのコースに相当する内容ですが、アクセス可能なウェブサイトの作成についてすべての側面をとりあげることはしません。しかし、作業を開始するために十分な情報を提供し、各トピックについてさらに詳しく学ぶことができるところまでご案内します。