5.3 アクセシビリティ

概要と動機

アクセシビリティ(しばしば「a11y」と短縮されます)とは、障害のある人々が知覚し、理解し、ナビゲートし、使えるソフトウェアを築く実践です。それには、目が見えない、あるいは弱視の人、耳が聞こえない、あるいは聞こえにくい人、運動の障害のある人、認知や学習の違いのある人、そして腕の骨折、明るい日差し、騒がしい部屋のような、一時的あるいは状況的な制限に直面する人が含まれます。およそ5人に1人が障害を持ち、誰もがどこかの時点で、アクセシブルなデザインの恩恵を受けます。これはニッチな配慮ではありません。品質の基準線です。

大きなチームにとって、アクセシビリティは、個人の善意に任されるのではなく、システムに組み込まれなければなりません。多くのチームが一つのプロダクトに出荷するとき、たった一つのアクセシブルでないコンポーネント(ラベルのないフォームの項目、色だけの状態インジケーター、モーダルのキーボードトラップ)が、障害のあるユーザーをジャーニー全体から締め出しえます。アクセシビリティを共有のコンポーネント、デザイントークン、テストのパイプライン、完了の定義に組み込むことが、規模でそれを確実にする唯一の方法です。後から後付けするのは、高価で間違いやすい。設計に組み込むのは、安く持続します。

政府にとって、アクセシビリティは法的要件であり市民的義務であって、あれば良いものではありません。公共サービスはすべての公衆の構成員に仕えなければならず、障害のある市民にはしばしば代わりの提供者がいません。政府のウェブサイトがアクセシブルでなければ、他の方法で給付、免許、投票を得ることができません。世界中の法律と標準が、公的機関に、そしてますます民間部門にも、アクセシビリティを義務づけています。本章は、アクセシビリティを三つのことを同時に扱います。法的義務、倫理的義務、そして単に良いデザイン。

関連項目: 5.2章(UIデザインとデザインシステム)、5.6章(フロントエンドエンジニアリング)、5.1章(UXの基礎)。

主要原則

アクセシビリティは、セキュリティやパフォーマンスのような基準となる品質属性であり、任意の機能ではありません。
POURの原則。インターフェースは、知覚可能(Perceivable)、操作可能(Operable)、理解可能(Understandable)、堅牢(Robust)でなければなりません。
まずセマンティックHTML。ARIAは本物のギャップを埋めるためだけに使い、ネイティブ要素の代わりには決して使いません。
マウスで使えるものは、すべてキーボードだけで使えなければなりません。
色、形、位置だけで情報を伝えてはいけません。
自動化されたツールが捉えるのは問題の一部だけです。手作業と支援技術のテストが不可欠です。
アクセシブルなデザインは、全員にとってより良いデザインです(障害のある人々のために作られた機能がすべてのユーザーに恩恵をもたらす、「縁石の切り下げ効果」)。
障害のある人々のためだけでなく、障害のある人々とともに設計しテストします。

推奨事項

WCAGに沿って設計し築き、現行の標準を目指す

ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は国際的な基準です。WCAG 2.1と2.2は、四つのPOURの原則のもとに整理され、適合レベルA、AA、AAAのテスト可能な達成基準を持ちます。基準線としてレベルAAを目指してください。ほとんどの法律が参照するレベルです。WCAG 2.2は、フォーカスの可視性、ターゲットのサイズ、認知負荷の軽減の基準を加えます。WCAG 3.0は、異なる構造を持つ、まだ開発中の新しい後継です。注視しつつも、今日は2.2 AAに沿って築いてください。ガイドラインを天井ではなく床として扱ってください。すべての基準に合格しても、本当に使える体験が保証されるわけではありません。

セマンティックHTMLと正しいARIAを使う

