すべての人のために、アクセシビリティを前提にデザインしよう | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

アクセシビリティが後付けでもよかったのは過去の話です。本来は、要件としてデザインプロセスの最初から考慮されるべきものです。

幼いころ、家族とよく旅行しました。ホテルの部屋では、姉に眠れないからテレビの音量を下げてとよく言われました。あまり疲れることがなかった私は、字幕を表示し、画面を読んでいました。そうしてテレビを字幕付きで見る習慣が身に付きました。現在でもその方が落ち着きを感じます。より多くの情報を得られる上に、耳では聞き取れなかったことに気づくからです。

字幕は、聴覚障がい者の理解を助けるだけでなく、私のような一部の人の生活の一部になっています。アクセシビリティは、体験を強化するのはもちろん、多くの人にとって、最初に体験を始めるきっかけになるのです。

すべての人は情報に平等にアクセスできるべき

1972年、ジュリア・チャイルドの『The French Chef』は、ろう者または聴覚障がい者向けにアクセシブルなテレビ番組を史上初めて放送した出典: Amazon.comの「The French Chef」再放送から取得した画面キャプチャとの合成

1972年、ジュリア・チャイルドの料理番組「The French Chef」において、テレビ史上初めてキャプションが使われました。ろう者や聴覚障がい者も含めた、より多くの視聴者に届けたいというプロデューサーの願いによるものです。今日では、FCC (米国連邦通信委員会) は、すべての新しいテレビ番組と75%の古い番組にクローズド・キャプションを含めるよう求めています。クローズド・キャプションに関する法律は、インクルーシブな未来の実現の始まりに過ぎませんでした。政府はその後も徐々に、障がいを持つ人々をサポートするための法律を施行してきました。

1990年、アメリカ合衆国の立法機関は、アメリカ障がい者法 (ADA) を制定しました。差別を禁止し、職場、学校、交通機関、公共の場、および商業施設を含む、国民のあらゆる生活分野へのアクセスを実現することを目指したものです。これには、運動、聴覚、発話、感触、および学習に関わる障がいに影響する疾患が含まれています。

世界には77億人以上が存在し、同じ人は一人もいません。私たちはそれぞれ異なる人間で、異なるニーズを持っています。そして、すべての人が平等に情報へアクセスすることができるべきです。

テクノロジーに携わるデザイナーは、デザインするあらゆるものがアクセシブルで使用可能であるよう努力すべきです。製品とサービスのアクセシビリティは、差別や訴訟の回避のためだけではなく、あらゆる訪問者にとってのユーザビリティの改善につながります。その結果として、市場を広げ、より大きなインパクトを与え、収益を増やし、SEOの効果を高めることができるでしょう。

幸いなことに、技術の進歩は、障がい者が世界とのつながりを持ち、社会的な活動に参加する機会を増やすことに貢献しています。では、その体験をさらに広げるにはどうすればよいでしょう？

デザインシステムを使ってアクセシブルな体験をスケールさせる

デザインの幅広い展開を想定するとき、システム化やパターン化や最適化する方法について考えるでしょう。プロセスに携わる全ての人が貢献しやすくするためです。それゆえ、多くの組織がデザインシステムとして知られているコンポーネント体系を採用しています。

デザインシステムは、短期間に一貫性のある体験を開発するための鍵になります。そこには、ボタン、色、タイポグラフィ、トーン、ブランディングなどに関する、詳細に書き留められた要件と再利用可能なコンポーネントが含まれています。

すべてのブランドアセットやUIコンポーネントを一か所にまとめることで、チーム全体の作業を同期させることができます。デザインシステムは一度作ったら終わりではなく、機能や製品やUIコンポーネントが追加されると更新される動的な体系です。ここで指摘しておきたいことは、アクセシビリティがデザインシステムに織り込まれるべきであるという点です。

Googleは250以上の製品とサービスを抱えています。Googleに務める人は概ねGoogleのデザインシステムであるマテリアルデザインを参照しています。Googleはマテリアルデザインがアクセシビリティの標準に適合するように大々的な検証を実施しています。

