ウェブ・インクルーシブデザイン　Webのアクセシビリティとインクルージョンを実現するための実践ガイド

• 作者:Regine Gilbert
• マイナビ出版

Amazon

目次・概要

• 第1章 アクセシビリティを考慮したデザイン
• 第2章 アクセシビリティ、コンテンツ、HTML、JavaScript、CSS、そしてARIAの世界
• 第3章 わずらわしい＝おそらくアクセシブルではない
• 第4章 コンプライアンスとアクセシビリティ
• 第5章 未来のためのビジョンを描く：アクセシビリティのためのデザイン戦略
• 第6章 インクルーシブデザインリサーチ
• 第7章 支援技術
• 第8章 インクルーシブデザインの実現に向けて
• 第9章 ユーザビリティテスト
• 第10章 Webを超えて

著者はレジーン・M・ギルバート氏。UXデザイナーであり、国際アクセシビリティプロフェッショナル協会が認定するアクセシビリティの専門家。
もともと障害を持つご家族と暮らした影響から、アクセシビリティに興味を持ちガイドラインを整えたり、トレーニングを実施されているとのこと。

この本では、主にデザイン要件の中に最初からアクセシビリティを組み込んでおけば、アクセシビリティとデザインは継ぎ目のないプロセスになるというアイデアが紹介されています。

インクルーシブデザインとは

インクルーシブは「多様な人を包摂する」こと。
インクルーシブデザインとは「民間・公共を問わずあらゆるサービスに多様なユーザーがアクセスし、理解し、操作できるようにする」こと。

日本の状況

さまざまな疾患・障害を持つ人が日本では964万人、割合にすると約7.6%の人が何かしら障害を抱えて生活し、さらにその中の95%の人が入院をせずに生活している。

障害者の表記

障害の原因を個々人の機能障害や他社との差異に置くのではなく、社会のあり方にあるとする考えに基づくため本書内では「障害者」と表記。

ポイント

気になった点のメモです。

第1章 アクセシビリティを考慮したデザイン

アクセシビリティとインクルーシブデザイン

「アクセシビリティ」とは、誰もが抵抗なくアクセスできるようにすること。（性質）
「インクルーシブデザイン」とは、すべての人のためにプロダクトをつくること。（方法論）

障害の社会モデルと医学モデル

本書では「社会モデル」を前提。

• 社会モデル
  • 社会のあり方に障害の原因があるとする考え方。
  • 障害者の人生の選択を制限する障壁（バリア）を取り除くことを検討する。
• 医学モデル
  • 個人の機能障害や他社との差異に原因があるとする考え方。
  • 心身の機能障害や差異は医療その他の治療によって「治す」か、交換により回復すべきと考える。

5W1H

アイデアが浮かんだら、形にする前に5W1Hを考える。

• Who：あなたのプロダクトを使うのは誰ですか？
• What：彼らはなにをしていますか？
• Where：彼らはどこでそれを使いますか？
• When：彼らはいつそれを使いますか？
• Why：彼らはなぜそうするのですか？
• How：彼らはどうやってそれを使っていますか？

さまざまな人が恩恵を受ける

障害を障害抱える人のためにデザインをすれば、状況によって制限を感じる人もその恩恵を受ける。
たとえば、片腕の人のためにデザインされたデバイスは、手首を一時的に怪我している人や幼児を腕に抱えた新米の親にも効果的に使ってもらえる。
これを「ペルソナ・スペクトル」と呼ぶ。

第2章 アクセシビリティ、コンテンツ、HTML、JavaScript、CSS、そしてARIAの世界

Webアクセシビリティ

Webアクセシビリティとは「Webサイト、ツール、およびテクノロジーが、障害を持つ人たちが使えるように設計され、開発されていること」とW3Cでは定義されている。
つまり、障害を持つ人たちが次のことをできる状態にあること。

• Webを認識して理解し、Web上を自由に動き回り、必要なインタラクションをする
• Webに貢献する。

HTMLのベストプラクティス

• コンテナ要素はレイアウトのみに使う
  • <div> や <span> のような要素はレイアウト専用。
• 他のHTML要素を本来の意図通りに使う
  • <header>, <nav>, <main>, <article>, <aside>, <footer>
• ヘッダー
  • h1は1ページにつき1個で、ページタイトルと一致させる
  • 階層を上げるときはスキップ不可、下げるときはスキップ可
    • 例：h1, h2, h3, h2, h3, h4, h2, h3, h4

ボタン、モーダル、フォーカスなどの動作はJavaScriptで制御できるが、アクセシビリティの観点からはJavaScriptの仕様はある程度に限定にするのが理想で、セマンティックHTMLとCSSに比重を置く。

第3章 わずらわしい＝おそらくアクセシブルではない

よりアクセシブルなプロダクトをつくるためにできること

