ウェブアクセシビリティ
最新動向2018 - 2019
アクセシビリティの祭典 2019
Global Accessibility Awareness Day 2019

@caztcha

Website Usability Info
https://website-usability.info
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ

イントロダクション

今年の2月“WebAIM Million”

https://webaim.org/projects/million/✕

1,000,000 home pages• 100万ページで、59,653,607 件のエラー。つまり1ページあたり 59.6 件ものエラー。
• 97.8%のホームページで、何らかの WCAG への不適合を検出。
• 低いコントラスト (85%)、画像の代替テキスト不備 (68%)、空のリンクラベル(58%)、フォーム入力要素のラベル不備 (53%)、 ...

• 24.4％のホームページで、あいまいなリンクラベル ("click here", "more", "continue",etc.) を検出。

• 2,099,665 件ものレイアウトテーブルを検出。反面、データテーブルは 113,737 件。
いまだにレイアウトテーブルが多く用いられている。

ウェブアクセシビリティ改善の余地、まだまだたくさんありますね。

品質への社会的要求
アクセシビリティ ✕ UX デザインWCAG 2.1

品質への社会的要求

2019年も増加傾向？

UsableNet - 2018 ADA Web Accessibility Lawsuit Recap Reporthttps://blog.usablenet.com/2018-ada-web-accessibility-lawsuit-recap-report

38%

11%
小売

フードサービス業

10%

7%
旅行 / 宿泊施設

7%
エンタメ / 余暇産業

銀行 / 金融

セルフサービス

4%

教育
不動産
ヘルスケア
フィットネス
デジタルメディア / 代理店
保険
自動車
情報通信
燃料産業

訴訟増加の背景

ウェブのユーザーが増加し多様化している。
ウェブが生活に必要不可欠なインフラ/社会基盤となっている。
エンターテインメントを含む QOL 向上にウェブが不可欠になっている。

各国で進む法整備

ウェブアクセシビリティに関する法律/政策のデータベース

https://www.w3.org/WAI/policies/

欧州アクセシビリティ法 (European Accessibility Act: EAA)
が欧州議会で2019年3月13日に可決成立。
http://www.europarl.europa.eu/news/en/press-room/20190307IPR30749/more-accessibleproducts-and-services-for-disabled-and-elderly-people日本では…

東京都が条例で民間事業者に対しても合理的配慮を義務化。

http://www.fukushihoken.metro.tokyo.jp/shougai/shougai_shisaku/sabetsukaisho_yougo/
kaisyoujourei/sabetsu_kaisho_jourei.html

ウェブサイト制作 (または運用) と法律違法になるからしかたなくやらなきゃ…

法的義務化に対して改善のリソースが…

世の中には、PL (製造物責任)、食品安全、建築基準、など
モノづくりのあるところ、大抵は (ユーザーを守るための)品質基準の法律がある。

ウェブがこれだけ生活に根付いた基本インフラとなった現在、アクセシビリティを「当たり前」な「品質基準」とするならば、ウェブアクセシビリティに関する法規制はあって当然なのでは？
そのうえでクリエイティビティを発揮しよう！

アクセシビリティ ✕ UX デザイン

“inclusive design”
2017年頃からウェブアクセシビリティのコミュニティでさかんに言われるように。
狭い意味でのアクセシビリティ (WCAG の達成基準を満たす) だけでなく、障害者や高齢者を含むあらゆる人々のユーザー体験 (UX) に寄与するデザインを。

The Paciello Group“Inclusive Design Principles”(インクルーシブデザインの原則)
https://inclusivedesignprinciples.org/ja/
日本語訳 : 植木 真、土屋 一彦

同等の体験を提供する (Provide comparable experience)
あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。

状況を考慮する (Consider situation)
利用者は様々な状況であなたの作ったユーザーインターフェースを使います。状況に関係なく、あなたの作ったユーザーインターフェースが利用者に貴重な体験を提供できるようにしましょう。

一貫性を保つ (Be consistent)
馴染みのある慣例を用いて、それを一貫して適用しましょう。

利用者に制御させる (Give control)
利用者が自ら制御できるようにしましょう。利用者はそれぞれ好みの方法によって、コンテンツにアクセスして、コンテンツとやりとりできるようにすべきです。

選択肢を提供する (Offer choice)
特に複雑なタスクや標準的でないタスクには、利用者がそれらのタスクを完遂できるように、様々な手段を提供することを検討しましょう。

コンテンツの優先順位を付ける (Prioritise content)
ユーザーが主たるタスク、機能、情報に集中できるように、それらをコンテンツやレイアウト内で優先順位付けしましょう。

価値を付加する (Add value)
機能の持つ価値や、その機能によって様々な利用者の体験をどう向上させることができるかを考えましょう。