それでも、マテリアルデザインを使用するデザイナーはアクセシビリティ対応の確認に時間を費やすことが必要です。標準仕様に完全に依存すべきではありません。デザイナーは、自分と同じように考える相手以外の幅広いオーディエンスに受け入れられるよう、積極的に取り組むべきです。アクセシビリティをデザイン作業の基礎に取り込むことで、これを実施することができます。

デザインシステムの熱心な提唱者であるネイサン・カーティスは、一つのシステムが存在するだけでは、ユニバーサルアクセスに対してすべてが検証されていることにはならないと的確に指摘しています。規則を理解し、標準に適合するようコンポーネントを検証するのはシステムを利用する各人の責任です。

出典: underraw.co。

アクセシビリティの基本を学ぶ

デザイナーは誰でも、すべての人のためにデザインできるよう、アクセシビリティの基本を学ぶべきです。アドビのインクルーシブデザインのリーダーであるマット・メイは、世界中のアドビ社内のデザイナーが、アクセシブルな体験を構築し、実装できるようにトレーニングを提供しています。彼の期待は、アドビの全社員がインクルーシブデザインに関わる役割を担うことです。メイは、支援テクノロジーの動作について終日ワークショップを開催し、地域、人種、性別、経済的地位などに関わるさまざまな偏見についてデザイナーに知らせ、それがアドビ製品を使用する上で、人々の能力にどのような影響するのかを説明しています。

アドビのデザインシステム「Spectrum」は、すべてのアドビ製品の一貫性を維持する

インクルーシブデザインに関するメイの知見は、アドビのデザインシステムであるSpectrumにも取り込まれています。過去数年に渡り、メイはSpectrumチームとの緊密な作業を通じて、あらゆる分野の製品を使いやすくできるよう取り組んできました。

たとえばメイは、サイトをマウスを使用せずにナビゲーションできるようにするための規則を定義しました。また、コンポーネントが適切にラベル付けされていることや、コントラストが十分であることも確認しました。彼は、アドビのアクセシビリティをリードするアンドリュー・カークパトリックとも協業しています。アンドリューは、できるだけ多くの適用分野において、すべての製品がユニバーサルアクセスをサポートしているかを検証する役割を担っています。

アクセシビリティとインクルーシブデザインについては、多様なリソースがオンラインで提供されています。ここではいくつかのリソースを選んで紹介します。

Teach Accessチュートリアル

Teach Accessでは、アクセシブルなモバイルアプリとウェブアプリを作成する方法について、基本的なトレーニングが提供されている

メイの推薦は、基本的なアクセシビリティのトレーニングを提供するTeach Accessのチュートリアルです。Teach Accessでは、アクセシビリティを学んだことのない人から復習が必要な人までさまざまな人を対象に、アクセシブルなソフトウェアを記述しデザインするためのベストプラクティスを紹介しています。Teach Accessは、アドビ、Facebook、LinkedIn、マイクロソフトなどのテクノロジー企業、そして教育機関およびアクセシビリティ支援団体の協力の下、2015年に創設されました。

webAIM.org

webaim.orgでアクセシビリティトレーニングを始めよう出典: WebAIMサイトのスクリーンショット

WebAIMは、障がいを持つ子供と大人の生活を改善することを目的とした非営利団体です。このサイトには、視覚障がい、聴覚障がい、運動障がい、および知覚障がいを伴う人々を対象としたウェブコンテンツを作成するためのソフトウェアツール、ガイドライン、調査レポート、およびトレーニングが豊富に掲載されています。

Lynda.comのウェブデザイン向けアクセシビリティコース

Lynda.com. Lynda.comの「Accessibility for Web Design」 (講師 Derek Featherstone) をご覧ください出典: Lynda.com

デレック・フェザーストーンが講師を務めるLynda.comの「Accessibility for Web Design」コースは、メイ一押しのトレーニングコースです。このコースでは、一般的なウェブインタラクションフロー、アクセシブルコンポーネントのデザイン、および障がいを持つ人が確実にタスクを完了できることを確認する方法についてのヒントが紹介されています。

W3C Web Content Accessibility Guidelines 2.1