ネイティブのHTML要素(ボタン、リンク、フォームのコントロール、見出し、リスト、ランドマーク)には、組み込みのアクセシビリティのセマンティクス、キーボードの振る舞い、支援技術のサポートが付いてきます。まずそれらを使います。ARIA(Accessible Rich Internet Applications)のロール、状態、プロパティには、HTMLでは表現できないカスタムウィジェットを記述するためだけに手を伸ばし、ARIAオーサリングプラクティスに従います。ARIAの第一のルールは単純です。ネイティブ要素で足りるなら、ARIAを使わない。誤ったARIAは、ないよりも悪い。スクリーンリーダーを積極的に誤導するからです。ページに論理的な見出しの構造、意味のあるラベル、画像の代替テキスト、メディアのキャプションと書き起こし、各ラベルとそのコントロールのプログラム上の結びつきを与えます。

キーボードと支援技術の操作性を保証する

すべての対話的な要素は、キーボードだけで、論理的な順序で、はっきり見えるフォーカスのインジケーターを伴って、到達し操作できなければなりません。キーボードトラップを避けます。コンテンツが変わるときは、フォーカスを意図して管理します。ダイアログが開くときにフォーカスをそこへ移し、閉じるときに戻し、ライブリージョンを通じて動的な更新を通知します。デスクトップとモバイルのスクリーンリーダー、画面拡大、音声操作、スイッチアクセスを含む、本物の支援技術でテストします。そして、モーションの軽減やコントラストの増加のようなユーザーの設定を尊重します。

自動化されたツール、手作業のレビュー、本物のユーザーでテストする

自動化されたアクセシビリティのスキャナーは価値があり、あらゆる変更でパイプラインの中で走らせるべきです。しかし、調査は一貫して、それらが本物の問題の少数、およそ3分の1しか捉えないことを示しています。残りは人間の判断を要します。キーボードでのウォークスルー、スクリーンリーダーのテスト、コントラストのチェック、コンテンツが実際に理解できるかを問うこと。何より重要なのは、ユーザビリティテストに障害のある人々を含めることです。アクセシビリティの受け入れ基準を完了の定義に組み込み、問題がローンチ前の監査ではなくストーリーごとに捉えられるようにします。

アクセシビリティを英雄的ではなく組織的にする

アクセシビリティをデザインシステムに焼き込み、コンポーネントが既定でアクセシブルに出荷されるようにします。デザイナー、エンジニア、コンテンツの作成者、プロダクトマネージャーがそれぞれ自分の責任を知るよう、訓練を提供します。アクセシビリティの標準、所有者あるいはセンター・オブ・エクセレンス、是正のプロセスを確立します。アクセシビリティ声明を公開し、ユーザーが障壁を報告する方法を与えます。そしてアクセシブルに調達します。ベンダーとサードパーティのコンポーネントに適合を求め、(アクセシビリティ適合レポートのような)証拠の提供を求めます。

トレードオフ: 長所と短所

アプローチ	長所	短所
最初からアクセシビリティを組み込む	最も安く、持続し、全員にとってより良い	事前の訓練と規律が必要
後で後付け / 是正する	労力を先送りし、素早いローンチを妨げない	はるかに高価で、脆く、その間の法的な露出
自動テストのみ	速く、安く、CIで回帰を捉える	問題のおよそ3分の2を見逃す。偽りの自信
手作業 + 支援技術のテスト	本物のユーザビリティの障壁を捉える	より遅い。熟練したテスターとデバイスが必要
障害のあるユーザーとのテスト	実際の体験についての真実	募集の労力とコスト。敬意をもって行わなければならない

中心的なトレードオフは、事前の規律対先送りされたコストです。組み込まれたアクセシビリティは安く、全員の品質を改善し、法的な圧力のもとで後付けされたアクセシビリティは、高価で、不完全で、ストレスが大きい。長い目で見れば、「速度」に対する本当のトレードオフはありません。アクセシブルでないソフトウェアは、単にユーザーの5分の1には機能しないのです。それは節約ではなく欠陥です。

チームで議論すべき問い

