ユーザー補助

ウェブページのユーザー補助機能の改善

アリス・ボックスホール
Alice Boxhall
Dave Gash 氏
Dave Gash
Meggin Kearney 氏
Meggin Kearney

このドキュメント セットは、ユーザー補助に関する Udacity コースで取り上げられている内容の一部をテキストベースでしたものです。動画コースを直接文字起こしするのではなく、コースのオリジナル コンテンツをベースとして、ユーザー補助の原則と実践をより簡潔に扱うことを目的としています。

まとめ

  • ユーザー補助機能の意味とウェブ開発への適用方法について説明します。
  • 誰もがアクセスできて使いやすいウェブサイトを作成する方法を学びます。
  • 開発への影響を最小限に抑えながら、基本的なユーザー補助機能を組み込む方法について説明します。
  • 利用可能な HTML 機能と、それを使用してユーザー補助機能を向上させる方法について学びます。
  • 高度なユーザー補助エクスペリエンスを作成するための高度なユーザー補助手法について学びます。

ユーザー補助機能とその範囲、影響を理解すれば、優れたウェブ デベロッパーになれます。このガイドでは、ウェブサイトを誰もがアクセスできて使いやすいものにする方法を説明します。

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

また、これらの手法の多くは、障がいのあるユーザーだけでなく、すべてのユーザーにとって快適で使いやすいインターフェースの作成にも役立っています。

もちろん、多くのデベロッパーは、ユーザー補助とは何か、政府の契約書、チェックリスト、スクリーン リーダーと何か関係があるのかを曖昧に理解しているだけです。そして、多くの誤解が広まっています。たとえば、多くのデベロッパーは、ユーザー補助機能に対処するには、快適で魅力的なエクスペリエンスにするか、不格好で不便だがアクセスしやすいものにするか、どちらかを選ばなければならないと感じています。

もちろん、まったくそうではありません。他の問題に進む前に、この点を明確にしておきましょう。ユーザー補助とは何でしょうか。何を学習すべきでしょうか。

ユーザー補助とは

大まかに言うと、サイトにアクセスできるとは、文字どおり誰でもサイトのコンテンツにアクセスして操作できることを意味します。デベロッパーにとって、すべてのユーザーがキーボード、マウス、タッチ スクリーンを使用して、自分と同じようにページ コンテンツを操作できると思いがちです。そのため、ユーザーにとっては快適なエクスペリエンスにつながる可能性がありますが、ユーザーにとっては、ただの煩わしさから操作の妨げになる問題まで、さまざまな問題が生じます。

ユーザー補助とは、「一般的な」ユーザーの狭い範囲に入らないユーザーで、想定とは異なる方法でアクセスや操作を行う可能性があるユーザーのエクスペリエンスを指します。具体的には、なんらかの障がいや障がいを経験しているユーザーに関するものです。ただし、そうした経験は身体的なものではなかったり、一時的なものであったりする可能性があることに留意してください。

たとえば、ユーザー補助機能に関する議論は身体障がいのあるユーザーを中心に行う傾向がありますが、他の理由でアクセスできないインターフェースを使用する経験については誰もが関わってくる可能性があります。スマートフォンで PC 版サイトを使用する際に問題があった、あるいは「このコンテンツはお住まいの地域ではご利用いただけません」というメッセージが表示されたことはありませんか?また、使い慣れたメニューがタブレットで見つからないということはありませんか?これらはすべてアクセシビリティの問題です。

学ぶうちに、この広義で一般的な考え方でユーザー補助機能の問題に対処することで、ほとんどの場合、すべてのユーザーのユーザー エクスペリエンスが向上することに気づくでしょう。例を見てみましょう。

フォームへのアクセスが不適切です。

このフォームにはアクセシビリティに関する問題がいくつかあります。

  • テキストのコントラストが低く、ロービジョンのユーザーは読みにくい。
  • 左側にラベル、右側にフィールドがあると、多くのユーザーがそれらを関連付けるのが難しくなります。また、拡大が必要なユーザーがページを使用する可能性はほぼ不可能です。たとえば、スマートフォンでこれを見て、何が何であるかを理解するために移動しなければならないことを想像してみてください。
  • 「詳細情報を記憶しますか?」ラベルはチェックボックスに関連付けられないため、単にラベルをクリックするのではなく、小さな正方形のみをタップまたはクリックする必要があります。また、スクリーン リーダーを使用している人にとっては、関連付けがわかりづらくなる可能性があります。

それでは、ユーザー補助の魔法の杖を動かして、問題が修正されたフォームを確認してみましょう。 テキストをより暗くし、ラベルがラベル付け対象のものに近くなるようにデザインを変更して、ラベルをクリックしてチェックボックスに関連付けるようにラベルを修正します。

アクセシビリティが向上したフォーム。

どちらを使いますか?このガイドの要点を理解しているところです。多くの場合、少数のユーザーに対する完全な阻害要因が他の多くのユーザーにとっても課題となるため、ユーザー補助の問題を修正することで、すべてのユーザーのエクスペリエンスが向上します。

ウェブ コンテンツのアクセシビリティ ガイドライン

このガイドでは、Web Content Accessibility Guidelines(WCAG)2.0(ウェブ コンテンツ アクセシビリティ ガイドライン(WCAG)2.0)を参照します。これは、「ユーザー補助」の意味を系統的に解決するために、ユーザー補助の専門家がまとめたガイドラインとおすすめの方法です。