• 行動を促す明確な呼びかけ
  • ボタンやリンクをしっかり区別して見せる
• 明快なレイアウト
  • サイトのユーザーにとってももっとも論理的なレイアウトにする
• タイポグラフィ
  • 読みやすいタイポグラフィを採用する
• フィルター適用の昨日
  • サイト上でユーザーがフィルターをコントロールできるようにする
• 明快なナビゲーション
  • 次にどこへ進めば良いかをはっきり示す
• 適切で関連のあるコンテンツ
  • コンテンツがレイアウトと衝突していないことを確認する
• コンテンツへのジャンプ
  • ユーザーが「コンテンツへジャンプ」できるようにする
• 適切なコントラスト
  • カラーコントラストチェッカーを使って、色づかいがガイドラインに準拠していることを確認する

第4章 コンプライアンスとアクセシビリティ

WCAGの「POUR」

2018年にアップデートされたWCAGの骨子は「POUR」という呼び名で知られる四原則でできている。

• 知覚可能（Perceivable）
• 操作可能（Operable）
• 理解可能（Understandable）
• 堅牢性（Robust）

POURの概要と実例

• 知覚可能
  • 代替テキストを提供できること
    • Instagramでの代替テキスト追加機能
  • キャプション（字幕）の提供
    • Yahoo!の動画でのクローズドキャプション機能の提供
  • 音声認識
• 操作可能
  • キーボードアクセシビリティ
    • Google Chromeブラウザのキーボードショートカット
  • ジェスチャー
    • iPhoneにおける電話のシェイク
• 理解可能
  • エラーの特定
    • フォーム入力画面でのバリデーション
• 堅牢性
  • あらゆる種類の支援技術と互換性があること

第5章 未来のためのビジョンを描く：アクセシビリティのためのデザイン戦略

デザインフレームワークを用いる

インクルーシブデザインの実現に向けた取り組みは、誰のためにつくろうとしていて、誰を排除してしまう可能性があるかをはっきりさせるところからはじまる。
そのためプロジェクトのスタート時点で、デザイン戦略（例えば著者が作成したEVVCCフレームワーク）を用いることがプロダクトの生産や開発の肝となる。

• 共感（Empathy）
  • 同僚や顧客が必要とすることを理解し、応じる能力
• 価値（Value）
  • 組織の価値観、目標、同僚や顧客に対する説明責任が共有され一致していること
• ビジョン（Vision）
  • 組織の規範のおおもとにあって中核をなす共通の信念
• コンテキスト（Context）
  • プロジェクト、人、緊急性、リスク、ベネフィット、およびさまざまな状況要因に関連する課題
• コミュニケーション（Communication）
  • 対話やプロダクトのニーズ、目標、意図、フィードバックなどの表明

Airbnbが採用する「Another Lens」

AirbnbではAnother Lensというツールを採用している。

これは偏った視点に対峙し、思慮深く、インクルーシブなものづくりをできるようになるために作られたツールで、次の基本原則がある。

• バイアスのバランスを取る
  • あなた自身の生まれついてのもの、育ててきたもの、行動に関係するもの、さまざまなレンズがあり、誰もがレンズを持っている。自分が持っていないレンズについても考える
  • 確証バイアスを常に意識し、あなたが取り組むことがどんな不均衡をもららす可能性があるかを考える
• 逆を考える
  • 「逆を考える」ことが確証バイアスの克服に直接的な影響がある
  • 同類性をもった人だけでなく、まったく違う視点を持つ人にも意見を聞く
• グロースマインドセットを受け入れる
  • グロース（成長型）マインドセットの持ち主は、自分の特性や能力には成長や改善の余地があると信じ、学習し、柔軟性を高めるための機会として経験を捉える

第6章 インクルーシブデザインリサーチ

リサーチ計画書

早い段階でリサーチを行うこと、はじめからアクセシビリティを計画に入れることこそが組織のためになる。
下記はリサーチ計画書の内容例。

• リサーチの目的
• プロダクトの使用状況
• ゴール（目標）
• リサーチの優先事項
• 手法
• 懸念事項（失敗要因になりそうなこと）
• タイムフレーム
• 質問
• 参加者（対象者）
• スクリプト
• 倫理

ケーススタディ

ジョージア州のデジタルサービスプラットフォーム（失業給付、退役軍人サービス、税務情報など）をアクセシブルにするために行った例。

• カラーコントラストの向上
• フォントの読みやすさを向上
• セマンティックマークアップの改善
• キーボード操作のみでナビゲーションできるように改善
• スクリーンリーダー用に機能を拡張
  • ARIAラベルを使う。例えば、
    • 「つづきを読む」リンク
    • 「次へ」「戻る」リンク

第7章 支援技術

支援技術とは