アクセシビリティの回帰は、壊れたテストと同じようにビルドを失敗させますか。そうでないなら、なぜですか。 自動化されたスキャナーは問題の約3分の1しか捉えませんが、それらが捉えるもの(欠けたラベル、コントラストの失敗、ラベルのないコントロール)は、CIで捉えるのは安く、ローンチ前の監査で見つけるのは高価です。回帰をビルドの失敗として扱うことが、アクセシビリティを、英雄的な個人の努力から、確実なシステムの性質へと動かし、それが、多くのチームが一つのプロダクトに出荷するときに機能する唯一のものです。どのチェックがブロックし、どれが助言で、誰が失敗をオーバーライドできるかを決めてください。現在のスキャナーの結果と完了の定義を会議に持ち込んでください。アクセシビリティの基準がストーリーごとの完了の定義に書き込まれていなければ、期限が迫った瞬間に優先順位を下げられます。
カスタムウィジェットのルールは何で、ARIAが出荷される前に誰がレビューしますか。 ネイティブのHTML要素には、キーボードの振る舞いと支援技術のサポートが無料で付いてきて、誤ったARIAはスクリーンリーダーを積極的に誤導するのでないよりも悪い。セマンティックHTMLが既定であり、あらゆるカスタムウィジェット(オーダーメイドのドロップダウン、日付ピッカー、モーダル)は、マージの前にARIAオーサリングプラクティスに従ったキーボードとスクリーンリーダーのウォークスルーを要することに合意してください。これは、多くのチームが再利用する対話的なコンポーネントで最も重要です。キーボードトラップのある一つの壊れたモーダルが、障害のあるユーザーをジャーニー全体から締め出しうるからです。カスタムウィジェットの一覧を持ち込み、どれが実際のスクリーンリーダーでテストされたかを問ってください。されていないものは、共有のコードに隠れた負債です。
アクセシビリティのオーバーレイについての方針は何で、本当の解決策だと信じる人はいますか。 オーバーレイは、サイトを適合にする一行のスクリプトとして売られ、法的な圧力が来て期限が迫ると魅力的に映ります。それらは本当の適合を届けず、支援技術のユーザーの体験を悪化させえ、政府にとっては、根底の法的義務を満たしません。問題を覆い隠すウィジェットを買うのではなく、セマンティックなマークアップ、キーボードのサポート、障害のある人々とのテストに投資することを明示的に決めてください。オーバーレイのサブスクリプションのコストを持ち込み、コンポーネントとパイプラインにアクセシビリティを一度組み込むコストと比べてください。これを早期に枠づけることで、後の、お金を使って何も直さない、慌てた調達の決定を防げます。
障害のある人々はデザインとテストの一部ですか。それとも、自分たちが発明した想像上のユーザーのために設計し続けていますか。 自動化されたスキャナーや専門家の監査でさえ、マークアップが適合しているかを教えますが、目の見えないユーザーがチェックアウトを完了できるか、認知障害のある人があなたのエラーメッセージを理解できるかは教えません。障害のある参加者を関与させることが、真実の唯一の源で、築くものを変えますが、公平にどう募集するか、時間に対してどう報酬を払うか、一人の参加者をあらゆる障害の代弁者として扱うのをどう避けるかという本物の問いを提起します。現在のリサーチの名簿、募集と支払いの実践、過去一年に何件のスタディに障害のある参加者が含まれていたかの誠実な数を持ち込んでください。大きな組織では、公正な報酬を伴い、視覚、聴覚、運動、認知のニーズをカバーする継続的なパネルが、これを一度きりのジェスチャーから、頼れる入力に変えます。政府では、仕える公衆を関与させることは、しばしば法的で市民的な義務の一部であり、任意の礼儀ではありません。
サードパーティのコンポーネントを買ったり組み込んだりするとき、アクセシビリティの証明を求め、誰がそれを確認しますか。 大きなプロダクトに出荷されるものの多くは、社内で書かれたものではありません。ライブラリの日付ピッカー、iframeの決済ウィジェット、チャートのパッケージ、SaaSのモジュール全体。一つのアクセシブルでない組み込みのコンポーネントが、自分のコードがどれほどきれいでも、ジャーニー全体を失敗させえ、一度配線されると、置き換えは高価です。アクセシビリティが調達の要件であること、ベンダーがアクセシビリティ適合レポート(製品がWCAGに対してどう測られるかを述べる、VPATのような文書)を提供しなければならないこと、そして誰か技術的な人が、それを仕舞い込むのではなく、主張を検証することを決めてください。サードパーティのコンポーネントの目録を持ち込み、どれに現在の信頼できる適合の証拠があるかを問ってください。企業と政府の購買では、WCAG 2.2 AAへの適合と是正の権利を契約に書き込んでください。署名前になされた約束は、稼働後に発見された障壁よりはるかに安く徹底できるからです。
目標とする適合レベルは何で、誰がそれを所有し、標準が動くにつれてどう最新に保ちますか。 WCAG 2.2 AAは今日の床で、ほとんどの法律が参照しますが、2.2は多くのチームがまだ採用していない基準を加え、WCAG 3.0は異なる構造で来ようとしています。名前のある所有者がいなければ、標準はずれます。チームごとに異なるバージョンを目指し、誰もギャップを追跡せず、適合は監査の間に静かに腐ります。築く正確なバージョンとレベル、誰がそれを引き上げる権限を持つか、新しい基準がデザインシステムと完了の定義にどう届くかを決めてください。現在の述べられた目標、チームが実際にそれを満たす所の証拠、飛ばしてきた2.2の基準を採用するための短いロードマップを持ち込んでください。大きなあるいは公的な組織では、アクセシビリティの所有者あるいはセンター・オブ・エクセレンス、公開されたアクセシビリティ声明、次の標準バージョンの文書化された計画が、規制当局や裁判所に、善意ではなく証拠で答えられるようにします。