Mozillaでウェブ標準のリーダーを務めるタンテック・セリックは、すべてのWebクリエーターがW3Cの「Webコンテンツアクセシビリティガイドライン 2.1」に目を通すことを勧めている出典: w3c.orgのイラスト

Mozillaでウェブ標準のリーダーを務めるタンテック・セリックは、すべてのウェブデザイナー、デベロッパー、ライター、マネージャー、ポリシー作成者が、W3Cの「Web Content Accessibility Guidelines 2.1」（WCAG 2.1）に目を通すことを勧めています。このとても長い文書からは、異なる能力を持つ人々に抜けて、情報や構造を犠牲にすることなく、コンテンツを提供する方法を学ぶことができます。

W3CのWCAG 2.1ガイドラインは、ウェブ向けのコンテンツをどのような形式で作成するべきかを説明しています。含まれている内容は、ドキュメンテーション、ガイドライン、コンポーネントの使用方法に関する情報、そしてインクルーシブデザインのベストプラクティスを実践するための検証済みのユースケース例などです。

アクセシブルなデザインシステムを構築するためのヒント

最後に、アクセシブルなデザインに役立ついくつかのヒントを紹介します。

プロトタイプツール向けのアクセシビリティプラグイン「Stark」の創設者であるキャット・ヌーンは、企業はインクルーシブを考慮し始めるべきだと考えています。製品やサービスをアクセシビリティに対応させるのに、遅すぎるということはありません。デザインシステムにコンポーネントを組み込む前に、以下の内容を念頭に検証しましょう。

マウスを取り外してキーボードだけでナビゲーションする

ほとんどのソフトウェアには、ユーザーがキーボードを使ってアプリケーションを使用できるように、ショートカットが用意されています。マウスを取り外して、キー操作のみでサイトをナビゲーションできることを確認しましょう。

カリフォルニア大学のイヴォンヌ・テヴィスは、スクリーンリーダーを起動し、マウスを取り外して、モニターをオフにすることを推奨しています。その上で、キーボードのTabキー、Shift+Tabキー、矢印キー、Enterキー、スペースキーのみを使ってサイト内を移動できるかどうかを試すのです。

支援テクノロジーをサポートし、実際のユーザーと検証する

支援テクノロジーは、視覚障がい、聴覚障がい、読書障がい、書字障がい、および身体障がいを持つ人が、同じコンテンツを利用できるように支援するための技術です。デジタルの世界における支援テクノロジーとしては、音声認識ソフトウェア、画面読み上げ機能、画面拡大アプリケーション、テキストの音声変換アプリケーションが挙げられます。

平等なユーザー体験を作り出すために、スクリーンリーダーや支援テクノロジーを常時使用するユーザーを探し出します。スクリーンリーダーの使い方は、独学で学ぶだけでは不十分です。すべての素晴らしいデザインの実現と同様に、調査を実施し、プロトタイプを作成し、実際に製品を使用することになるユーザーと検証することが重要です。

アドビのマット・メイも、「スクリーンリーダーの使い方を学んだところで、ユーザーにはなれません」と述べています。「普段コンピューターを操作するのに画面とマウスを使用しているなら、すでに見えているものを拾い読みし、それで十分だと感じるはずだから」です。

オペレーティングシステムが提供するアクセシビリティガイドラインを使用する

ゼロからアクセシビリティを構築する必要はありません。デザイン対象のオペレーティングシステムが推奨するガイドラインを使いましょう。例えばアップルのインターフェイスガイドラインは、彼らのプラットフォームに直感的なインターフェイスをデザインする方法を説明しています。

アドビのメイは、アクセシブルなコンテンツを作成するため、デザイナーはオペレーティングシステムのガイドラインを習得すべきだと考えています。「アップルとマイクロソフトは、アクセシブルな開発を支援する非常に有用なドキュメントを提供しています。テクニックであったり技術要件の適合性が関わるケースもありますが、一番のアドバイスはオペレーティングシステムが提供しているガイドに従うことです」

メイは続けて次のように指摘しました。「多くの場合、人々はオペレーティングシステムのコンポーネントのように見えるものを構築しています。しかし、そこにOSが提供するアクセシビリティ機能が含まれていないことは、決して珍しくありません。これは、国際化やセキュリティ対応にも関わる話です。OSが何を提供しているかを理解しておくことは非常に重要です」