アクセシビリティ✕ UX デザイン (ユーザー中心設計)
が実践レベルで見られるように。

障害当事者をテスターにした行動観察やユーザーテスト

HCD (Human Centred Design : 人間中心設計) サイクル
(ISO 9241-210 より)

利用状況の把握と明確化

要求事項に対する設計の評価

ユーザービリティテスト
ヒューリスティック評価
エキスパートレビュー

要件定義書
コンテンツインベントリー
サイトマップナビゲーション設計
ワイヤーフレーム
プロトタイプ

要求事項を満たす設計による解決案の作成

ユーザー調査/分析
ペルソナ、CJM

ユーザーの要求事項の明確化

ユーザーシナリオ
ユーザー要求仕様書

HCD (Human Centred Design : 人間中心設計) サイクル
(ISO 9241-210 より)

利用状況の把握と明確化

要求事項に対する設計の評価

ユーザービリティテスト
ヒューリスティック評価
エキスパートレビュー

要件定義書
コンテンツインベントリー
サイトマップナビゲーション設計
ワイヤーフレーム
プロトタイプ

要求事項を満たす設計による解決案の作成

ユーザー調査/分析
ペルソナ、CJM

ユーザーの要求事項の明確化

ユーザーシナリオ
ユーザー要求仕様書

インクルーシブなペルソナ拡張
https://github.com/caztcha/Inclusive-Persona-Extensionもうひとつの傾向？

freee、アクセシビリティにも配慮したデザインシステム「Vibes」を整備。
https://speakerdeck.com/ymrl/dezainsisutemufalseshe-ji-toakusesibiriteifalseshi-xian

CSUN でも2018年に style guide(s) や pattern library(ies) に関するセッションが見られ始め、2019年に design system(s) に関するセッションが出てきている。

アクセシブルな
政府系デザインシステム
英国 (gov.uk)
https://design-system.service.gov.uk/

米国 (USWDS)
https://v2.designsystem.digital.gov/
2019年4月
2.0にアップデート

HCD (Human Centred Design : 人間中心設計) サイクル
(ISO 9241-210 より)

利用状況の把握と明確化

要求事項に対する設計の評価

ユーザービリティテスト
ヒューリスティック評価
エキスパートレビュー

要件定義書
コンテンツインベントリー
サイトマップナビゲーション設計
ワイヤーフレーム
プロトタイプ

要求事項を満たす設計による解決案の作成ユーザー調査/分析
ペルソナ、CJM

ユーザーの要求事項の明確化

ユーザーシナリオ
ユーザー要求仕様書

Design Systems
デジタルプロダクトのためのデザインシステム実践ガイド

一貫性のある
UI デザイン

統一的なブランド表現

効率的な実装デザインパターン (再利用可能な UI パターン) の種類「認知パターン」と「機能パターン」

認知パターン「スタイル」「ビジュアル (外観)」とも呼ばれる。インターフェースやブランドの個性やエートス (気風/特性) から導出される。

• 配色• インタラクションの動き• タイポグラフィ• アイコンデザイン• …など

認知パターン
背景色と文字(またはアイコン) のコントラスト「スタイル」「ビジュアル (外観)」フォーカスのとも呼ばれる。インターフェースや可視化 ブランドの個性やエートス (気風/特性) から導出される。

可読性

• 配色、
• インタラクションの動き• タイポグラフィ• アイコンデザイン
認知ノイズにならない…など•
控えめな動き機能パターン「モジュール」や「コンポーネント」とも呼ばれる。期待されるユーザー行動から導出される。

• ボタン• リンク• タブ• 各種フォーム要素• フィードバックメッセージ• カード• ナビゲーションメニュー• …など

セマンティックでマシンリーダブルなコード

UI 部品の慣習的な外観(●●らしさ)機能パターン「モジュール」や「コンポーネント」とも呼ばれる。期待されるユーザー

HTML と WAI-ARIA
タップ/クリック可能
行動から導出される。の適切な使い分け
領域の十分な大きさ

• ボタン
• リンク
• タブ
• 各種フォーム要素
見えない箇所のケア
フィードバックメッセージ•
運用可能な命名規則(alt や aria-label
カード•(id や class 名など)
ナビゲーションメニュー• の記載や多言語対応など)• …など

アクセシブルなデザインパターン (再利用可能な UI パターン)を利用して、効率的にアクセシビリティをスケールさせよう。

https://www.smashingmagazine.com/printed-books/form-design-patterns/

WCAG 2.1

• W3C勧告「WCAG (Web Content Accessibility Guidelines)」の新版。
• 2018年6月5日に正式に勧告。
• 旧版 (2.0) で十分にカバーできていなかった領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化。

• 17の新しい達成基準が追加 (既存の達成基準は変更なく維持)。

新しい達成基準をいくつか紹介

かなり「意訳」しているので、ぜひ原文をご参照ください。