セクター別の視点

スタートアップ。 ここでは速度があなたに有利です。アクセシビリティは、コードベースが小さいときに最も安いからです。最初のスプリントから、CIに自動化されたスキャナーを、プルリクエストのチェックリストにキーボードのウォークスルーを加え、キーボードとスクリーンリーダーのサポートを無料で得られるようセマンティックHTMLに頼ってください。オーバーレイと重いツールは飛ばします。見返りは、顧客の調達チームが商談の途中で適合レポートを求めたとき、慌てずに数日で答えられることです。

小規模事業者。 アクセシビリティの専門家がおらず予算も厳しいので、築くのではなくアクセシビリティを買ってください。すでに適合し、そう述べているプラットフォーム、テーマ、コンポーネントライブラリを選び、アクセシビリティ声明を公開するベンダーを好みます。無料のツール、キーボードのみのチェック、コントラストのチェッカー、すべての項目への明確なラベルで、高価値の基本は自分でカバーしてください。それらが顧客を最も頻繁に排除する失敗を捉えます。間違った、あるいは使えない自動化されたフローは、失われた顧客として扱ってください。小規模事業者が、頼れる支援付きのチャネルを提供することはまれだからです。

大企業。 規模では、仕事は、アクセシビリティを多くのチームにわたるシステムの性質にすることです。デザインシステムで既定でアクセシブルなコンポーネントを出荷し、CIで回帰をゲートし、是正のプロセスとデザイナー、エンジニア、コンテンツ作成者への訓練を備えた所有者あるいはセンター・オブ・エクセレンスを立ち上げます。適合を時間とともに指標として追跡し、WCAGへの適合を調達に書き込み、一つの組み込みウィジェットが共有のジャーニーを静かに失敗させないよう、サードパーティのコンポーネントをポートフォリオとして管理します。

政府。 アクセシビリティは法的義務であり市民的義務です。障害のある市民には、給付、免許、投票のための代わりの提供者がしばしばいないからです。法域が引用する標準(たとえばSection 508、EN 301 549、WCAG 2.2 AAに対応づけられた欧州アクセシビリティ法)に沿って築き、障壁を報告する経路を備えたアクセシビリティ声明を公開し、仕える障害のある公衆とテストしてください。オーバーレイを本物の適合の代替として拒否し、ベンダーに信頼できる証拠と契約での是正の権利を求めます。

事例

スタートアップ。 採用ツールを築く3人のスタートアップは、後で直すより、アクセシブルであり続けるほうが安いと考え、最初のスプリントから、ビルドにアクセシビリティのスキャナーを、プルリクエストのチェックリストに簡単なキーボードのウォークスルーを加えました。中規模の顧客の調達チームが商談の最中にアクセシビリティ適合レポートを求めたとき、スタートアップはすでにセマンティックHTMLを使い、すべての項目にラベルを付け、あらゆる所で見えるフォーカスを持っていたので、慌てず数日で答えられました。その備えは、同じ要件で競合が落とした取引を勝ち取りました。