WCAG は 4 つの原則(POUR の頭字語でよく呼ばれます)を中心に構成されています。

  • 認識可能性: ユーザーはコンテンツを認識できるか?視覚など 1 つの感覚で認識できるからといって、すべてのユーザーがそれを認識できるとは限らないことを覚えておきましょう。

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

  • 理解しやすい: ユーザーはコンテンツを理解できるか?ユーザーはインターフェースを理解できるか、一貫性があり混乱を招かないか。

  • 堅牢性: コンテンツは、さまざまなユーザー エージェント(ブラウザ)で使用できるか。支援技術に対応しているか

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% にも上ります。赤と緑、または黄と青の区別が難しいことがあります。 次にフォームの検証を設計するときは、この点について考えてください。

運動機能障がいの場合はどうですか?

はい、運動機能障がい、運動機能障がいがあります。このグループは、RSI などがあって痛みを感じるためにマウスを使用することを好まない人から、身体の麻痺があり、身体の特定の部位の可動範囲が制限されている人まで多岐にわたります。

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

運動障がいのあるユーザーは、キーボード、スイッチ デバイス、音声操作、視線追跡デバイスなどを使用してパソコンを操作することがあります。

視覚障がいと同様に、運動障がいも一時的または状況的な問題である可能性があります。たとえば、マウスの手の手首が骨折していることがあります。ノートパソコンのトラックパッドが壊れている場合や、揺れる電車に乗っている場合などです。ユーザーのモビリティが妨げられる状況は数多くあります。こうしたユーザーに対応できるようにすることで、永続的な障がいを持つ人だけでなく、一時的にポインタベースの UI を使用できない人にとっても、全体的なエクスペリエンスが向上します。

では、聴覚障がいについてお話ししましょう。

このグループは、重度の聴覚障がいから難聴まで多岐にわたります。聴覚と同様に、聴覚も年齢とともに低下します。多くの人は補聴器のような 一般的なアフォーダンスを使っています

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

聴覚障がいのあるユーザー向けには、音声に依存しないようにする必要があります。そのため、動画の字幕や文字起こしなどを使用し、音声がインターフェースの一部である場合は、なんらかの代替手段を提供する必要があります。

視覚障がいや運動障がいの場合と同様に、こうした配慮によって耳が健康に良い人でもメリットが得られることは想像に難くありません。多くの友人が、動画に字幕や文字起こしが付いていると気に入っていると言います。それなら、オープンプランのオフィスにいる人が、ヘッドフォンを持っていなくても動画を視聴できるからです。

では、認知機能障がいについて少し教えてください。

ADD、失読症、自閉症など、さまざまな認知状態があり、ユーザーは異なるアクセス方法を望む、または必要としていることを意味します。当然のことながら、これらのグループ向けの対応は非常に多岐にわたりますが、他の分野(読書や集中しやすいようにズーム機能を使用するなど)と明らかに重複する部分があります。また、注意散漫や認知負荷が最小限になるため、最小限のデザインが最適だと感じるかもしれません。

私は、誰もが認知しすぎのストレスに共感できると思います。ですから、認知障がいのある人にとってうまくいくものを作るなら、誰にとっても快適な体験になるものを作るのは明白です。

では、ユーザー補助についてどのようにお考えですか?

人々の幅広い能力や障がいに目を向けると、完全な視力、聴力、運動機能、認知力を備えた人だけを対象にした製品の設計と開発は、驚くほど狭い範囲であることがわかります。ストレスの多い使い心地が誰にとっても使いやすいものではなく、一部のユーザーにとっては、実際にそのユーザーが完全に排除されたエクスペリエンスになるからです。

このインタビューで、Victor はさまざまな障がいを特定し、視覚、運動、聴覚、認知、認知の 4 つの大きなカテゴリに分類しました。また、各障害の種類には、状況的、一時的、永続的のいずれかがあることも指摘しました。

アクセス障害の実際の例と、それがこれらのカテゴリとタイプ内のどこに該当するかを見てみましょう。障がいによっては、複数のカテゴリやタイプに該当する場合があります。

状況的 一時的 恒久的
映像 脳震とう 目の見えない
モーター 赤ちゃんを抱いている 腕の骨折、RSI* RSI*
聴覚 騒がしいオフィス
認知 脳震とう

反復性筋損傷: 例: 手根管症候群、テニス肘、引き金指

次のステップ

すでにかなりの部分をカバーしました。読みました

  • ユーザー補助の概要と、ユーザー補助がすべての人にとって重要な理由
  • WCAG と WebAIM のアクセシビリティ チェックリスト
  • さまざまなタイプの障がいについて

このガイドの残りの部分では、アクセス可能なウェブサイトを作成する実践的な側面を詳しく見ていきます。この取り組みは 3 つの主要分野に分けて 進めていきます

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

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

  • スタイル設定: ビジュアル デザインについて検討し、インターフェースの視覚的要素を可能な限り柔軟で使いやすいものにするための手法を確認します。

これらの科目は 1 つのコース全体を網羅しているため、アクセシビリティの高いウェブサイトの作成に関するすべての側面については説明しません。ただし、開始にあたって十分な情報を提供し、各トピックの詳細を確認できる場所をご案内しています。