--- 1. (表紙) セッションタイトル : ウェブアクセシビリティ最新動向 2018 - 2019 --- 2. (自己紹介) @caztcha Website Usability Info https://website-usability.info ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家 ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ --- 3. イントロダクション --- 4. 今年の2月 “WebAIM Million” WebAIM が、「WAVE」というアクセシビリティ検証ツールを用いた自動テストで、100万のホームページを検証。 https://webaim.org/projects/million/ (画像 : WebAIM Million のレポートページ) --- 5. (画像 : WebAIM Million で用いられたアクセシビリティ検証ツール「WAVE」のスクリーンショット) --- 6. WebAIM Million の結果サマリー - 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 件。いまだにレイアウトテーブルが多く用いられている。 --- 7. ウェブアクセシビリティ改善の余地、まだまだたくさんありますね。 --- 8. (本セッションの3つの視点) - 品質への社会的要求 - アクセシビリティ ✕ UX デザイン - WCAG 2.1 --- 9. 品質への社会的要求 --- 10. (画像 : ビヨンセの公式ウェブサイトに対する訴訟を伝えるニュースサイトのページ) --- 11. (画像 : ビヨンセの公式ウェブサイトに対する訴訟を伝える「女子 SPA！」のページ) --- 12. 障害を持つアメリカ人法（ADA）に基づく訴訟件数。2017年の814件から2018年には2285件へと、181%増加。 2019年も増加傾向？ Usablenet - 2018 ADA Web Accessibility Lawsuit Recap Report https://blog.usablenet.com/2018-ada-web-accessibility-lawsuit-recap-report --- 13. 訴訟を受けたウェブサイトの産業別割合 - 小売 ... 38% - フードサービス業 ... 11% - 旅行 / 宿泊施設 ... 10% - 銀行 / 金融 ... 7% - エンタメ / 余暇産業 ... 7% - セルフサービス ... 4% --- 14. - 教育 ... 3% - 不動産 ... 3% - ヘルスケア ... 3% - フィットネス ... 2% - デジタルメディア / 代理店 ... 2% - 保険 ... 1% - 自動車 ... 1% - 情報通信 ... 1%未満 - 燃料産業 ... 1%未満 --- 15. 訴訟増加の背景 - ウェブのユーザーが増加し多様化している。 - ウェブが生活に必要不可欠なインフラ/社会基盤となっている。 - エンターテインメントを含む QOL 向上にウェブが不可欠になっている。 --- 16. 各国で進む法整備 ウェブアクセシビリティに関する法律/政策のデータベース Web Accessibility Laws & Policies (W3C) https://www.w3.org/WAI/policies/ --- 17. 欧州アクセシビリティ法 (European Accessibility Act: EAA) が欧州議会で2019年3月13日に可決成立。 http://www.europarl.europa.eu/news/en/press-room/20190307IPR30749/more-accessible-products-and-services-for-disabled-and-elderly-people --- 18. 日本では... 平成28年4月1日から「障害者差別解消法」がスタート。 --- 19. 東京都が条例で民間事業者に対しても合理的配慮を義務化。 http://www.fukushihoken.metro.tokyo.jp/shougai/shougai_shisaku/sabetsukaisho_yougo/kaisyoujourei/sabetsu_kaisho_jourei.html --- 20. ウェブサイト制作 (または運用) と法律 - 違法になるからしかたなくやらなきゃ… - 法的義務化に対して改善のリソースが… --- 21. 世の中には、PL (製造物責任)、食品安全、建築基準、など モノづくりのあるところ、大抵は (ユーザーを守るための) 品質基準の法律がある。 --- 22. ウェブがこれだけ生活に根付いた基本インフラとなった現在、アクセシビリティを「当たり前」な「品質基準」とするならば、ウェブアクセシビリティに関する法規制はあって当然なのでは？ そのうえでクリエイティビティを発揮しよう！ --- 23. アクセシビリティ ✕ UX デザイン --- 24. “inclusive design” 2017年頃からウェブアクセシビリティのコミュニティでさかんに言われるように。 狭い意味でのアクセシビリティ (WCAG の達成基準を満たす) だけでなく、障害者や高齢者を含むあらゆる人々のユーザー体験 (UX) に寄与するウェブデザインを。 --- 25. The Paciello Group “Inclusive Design Principles” (インクルーシブデザインの原則) https://inclusivedesignprinciples.org/ja/ 日本語訳 : 植木 真、土屋 一彦 --- 26. (7つの原則) 同等の体験を提供する (Provide comparable experience) : あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。 状況を考慮する (Consider situation) : 利用者は様々な状況であなたの作ったユーザーインターフェースを使います。状況に関係なく、あなたの作ったユーザーインターフェースが利用者に貴重な体験を提供できるようにしましょう。 一貫性を保つ (Be consistent) : 馴染みのある慣例を用いて、それを一貫して適用しましょう。 --- 27. 利用者に制御させる (Give control) : 利用者が自ら制御できるようにしましょう。利用者はそれぞれ好みの方法によって、コンテンツにアクセスして、コンテンツとやりとりできるようにすべきです。 選択肢を提供する (Offer choice) : 特に複雑なタスクや標準的でないタスクには、利用者がそれらのタスクを完遂できるように、様々な手段を提供することを検討しましょう。 コンテンツの優先順位を付ける (Prioritise content) : ユーザーが主たるタスク、機能、情報に集中できるように、それらをコンテンツやレイアウト内で優先順位付けしましょう。 価値を付加する (Add value) : 機能の持つ価値や、その機能によって様々な利用者の体験をどう向上させることができるかを考えましょう。 --- 28. アクセシビリティ✕ UX デザイン (ユーザー中心設計) が実践レベルで見られるように。 --- 29. 障害当事者をテスターにした行動観察やユーザーテスト 2016年「アクセシビリティやるぞ！祭り」 2017年「アクセシビリティの祭典 2017」で「LIVEユーザーテスト」 2018年「AccSell Meetup 013」 2017年 ヤフー 2018年 弁護士ドットコム --- 30. HCD (Human Centred Design : 人間中心設計) サイクル (ISO 9241-210 より) - 利用状況の把握と明確化 (ユーザー調査/分析、ペルソナ、カスタマージャーニーマップ) - ユーザーの要求事項の明確化 (ユーザーシナリオ、ユーザー要求仕様書) - 要求事項を満たす設計による解決案の作成 (要件定義書、コンテンツインベントリー、サイトマップ、ナビゲーション設計、ワイヤーフレーム、プロトタイプ) - 要求事項に対する設計の評価 (ユーザービリティテスト、ヒューリスティック評価、エキスパートレビュー) --- 31. (先に挙げたユーザーテストは) HCD (Human Centred Design : 人間中心設計) サイクルのうち、「利用状況の把握と明確化」「要求事項に対する設計の評価」が、アクセシビリティ観点でも行われるようになってきていることを示している。 --- 32. インクルーシブなペルソナ拡張 https://github.com/caztcha/Inclusive-Persona-Extension --- 33. もうひとつの傾向？ --- 34. freee、アクセシビリティにも配慮したデザインシステム「Vibes」を整備。 https://speakerdeck.com/ymrl/dezainsisutemufalseshe-ji-toakusesibiriteifalseshi-xian --- 35. CSUN でも2018年に style guide(s) や pattern library(ies) に関するセッションが見られ始め、2019年に design system(s) に関するセッションが出てきている。 --- 36. アクセシブルな政府系デザインシステム 英国 (gov.uk) https://design-system.service.gov.uk/ 米国 (USWDS) : 2019年4月に、2.0にアップデート https://v2.designsystem.digital.gov/ --- 37. (ウェブアクセシビリティを「デザインシステム」で解決しようという試みは) HCD (Human Centred Design : 人間中心設計) サイクルのうち、「要求事項を満たす設計による解決案の作成」も、アクセシビリティ観点でも行われるようになってきていることを示している。 --- 38. 「Design Systems - デジタルプロダクトのためのデザインシステム実践ガイド」 - 一貫性のある UI デザイン - 効率的な実装 - 統一的なブランド表現 --- 39. デザインパターン (再利用可能な UI パターン) の種類 「認知パターン」と「機能パターン」 --- 40. 認知パターン 「スタイル」「ビジュアル (外観)」とも呼ばれる。インターフェースやブランドの個性やエートス (気風/特性) から導出される。 - 配色、 - インタラクションの動き - タイポグラフィ - アイコンデザイン …など --- 41. (認知パターンにおけるアクセシビリティの配慮) - 背景色と文字 (またはアイコン) のコントラスト - フォーカスの可視化 - 可読性 - 認知ノイズにならない控えめな動き --- 42. 機能パターン 「モジュール」や「コンポーネント」とも呼ばれる。期待されるユーザー行動から導出される。 - ボタン - リンク - タブ - 各種フォーム要素 - フィードバックメッセージ - カード - ナビゲーションメニュー …など --- 43. (機能パターンにおけるアクセシビリティの配慮) - セマンティックでマシンリーダブルなコード - HTML と WAI-ARIA の適切な使い分け - タップ/クリック可能領域の十分な大きさ - UI 部品の慣習的な外観 (●●らしさ) - 運用可能な命名規則 (id や class 名など) - 見えない箇所のケア (alt や aria-label の記載や多言語対応など) --- 44. アクセシブルなデザインパターン (再利用可能な UI パターン) を利用して、効率的にアクセシビリティをスケールさせよう。 --- 45. Adam Silver 著「Form Design Patterns」(Smashing Magazine 刊) https://www.smashingmagazine.com/printed-books/form-design-patterns/ --- 46. WCAG 2.1 --- 47. (画像 : Web Content Accessibility Guidelines (WCAG) 2.1 - W3C) --- 48. - W3C勧告「WCAG (Web Content Accessibility Guidelines)」の新版。 - 2018年6月5日に正式に勧告。 - 旧版 (2.0) で十分にカバーできていなかった領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化。 - 17の新しい達成基準が追加 (既存の達成基準は変更なく維持)。 --- 49. 新しい達成基準をいくつか紹介 かなり「意訳」しているので、ぜひ原文をご参照ください。 --- 50. 日本語訳 (WAIC にて鋭意作業中！) https://waic.github.io/wcag21/guidelines/ --- 51. ロービジョン --- 52. 文字だけでなく、UI コンポーネントやグラフィカルなオブジェクトといった視覚的表現においても、隣接する色との間で十分なコントラストを保ちましょう。(達成基準 1.4.11 : レベル AA) --- 53. ユーザーが任意で画面表示を拡大しても、スクロールは縦または横のどちらかで読めるように (リフローするように) しましょう。(達成基準 1.4.10 : レベル AA) (画像 : 画面拡大400%にしても、横スクロールが発生しないこと) ユーザーが任意で行間や文字間などの間隔を調整しても、コンテンツや機能が欠損しないようにしましょう。(達成基準 1.4.12 : レベル AA) --- 54. ユーザーの意図に反したマウスオーバー効果 (見ていたコンテンツが別のコンテンツに覆い隠される) やマウスアウト効果 (見ていたコンテンツが消える) が生じないようにしましょう。(達成基準 1.4.13 : レベル AA) (画像 : ロービジョンのユーザーは、「拡大鏡」を使ってマウスを画面上で動かしながら、コンテンツを注視する人が多い。見ていたコンテンツが、マウスオーバー効果で唐突に覆い隠されると困る…) --- 55. モバイル --- 56. コンテンツの表示や利用において、デバイスの特定の向き (ポートレートまたはランドスケープのどちらか一方だけ) を強要しないようにしましょう。(達成基準 1.3.4 : レベル AA) (画像 : 車椅子にデバイスをランドスケープ (横向き) で固定しているので、アプリの表示がポートレート (縦向き) 限定だと困るな…) --- 57. 特定のジェスチャ (スワイプのような動きや複数の指の同時タップなど) を強要しないようにしましょう。(達成基準 2.5.1 : レベル A) (画像 : To Do リストアプリで、スワイプだけでなく、一本指のタップでもタスクを消し込めるように。) 機能を起動するのに、特定の動き (デバイスを振る、傾ける、など) を強要しないようにしましょう。(達成基準 2.5.4 : レベル A) (画像 : デバイスを振ってアンドゥ (操作の取り消し) をしたり、デバイスを傾けて次の/前のステップに進めたりする操作が、困難な人もいる。) --- 58. UI コンポーネント (ボタンなど) にたまたま触れただけで、意図せず機能を引き起こすことのないようにしましょう。(達成基準 2.5.2 : レベル A) (画像 : スクロールしようとして画面上を触れただけで機能が起動しないように。) タッチターゲットは、十分な大きさ (基本的に 44 × 44 CSS ピクセル以上) にしましょう。 (達成基準 2.5.5 : レベル AAA) (画像 : タッチターゲットは 44 ✕ 44 CSS ピクセル以上に。) --- 59. キーボードショートカットに割り当てられた機能が、音声入力によって意図せず偶発することのないようにしましょう。(達成基準 2.1.4 : レベル A) UI コンポーネント (たとえばボタンなど) で視覚的に表示されるラベルは、音声入力でも操作できるようにしましょう。(達成基準 2.5.3 : レベル A) --- 60. 認知/学習 --- 61. ユーザー操作に追従するアニメーション (スクロールに伴うパララックスなど) は眩暈などを引き起こす恐れがあるため、無効化できるようにしましょう。(達成基準 2.3.3 : レベル AAA) cf. - 達成基準 2.2.2「一時停止、停止、非表示」(レベル A) - 達成基準 2.3.1「3 回の閃光、又は閾値以下」(レベル A) - 達成基準 2.3.2「3 回の閃光」(レベル AAA) --- 62. 操作に対するフィードバックで状況を伝えるメッセージが出る場合、それを見ることができないユーザーにもスクリーンリーダーを介して伝達されるようにしましょう。 (達成基準 4.1.3 : レベル AA) (画像 : フォーム送信時のエラー警告メッセージには、role=“alert” / aria-live=“assertive” を実装することで、スクリーンリーダー利用者にもタイムリーに伝える。) --- 63. 無操作状態が続くとタイムアウトしてデータが損失する場合、残り時間を提示しましょう。(達成基準 2.2.6 : レベル AAA) cf. 達成基準 2.2.1「タイミング調整可能」(レベル A) --- 64. まとめ --- 65. (本セッションの3つの視点) - 品質への社会的要求 - アクセシビリティ ✕ UX デザイン - WCAG 2.1 --- 66. ウェブにおけるアクセシビリティとは？ - ウェブの基本品質 - ユーザー体験 (UX) の土台 ある目的を持ったユーザーに対して、障害などの条件ゆえにその人の目的達成やユーザー体験が妨げられることのないよう、デザインしたいもの。 --- 67. 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 --- 68. ご清聴ありがとうございました。 --- 69. (スポンサー一覧) ---