大企業。 大手の小売業者は、目の見えない顧客がスクリーンリーダーでチェックアウトを完了できなかったために、集団訴訟に直面しました。和解と弁護士費用を超えて、会社は裁判所が監督するスケジュールのもとで是正しなければなりませんでした。その後、アクセシビリティをデザインシステムとCIパイプラインに組み込み直し、完了の定義にスクリーンリーダーのテストを加え、チームを訓練しました。作り直されたアクセシブルなチェックアウトは、全員のコンバージョンを改善し、サポートへの連絡も減らしました。スクリーンリーダーのユーザーを助けた修正(明確なラベル、エラーメッセージ、論理的な順序)は、すべてのユーザーを助けたのです。

政府。 公的な給付機関は、オンライン申請がWCAG 2.1 AAを満たすことを法的に求められていました。目の見えない、弱視、キーボードのみ、認知障害のあるユーザーとの早期のテストにより、色だけの「必須項目」のインジケーター、アクセシブルでない日付ピッカー、通知されない検証エラーが、人々の完了を妨げていることがわかりました。セマンティックなマークアップ、見えるフォーカス、ライブリージョンのエラー通知、平易な言葉のヘルプでこれらを直したことで、障害のある市民が初めて自力で申請できるようになりました。それは対面の支援への依存を減らし、サービス提供のコストを下げながら、法的義務を満たしました。

ビジネスケース: 動機、ROI、TCO

ビジネスケースは、市場の到達範囲、法的リスク、サービス提供のコスト、品質にかかっています。障害のある人々とその家族は、かなりの購買力を持ち、彼らを排除することはそれを手放すことです。アクセシブルなサービスは、高価な支援付きのチャネル(電話と対面の支援)の必要を減らし、特に政府にとっては直接の運用上の節約です。そして、アクセシビリティの改善(明確なラベル、キーボードのサポート、読みやすいコンテンツ、堅牢なマークアップ)は全員を助けるので、通常、全体の完了と満足度を上げます。

TCOでは、採用のコストは、訓練、ツール、コンポーネントとパイプラインへのアクセシビリティの組み込みで、最初から行えばすべて控えめです。採用しないコストは深刻で、いくつかの方向から来ます。法的責任(訴訟、和解、裁判所が命じる是正、規制上の罰則)、期限の圧力のもとでの後付けのはるかに高い費用、評判の損害、そして排除されたユーザーに、より高価なチャネルで仕える継続的なコスト。後付けは通常、設計に組み込むことのコストの数倍かかります。

リーダーシップに論拠を示すには、適用される所では法的義務から始めてください(政府には交渉の余地がなく、ますます民間部門にもそうです)。それから、排除している潜在的な母集団、その排除による支援付きチャネルのコスト、すべてのユーザーにとっての「縁石の切り下げ」の利得を定量化します。アクセシビリティを、慈善ではなく、リスク管理に品質を加えたものとして位置づけます。

アンチパターンと落とし穴

ローンチ前のチェックボックスとしてのアクセシビリティ: 継続的な実践の代わりに最後に行う監査で、高価な土壇場の手戻りを保証すること。
「divスープ」: 汎用的な要素にクリックハンドラーを付けた非セマンティックなマークアップで、支援技術には見えない。
ARIAの誤用: 壊れたマークアップにARIAをボルトで留め、素のマークアップよりもスクリーンリーダーを誤導すること。
色だけの情報: 色だけで示される状態で、色覚に特性のあるユーザーには見えない。
見えないフォーカス: 見た目のためにフォーカスのアウトラインを取り除き、キーボードのユーザーを取り残すこと。
キーボードトラップ: フォーカスを閉じ込めたり失ったりするモーダルとウィジェット。
自動スキャンへの慢心: スキャナーに合格して、プロダクトがアクセシブルだと想定すること。
アクセシビリティのオーバーレイ: 本物の適合を届けず、体験を悪化させうる、サードパーティの「一行の修正」ウィジェット。
リサーチからの障害のあるユーザーの排除: 本物のユーザーでテストする代わりに、想像上の障害のあるユーザーのために設計すること。