有益なaltタグを記述する

人によっては、altタグの記述に戸惑ってしまうかもしれません。画像を具体的に説明し、125文字以下に保ちましょう。Mozillaでウェブ標準のリーダーを務めるタンテック・セリックは、画像を電話で誰かに説明する場合、どのように説明するのかを考えて、altタグを作成するように勧めています。

コントラストに配慮する

Starkプラグインを使って、自分のデザインがW3CのWCAGに合格するかを評価してみましょう。テキストやテキスト画像のコントラスト比が少なくとも4.5:1であること、前景と背景のコントラストが十分であることを確認します。

色に頼らないリンクをデザインする

色を見分けられない人もいます。次のヒントを参考にしてリンクであることを伝えましょう。

リンクであることを示す画像をリンクテキストの最後に使用する
文字のウエイト、スタイル、サイズを通常のテキストから変更する
リンクに下線を付ける

アクティブと非アクティブの状態を適切に示す

Googleのマテリアルデザインでは、優先順位を含めすべての状態の違いを明確に表現するように指示している出典：https://material.io/design/interaction/states.html。

ステートは、UI要素の状態をユーザーに示すためのものです。ユーザーが状況を理解できるように、適切なフィードバックがデザインされていることを確認しましょう。

ウェブデザインの基本を守る

HTMLは検索エンジンや人々が文書を見て、コンテンツの構造を簡単に理解できるように設計されました。ですから、セマンティックにHTMLを記述しましょう。

タイポグラフィタグで階層を示す
ヘッダータグを適切に活用して情報を整理し、ページの階層を示しましょう。
レイアウトの一貫性による明確化
コンテンツが予測しやすく、分かりやすく整理されており、リンクが明確であることを確認しましょう。

おわりに

最近では、多くの企業や組織においてデザインシステムが使用されています。Zendeskのデザインシステム部門で上級デザインマネージャーを務めるアリソン・ショーは、彼らのGardenデザインシステムに、アクセシビリティを含めるという高い基準を設定しています。すべての人がすべての色を見えるわけではありません。世界の男性10人に1人、女性200人に1人の人が、何らかの色覚異常を患っています。この問題の解決は、ショーにとっての大きなチャレンジでした。

「デザインシステムは、インクルーシブへの取り組みに着手する場所として適切です。なぜならそれがデザインする製品の土台となるからです。」
― アリソン・ショー (Zendeskデザインシステム部門上級デザインマネージャー)

ショーは、明確な期限付きのゴールを定めて、色の問題に対する取り組みを始めました。「Zendeskは、2018年第2四半期末までに色コントラストの問題を100パーセント解消してWCAGのレベルAAに合格することを目指しました」。彼女は、数百の色の組み合わせを探り、要件を満たすかコントラストを確認しました。今ではZendeskは、鮮やかなカラースキームを使った美しくアクセシブルなデザインシステムを保有しています。

ZendeskのGardenデザインシステムを作成する際、デザインシステム部門上級デザインマネージャーを務めるアリソン・ショーは、2018年第2四半期末までに、WCAGのレベルAAに合格できるよう、コントラストの問題を100%解消するという目標を掲げた

あらゆる人を対象に

アクセシビリティ関連の学習リソースは限りなく存在します。より幅広い相手を取り込めるコンテンツを作成できるようになりましょう。最初は、アクセシビリティの基本について学ぶことから始め、それがデザイン実践の全てに組み込まれるまで学習を続けましょう。

自分とは異なる生活を体験している人に製品を検証してもらうとよいでしょう。アクセシビリティは、後から思いついて付け足すべきものではありません。また、チームの他の人にデザインのアクセシビリティを任せてはいけません。W3Cが提唱しているように、「Webアクセシビリティは一部の人には不可欠な機能です。そして、すべての人に利用価値のあるものです」。よりインクルーシブな未来を目指しましょう！

この記事はDesigning Accessible Experiences at Scale（著者:Andi Galpern）の抄訳です