日本語訳 (WAIC にて鋭意作業中！)

https://waic.github.io/wcag21/guidelines/ロービジョン

文字だけでなく、UI コンポーネントやグラフィカルなオブジェクトといった視覚的表現においても、隣接する色との間で十分なコントラストを保ちましょう。(達成基準 1.4.11 : レベル AA)

画面拡大
400%

横スクロールが発生しないこと

ユーザーが任意で画面表示を拡大しても、スクロールは縦または横のどちらかで読めるように(リフローするように) しましょう。(達成基準 1.4.10 : レベル AA)
ユーザーが任意で行間や文字間などの間隔を調整しても、コンテンツや機能が欠損しないようにしましょう。(達成基準 1.4.12 : レベル AA)ロービジョンのユーザー
は、「拡大鏡」を使ってマウスを画面上で動かしながら、コンテンツを注視する人が多い。

見ていたコンテンツが、マウスオーバー効果で唐突に覆い隠されると困る…

ユーザーの意図に反したマウスオーバー効果 (見ていたコンテンツが別のコンテンツに覆い隠される) やマウスアウト効果 (見ていたコンテンツが消える) が生じないようにしましょう。
(達成基準 1.4.13 : レベル AA)

モバイル

車椅子にデバイスをランドスケープ (横向き) で固定しているので、アプリの表示がポートレート (縦向き) 限定だと困るな…

コンテンツの表示や利用において、デバイスの特定の向き (ポートレートまたはランドスケープのどちらか一方だけ) を強要しないようにしましょう。(達成基準 1.3.4 : レベル AA)スワイプ
だけでなく…

一本指のタップでも！

デバイスを振ってアンドゥ

デバイスを傾けて次の/(操作の取り消し) をする

前のステップに進む

困難な人も…

特定のジェスチャ (スワイプのような動きや複数の指の同時タップなど) を強要しないようにしましょう。(達成基準 2.5.1 : レベル A)
機能を起動するのに、特定の動き (デバイスを振る、傾ける、など) を強要しないようにしましょう。(達成基準 2.5.4 : レベル A)

44 ✕ 44
CSS ピクセル以上

スクロールしようとして画面上を触れただけで機能が起動しないように。

UI コンポーネント (ボタンなど) にたまたま触れただけで、意図せず機能を引き起こすことのないようにしましょう。(達成基準 2.5.2 : レベル A)
タッチターゲットは、十分な大きさ (基本的に 44(達成基準 2.5.5 : レベル AAA)

44 CSS ピクセル以上) にしましょう。

キーボードショートカットに割り当てられた機能が、音声入力によって意図せず偶発することのないようにしましょう。(達成基準 2.1.4 : レベル A)
UI コンポーネント (たとえばボタンなど) で視覚的に表示されるラベルは、音声入力でも操作できるようにしましょう。(達成基準 2.5.3 : レベル A)

認知/学習パララックス(視差効果)

ユーザー操作に追従するアニメーション (スクロールに伴うパララックスなど) は眩暈などを引き起こす恐れがあるため、無効化できるようにしましょう。(達成基準 2.3.3 : レベル AAA)cf.

• 達成基準 2.2.2「一時停止、停止、非表示」(レベル A)• 達成基準 2.3.1「3 回の閃光、又は閾値以下」(レベル A)• 達成基準 2.3.2「3 回の閃光」(レベル AAA)

未記入の項目があるか、書式が適切でない項目があります。詳細は、各入力項目をご確認ください。
role=“alert”
お名前 [必須]

未記入です。

メールアドレス [必須]

不適切な書式です。

aria-live=“assertive”

foo
……

送信

操作に対するフィードバックで状況を伝えるメッセージが出る場合、それを見ることができないユーザーにもスクリーンリーダーを介して伝達されるようにしましょう。
(達成基準 4.1.3 : レベル AA)

操作がない場合
あと5時間30分後にデータが消えます。

無操作状態が続くとタイムアウトしてデータが損失する場合、残り時間を提示しましょう。
(達成基準 2.2.6 : レベル AAA)cf.

• 達成基準 2.2.1「タイミング調整可能」(レベル A)

まとめ品質への社会的要求
アクセシビリティ ✕ UX デザインWCAG 2.1

ウェブにおけるアクセシビリティとは？

ウェブの基本品質
ユーザー体験 (UX) の土台
ある目的を持ったユーザーに対して、障害などの条件ゆえにその人の目的達成やユーザー体験が妨げられることのないよう、デザインしたいもの。

The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.
ウェブが優れているところは、その普遍性 (みんなが使えること) である。
障害があるか否かに関わらず、誰でもアクセスできるということは、ウェブの本質的な在りかたなのである。
Tim Berners-Lee, W3C Director and inventor of the World Wide Webご清聴ありがとうございました。