成熟度モデル

レベル1: 開始。 アクセシビリティの実践がありません。問題は、ユーザーが苦情を言うか訴訟が来たときにだけ発見され、対応は反応的です。マークアップは非セマンティックでテストされず、誰も問題を所有しません。

レベル2: 発展。 認識があり、一部のチームがそれに基づいて行動します。あるビルドの自動化されたスキャナー、ある所のキーボードのウォークスルー、大きなリリースの前のローンチ前の監査。実践は基本的でチーム間で一貫せず、アクセシビリティはまだ後期のチェックリストで、スケジュールの圧力のもとでしばしば優先順位を下げられます。

レベル3: 標準化。 WCAG 2.2 AAが文書化された標準で、組織全体で徹底されています。アクセシビリティがデザインシステムに組み込まれ、コンポーネントは既定でアクセシブルに出荷され、自動と手作業でテストされ、完了の定義に書き込まれています。チームは訓練され、所有者あるいはセンター・オブ・エクセレンスが存在し、是正のプロセスが定義されています。

レベル4: 管理。 アクセシビリティが、ベースラインに対するデータで測定され、制御されています。組織は、適合の指標を時間とともに追跡し(スキャナーの合格率、重大度ごとの未解決の障壁の数、重要なジャーニーのスクリーンリーダーのテストのカバレッジ、是正までの時間)、チームごとにダッシュボードで報告し、回帰を助言的な警告ではなくビルドの失敗として扱います。目標はベースラインに対して設定され、進捗はレビューされるので、遅れるチームは、監査が見つける前に見えます。

レベル5: オーケストレーション。 アクセシビリティは継続的に改善され、組織全体に統合されています。障害のある人々は、リサーチとテストの一部として定期的に参加し、アクセシビリティは調達、デザイントークン、CIに組み込まれています。組織は標準が動くにつれて適応し(新しいWCAGの基準を採用し、WCAG 3.0に備え)、サプライチェーン全体が適合するよう、ベンダーとパートナーに影響を与えます。

議論のためのアイデア

期限が迫ったときに、アクセシビリティの優先順位が下げられるのをどう防ぎますか。
あなたのリスクの状況に合う、自動、手作業、ユーザーのテストの正しい組み合わせは何ですか。
アクセシビリティの適合を、ベンダーの契約と調達にどう書き込むべきですか。
WCAGへの適合と、障害のある人々にとっての本当のユーザビリティとのギャップをどう扱いますか。
今日は2.2に沿って築きながら、チームはWCAG 3.0にどう備えるべきですか。
障害のあるリサーチの参加者を、どう公正で敬意をもって募集し、報酬を払いますか。

要点

アクセシビリティは基準となる品質属性であり、政府にとっては法的要件です。
床としてWCAG 2.2 AAに沿って設計し、POURの原則をメンタルモデルとして使います。
まずセマンティックHTML。ARIAは本物のギャップを埋めるためだけに、正しく使います。
自動化されたツールが捉えるのは問題の約3分の1です。手作業と支援技術のテストが不可欠です。
障害のある人々のためだけでなく、障害のある人々とともにテストします。
アクセシビリティを組み込むのは安く持続し、後付けは高価で脆い。
アクセシブルなデザインは全員にとってより良いデザインです。縁石の切り下げ効果は本物です。

参考文献とさらなる読み物

W3C, Web Content Accessibility Guidelines (WCAG) 2.2 and supporting Understanding/Techniques documents
W3C, WAI-ARIA Authoring Practices Guide
W3C Web Accessibility Initiative (WAI), introductory and tutorial materials
Laura Kalbag, Accessibility for Everyone
Sarah Horton and Whitney Quesenbery, A Web for Everyone
Regine Gilbert, Inclusive Design for a Digital World
U.S. Section 508 standards and Section508.gov guidance
European standard EN 301 549 and the European Accessibility Act
Government accessibility guidance (e.g., UK GDS accessibility manual)
WebAIM, research and articles including the annual accessibility analyses