支援技術は、5W1Hの中の「なにを（What）」にあたる。
つまり、障害を持つ人たちの補助や適応、そしてリハビリに使われるデバイスのこと。それらを使用するときのプロセスも支援技術に含まれる。
よく「適応技術」と同義語として扱われるが別物で、適応技術は障害を持つ人たちのために特別にデザインされた製品を指す。

ケーススタディ

Xbox アダプティブ コントローラーのアクセシブルなパッケージデザインの例。

開梱しやすいデザインにするため、Microsoftのデザイナーが事例探しから着手。
支援者たちにフィードバックをもらいながら、少ない手順にまとめるよりも、手順が増えたとしてもシンプルなステップを踏むデザインになった。

第8章 インクルーシブデザインの実現に向けて

アクセシビリティがビジネスにもたらす利点

デジタルプロダクトのデザインと開発にアクセシビリティを組み込むことは一人で抱えきれる仕事ではない。
リーダーが支持していない状況では実現はかなり難しいが、アクセシビリティがビジネスにもたらす下記のような利点をしっかり捉えて、まずは種まきから行うとよい。

• 差別と訴状を回避できる
• 幅広いオーディエンスにリーチできる
• プラスイメージの広報活動になる
• SEOが向上する
• ユーザビリティが向上する
• ソースコードの質が上がる

アクセシビリティをデザインシステムに組み込む

コーディングがはじまる前の段階で組み込むのが得策。
デザインシステムがチームにもたらす恩恵は次の通り。

• 自分たちのプロダクトに関連するアクセシビリティについて、チーム全員が理解していることを確認できる
• ユーザーストーリー、ワイヤーフレーム、要件定義などにアクセシビリティが盛り込まれる
• 全チームがアクセシビリティに責任を負うことと各チームの責任の範囲を明確にできる
• ナビゲーションが明確にドキュメント化される
• 色、フォーム、ナビゲーションのフォーカスなどの使い方が明確になる
• 新たに加わるメンバーが参照できる資料が整う

これは確かに、構想やデザイン段階からアクセシビリティに対しての考えがまとまってないと難しくなることが多いと実務を通して感じているためその通りだなと思った。

第9章 ユーザビリティテスト

ユーザーテストとユーザビリティテスト

• ユーザーテスト
  • プロダクトやサービスを使うことになる人（ユーザー）が持つニーズが何かをを確認すること
• ユーザビリティテスト
  • プロダクトやサービスに備わる機能に注目し、それが使えるかを確認すること

なぜユーザビリティテストを行うのか

1. 人が持つ能力の多様性に合わせた選択肢を提供することで、UXを底上げできる
2. 提供しようとしていプロダクトやサービスが使える人を増やせる
3. 市場シェアやブランドの認知を上げられる
4. 内部のテストでは見つけられないユーザビリティの課題を特定できる
5. 正しいことをできる！

ユーザビリティテストを行う前に観点を整理する。

• なんのためにテストを行うのか？
• プロダクトが実現しようとしていることはなにか？
• どのくらいの時間を使えるか？
• どのくらいの予算があるか？
• テストに使えるリソースはどのくらいか？
• 特別な機器やデバイスが必要になるか？
• ユーザーに何をしてもらうか？

第10章 Webを超えて

過去に作られたイノベーション

• 電話
  • 1870年代にアメリカにてアレクサンダー・グラハム・ベルによって発明。
  • ベルには進行性の難聴を患っていた母親がいたバックグランドがあった。
• インターネット
  • 難聴を抱えていたGoogleのエバンジェリスト、ヴィントン・サーフが1970年代にインターネットプロトコルの初代研究チームに加わる。
  • IPベースのネットワークが1981年に登場する。
• テキストメッセージ
  • マッティ・マッコネンが聴覚障害者がコミュニケーションを取れるようにするためにSMSを発明。

ユニバーサルデザイン

エクストリームユーザー（極端な事情や理由を持ってプロダクトやサービスと向き合っている人）のニーズを満たすものづくりに取り組むことが、結局は大勢に響くものを生み出す事例もある。

• 縁石カット
• 傾斜路
• 自動車のクルーズコントロールシステム
• スクリーンリーダー

感想

• デザイン戦略〜リサーチ〜WCAGの定義〜HTMLのコードレベルでこうやるとアクセシブルなどと、取り扱われている範囲が広かった。
  • それがインクルーシブデザインを実践する、ということなのだと解釈。
• 特にアクセシビリティについての記事を読む際に、どういうスタンスで取り組むべきかはぼんやりと理解していたが、それが社会モデルと定義されていたことを初めて知った。
• Airbnbの「Another Lens」、ググっても日本語の関連記事はあまりでてこなかったが何かをデザインするときに大事な視点だと感じた。
• 今後の展望としてVR/ARが書籍内でもピックアップされていたが、 Apple Vision Proで変わるWebサイトのデザインとナビゲーション あたりもWeb制作で考慮する点としてスタンダードになってくるのだろうかと思った。