Slide 1

Slide 1 text

あなたの価値を高める Webアクセシビリティ Rikiya Ihara | BA

Slide 2

Slide 2 text

伊原力也 @magi1125 BA（ビジネス・アーキテクツ）ユーザー調査、情報設計、UIデザインウェブアクセシビリティ基盤委員会 WG1委員 HCD‑Net 評議委員、認定人間中心設計専門家

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

目次 1 導入：アクセシビリティの温度感 前編：アクセシビリティ概論 後編：アクセシビリティとビジネス 終わりに：どこから取り組むべきか？

Slide 5

Slide 5 text

Q：アクセシビリティについて仕様書を見てはいないが感覚的に意識している（100人、51%）

Slide 6

Slide 6 text

24位：アクセシブルなサイト構築 3位：優れたユーザビリティ設計 2位：優れたインターフェイス／ナビゲーション設計 1位：JavaScript Q：近いうちに習得したいものは？

Slide 7

Slide 7 text

Web制作者がアクセシビリティに取り組む価値とは？

Slide 8

Slide 8 text

access + ability アクセスできる度合い

Slide 9

Slide 9 text

Googleで「accessibility」を検索 5

Slide 10

Slide 10 text

アクセシビリティ＝障害者・高齢者対応？

Slide 11

Slide 11 text

腱鞘炎でマウスが持てない Bluetoothイヤホンが電池切れ子どもにメガネを壊された

Slide 12

Slide 12 text

アクセシビリティ＝使えるかどうか？使いものになるか使えるか accessible usable

Slide 13

Slide 13 text

remote control pig pile https://www.ﬂickr.com/photos/redjar/136216456/

Slide 14

Slide 14 text

ISO 9241‑11 のユーザビリティ定義特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い。

Slide 15

Slide 15 text

様々な能力を持つ幅広い層の人々に対する、製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義

Slide 16

Slide 16 text

ユーザビリティアクセシビリティ Use Use ある状況での使える度使える度合いの幅広さ

Slide 17

Slide 17 text

アクセシビリティ＝ユーザビリティの幅広さ

Slide 18

Slide 18 text

Webアクセシビリティの解剖

Slide 19

Slide 19 text

Web Content Accessibility Guidelines (WCAG)2.0 36 https://www.w3.org/TR/WCAG20/

Slide 20

Slide 20 text

WCAG 2.0 W3Cが勧告している標準規格  ISO/IEC 40500:2012、JIS X 8341-3:2016と一致 Web技術を使ったコンテンツはすべて対象  アプリのWebView、HTMLヘルプ、イントラネット、キオスク端末のHTML、 Web上のPDF 、EPUB…… 3つのレベルがある  レベルA（シングルA）は必ず守るべきもの 40

Slide 21

Slide 21 text

素人とは違う、Webプロフェッショナルの仕事としてのWebコンテンツ開発を考えてみた http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 22

Slide 22 text

ヒューマンリーダブル人の目で見やすいか、わかりやすいかひとつの表現で幅広く使えるようにする物理的な製品のユニバーサルデザインに近い

Slide 23

Slide 23 text

レベルAA~：見やすさ、読みやすさ、分かり易さ 45 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 24

Slide 24 text

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。 1.4 判別可能 1.知覚可能

Slide 25

Slide 25 text

利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2:操作可能

Slide 26

Slide 26 text

テキストのコンテンツを読みやすく理解可能にすること。ウェブページの表示や挙動を予測可能にすること。利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3:理解可能

Slide 27

Slide 27 text

Web Content Accessibility Guidelines (WCAG) 2.0 イントロダクション：しばしば利用者全般のユーザビリティを向上させる。

Slide 28

Slide 28 text

幅広い状況でのヒューマンリーダビリティ ≒モバイル、マルチデバイス

Slide 29

Slide 29 text

https://material.google.com/

Slide 30

Slide 30 text

https://developer.apple.com/ios/human‑interface‑guidelines/overview/design‑principles/

Slide 31

Slide 31 text

7. - � 7 � y Q) t,· � © UI r4f-1 :Y ,d sign Theresa Neil Jt2 51'l .�!J e w e b 201J•T-alft. •1t45nff80l11ff99"� t--t!,-. Web&�1'(-( ,i--1-..,�•J 7-(Qllr•• !"Don't Maka MeThlnkJO)B*lllll APtJloe, !llo1>mb�r9 co"" L••�•.coffl li!t' t••i:c VC � I:= !1.-'f 1!''7' • :r::.,'T-. .,::.,�f)a-A ltt..t'a'ii-'f-7'7. � lllliil• 7.'P<-7· ,,1,-,�a(.i-.,-1�r-,t:!!1t.!I-�- 'l'i'l"O>n 1:,;. 7 y T 7 y Cl 7 1 I JI,, 'l 7" (t- ""'- (l) r

Slide 32

Slide 32 text

モバイルの利用状況から来るデザインヒント必要十分な表現にとどめるチラ見しやすいようにデザインする階層を深くしない自然な形で接点を見せる途中で操作を止めても同じことができる時間軸を使って情報を整理する

Slide 33

Slide 33 text

http://www.slideshare.net/rikiha/mobile‑accessibility‑64942570

Slide 34

Slide 34 text

https://www.w3.org/TR/WCAG21/

Slide 35

Slide 35 text

UI 幅広い状況でのヒューマンリーダビリティ ≒アクセシビリティ特定状況でのユーザビリティ＝いわゆるユーザビリティ

Slide 36

Slide 36 text

可能性をさらに広げるマシンリーダビリティ

Slide 37

Slide 37 text

マシンリーダブルプログラムが解釈できるか様々な形に変換して幅広く使えるようにする Webならではのアプローチ

Slide 38

Slide 38 text

レベルA≒ テキスト提供、機械可読、キーボード 42 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

Slide 39

Slide 39 text

ヒューマンリーダブルひとつのものでは対応範囲に限界があるマシンリーダブル形を変えることで様々な状況に対応できる実はWCAG 2.0ではレベルA、必ず満たすべきとされている

Slide 40

Slide 40 text

ユニバーサルデザイン Universal = 普遍的な  特定の人のためのデザインではない、普遍的なデザイン  ある一つのものが普遍的に使える さまざまな状況の人が同じものを使える 12

Slide 41

Slide 41 text

例：駅のホームへのアクセス手段 13

Slide 42

Slide 42 text

例：福岡県大野城市 15 http://www.city.onojo.fukuoka.jp

Slide 43

Slide 43 text

支援機能の提供 16

Slide 44

Slide 44 text

総務省みんなの公共サイト運用ガイドライン 17 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html

Slide 45

Slide 45 text

2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。 18

Slide 46

Slide 46 text

障害者のウェブページ利用方法の紹介ビデオ 総務省ウェブサイトの利用例  視覚障害者（全盲）  視覚障害者（弱視）  肢体不自由者 19 http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html

Slide 47

Slide 47 text

みんなの公共サイト運用ガイドライン(続き) 利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。 20

Slide 48

Slide 48 text

ブラウザや支援技術で状況に適した表現に変えられること Webアクセシビリティの重要なポイント 21

Slide 49

Slide 49 text

プレーンテキスト  ■デザイニングWebアクセシビリティ ●訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介・上流から下流まで、制作プロセスの全てをカバー・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 ●取り組みの背景ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。 24

Slide 50

Slide 50 text

HTMLでマークアップデザイニングWebアクセシビリティ

デザイニングWebアクセシビリティ

訴求ポイント(この本が既存の本と異なる点)

「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容
解決アプローチの例として、実際に公開されているサイトの実例を多数紹介
上流から下流まで、制作プロセスの全てをカバー
デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視

取り組みの背景

ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。

Slide 51

Slide 51 text

これがWebアクセシビリティの根幹 Webアクセシビリティの根幹はマシンリーダブルなテキスト  最も多くの人に伝わる表現方法は「テキスト」  テキストをマークアップすると意味が明確になり、機械が解釈可能になる  ユーザーエージェントや支援技術といったプログラムを通して利用可能な形に変換できる 26

Slide 52

Slide 52 text

ユーザーエージェントと支援技術 ユーザーエージェント：ユーザーの代理  ユーザーに成り代わってWebにアクセスする  ブラウザはその一種だが、他にもいろいろある 支援技術：アクセス支援用ソフト・ハード  OSやブラウザが提供するカスタマイズ機能  別途インストールするソフトウェア  特定用途向けのハードウェア 27

Slide 53

Slide 53 text

ビジュアルブラウザ(Firefox) 28

Slide 54

Slide 54 text

テキストブラウザ(w3m) 29

Slide 55

Slide 55 text

拡大鏡、ハイコントラストモード 31

Slide 56

Slide 56 text

スクリーンリーダー(PC、iOS) 32

Slide 57

Slide 57 text

33 さまざまな入出力デバイス

Slide 58

Slide 58 text

「分けてある」ことで選択肢が増えていく 34 プロダクト情報コンテナ情報デバイス Web 情報ユーザーエージェント Web デバイス情報ユーザーエージェント Web デバイス支援技術

Slide 59

Slide 59 text

マシンとヒューマンの架け橋は「テキスト」

Slide 60

Slide 60 text

伝わる可能性が一番高いUI「テキスト」 Webコンテンツのほとんどは「テキスト」 IAの中心にあるのは「テキスト」検索に使うのも「テキスト」書き込むのも「テキスト」

Slide 61

Slide 61 text

http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/

Slide 62

Slide 62 text

The Final Hamburger A/B Test http://sitesforproﬁt.com/menu‑eats‑hamburger

Slide 63

Slide 63 text

設計・デザインの段階でテキストを意識わかりやすく、構造を持ったテキストを「ヒューマンリーダブル」な形で出す

Slide 64

Slide 64 text

マシンリーダブルはテキストがあればこそテキストが無ければマークアップはできない（！）構造を持つテキストあれば、マークアップは難しくない title, h1～h6, ul, ol, a, form, label nav, article, section, aside, header, footer, main

Slide 65

Slide 65 text

可能性を保つマシンリーダビリティ網を張るヒューマンリーダビリティ狙い撃つユーザビリティ Web

Slide 66

Slide 66 text

アクセシビリティ＝売りにつながらない？

Slide 67

Slide 67 text

Web担当者の認識 47 https://www.wab.ne.jp/wab_sites/contents/2335

Slide 68

Slide 68 text

遷移・回遊コンバージョン利用開始流入理解申込母数へのアプローチデザイン側での唯一のアプローチ手段 65歳以上の利用が16.4％（1,653万人）障害者の利用率は高い（82.7～93.4%）流入を増やす？アクセシブルにする？

Slide 69

Slide 69 text

遷移・回遊コンバージョン利用開始流入理解申込各段階へのアプローチ WCAG2.0 に含まれる内容：ナビゲーションのガイドラインライティングのガイドラインフォーム最適化のガイドライン

Slide 70

Slide 70 text

流入例：ナビゲーション

Slide 71

Slide 71 text

流入例：ナビゲーション

Slide 72

Slide 72 text

流入例：ライティング

Slide 73

Slide 73 text

流入例：ライティング

Slide 74

Slide 74 text

流入例：フォーム最適化

Slide 75

Slide 75 text

流入例：フォーム最適化

Slide 76

Slide 76 text

アクセシビリティ＝売りにつながる

Slide 77

Slide 77 text

アクセシビリティ＝コストが増える？

Slide 78

Slide 78 text

http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

ルールを要する案件にアクセシビリティを絡める標準のガイドラインがあることで：理由付けがしやすい CMS選定の基準となる対応後に評価しやすい発展させる際に立ち戻りやすい http://www.yasuhisa.com/could/article/design‑system‑language/

Slide 82

Slide 82 text

将来に対応するため 新しいデバイスに取り急ぎ対応できる  作法を守れば未知のデバイスでも利用できる  ユーザーへのサービス中断を回避できる  漸進的な対応により突発的なコスト発生を抑止 54

Slide 83

Slide 83 text

Thoughts on Flash 55 http://www.apple.com/hotnews/thoughts-on-flash/

Slide 84

Slide 84 text

原則：大きなコストは掛からない レベルA対応はそこまで大変ではない  先に方針を立てて、制作フローや運用フローに組み込めば、大きな追加コストにはならない やるべきことは5つ  ガイドラインに沿って「真っ当」に作るだけ 94

Slide 85

Slide 85 text

レベルAでやるべきこと、5つ 1. テキストだけでわかるように書く 1.1.1 非テキストコンテンツ 1.3.3 感覚的な特徴 1.4.1 色の使用 2.4.2 ページタイトル 3.3.1 エラーの特定 3.3.2 ラベル又は説明 2. 適切にマークアップする 1.3.1 情報及び関係性 1.3.2 意味のある順序 2.1.1 キーボード 2.1.2 キーボードトラップなし 2.4.1 ブロックスキップ 2.4.3 フォーカス順序 2.4.4 リンクの目的(コンテキスト内) 3.1.1 ページの言語 4.1.1 構文解析 4.1.2 名前(name) ・役割(role) 及び値(value) 95

Slide 86

Slide 86 text

レベルAでやるべきこと、5つ 3. 勝手に動かさない 1.4.2 音声の制御 2.2.1 タイミング調整可能 2.2.2 一時停止、停止、非表示 3.2.1 フォーカス時 3.2.2 入力時 4. チカチカさせない 2.3.1 3回の閃光、又は閾値以下 5. 動画や音声の代替テキストを書く 1.2.1 音声のみ及び映像のみ(収録済) 1.2.2 キャプション(収録済) 1.2.3 音声解説、又はメディアに対する代替(収録済) 96

Slide 87

Slide 87 text

アクセシビリティ＝利益につながる

Slide 88

Slide 88 text

コストが掛かるケース 動画や音声 紙もの＆PDF JavaScriptによるUI 試験の実施 97

Slide 89

Slide 89 text

動画や音声：映像が見えない／音が聞こえない 98

Slide 90

Slide 90 text

字幕や文字起こしをつけるコストを見込む 99 https://www.youtube.com/watch?v=gAgOnQqyDz0

Slide 91

Slide 91 text

紙もの＆PDF 100

Slide 92

Slide 92 text

紙もの＆PDF Webに適したフォーマットになっていない  グラフや図版が多用され、テキストの説明がない  きわめて複雑な表が使われている  スキャンしたPDFでテキスト情報がない  PDFの作り方によっては、読み上げ順序が不適切に 再構成が必要、追加コストを見込む 101

Slide 93

Slide 93 text

JavaScriptによるUI 102

Slide 94

Slide 94 text

JavaScriptによるUI 既存のHTMLだけではUIを表現しきれない  スクリーンリーダーに状態が伝わらない  キーボードのみで適切に操作できない アクセシブルな実装と検証のコストを見込む  WAI-ARIAという追加仕様を使って独自に実装する or すでに対応されているUIウィジェットを使う  スクリーンリーダーとキーボードでテストする 103

Slide 95

Slide 95 text

次の可能性を生むため ユーザー側の工夫や想定外利用を誘発する  マシンリーダブルなテキストは機械で扱いやすい  提供側の意図とは別の形で使われる  新たな可能性の芽が生まれる 56

Slide 96

Slide 96 text

59 http://logmi.jp

Slide 97

Slide 97 text

クローラー(Googlebot) 30

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

https://calil.jp/

Slide 100

Slide 100 text

58 https://matome.naver.jp

Slide 101

Slide 101 text

1-6. 2 3 33 cccccc 2 7J1 t-� 7 -1 !/ '1:' ,'J 7 -A � - .A � - ,, - L "C tr l o 00 c r :¥-A r c ff & u.> :i :r- } 7 A r- ,, ,� - -u 1: _ · - . - :--c !; 1tJ ._ tJ 1 ·r 71 / 1:fle: 1 Jll tJ _iJj, ��tit"" Q fW.fk Y �'o ---7 : DJl -_i:.:�: ·� r?A��;�1 --�- ��}�� . �k�� ? 1) 7 L-C l Q D1 7 :X o/ ? L �tJ ,.; 'T�-1' � L. 'i Tc [_i t: tt ,:: - ; -f� :1 ;.,,- r 7· A 1-- r .x. --;, � 1 -1J..-t e.. �1- ;;r_ -;, ?· L t1:IJ � r�.{;,.., Li To ifl!u -ff4j., :. � f7J :to 4? ;,;_ t: tJ � - l: !¼ � l ,:, L J: 1 o . .>. � ... . 'f !:"1 ,.. 1. r""" 't ':Z.. _. � .t .... •� a..,� - ·+ IJ h}' 1 � I. I ' �, Cil rt!;··:. � · � ('�y, rp� If� ¥,d.,i ,_ . Q ":(!; • · ·· ' ¢��i!J-i; fJ i Ti� Lt, L X�!i ,t ff . t!lOJ · }J1fbit ' � . 1:1" l, ,{:,;:. ?-OJ 1t�.i-1f-·1(1)1- jJtJ:.1:_� : ! -?'"C.. .· .,p l 1 1 (}) :- 1.1,J. · b�I -- fl.� := � tJ ';jj fJ i h

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

Web担当者の認識 61 https://www.wab.ne.jp/wab_sites/contents/2335

Slide 104

Slide 104 text

海外諸国でも進む「法律による義務化」  カナダ（オンタリオ州）の「AODA」  従業員50名以上の企業はレベルA準拠  韓国の「障害者差別禁止法」  全法人が対象、技術基準は「KWCAG 2.1」  アメリカの「ADA」  明文化されていないが、近年の判例等では企業にレベルAA準拠を要求することが多い  アメリカの「ACAA」  国内外の航空会社WebサイトにレベルAA準拠を要求（日本の航空会社も含む） 70 http://www.slideshare.net/waic_jp/webjis-x-83413

Slide 105

Slide 105 text

64 http://www8.cao.go.jp/shougai/suishin/sabekai_wakariyasui.html

Slide 106

Slide 106 text

合理的配慮の要求 65

Slide 107

Slide 107 text

総務省みんなの公共サイト運用ガイドライン 67 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html

Slide 108

Slide 108 text

公共機関は待ったなしの状況 みんなの公共サイト運用ガイドラインの要求  2017年度末までに適合レベルAAに準拠（試験の実施と公開）  「ウェブアクセシビリティ取組確認・評価表」を毎年度末までに公開を推奨 68

Slide 109

Slide 109 text

どこから取り組むべきか? 71

Slide 110

Slide 110 text

Q アクセシビリティになんらか取り組んでいる？

Slide 111

Slide 111 text

A この場にいる全員が実は取り組んでいる

Slide 112

Slide 112 text

Webに載るだけで圧倒的にアクセシブル

Slide 113

Slide 113 text

お店 →　Web 新聞 →　Web 学校 →　Web 業務 →　Web

Slide 114

Slide 114 text

robustness ﬁndability portability usability shareability hackability 頑健:存在が維持される発見:特定できる、探し出せる携帯:持ち運べる、呼び出せる使用: 知覚・理解・操作、目的達成共有: 誰かに渡せる、共有できる改変: 加工できる、再利用できる

Slide 115

Slide 115 text

ユーザは、わたしたちの製品にアクセスすることで何にアクセスしようとしているのか？あなたの言葉で伝えるWebアクセシビリティ http://www.slideshare.net/KobayashiDaisuke1/web‑59111913

Slide 116

Slide 116 text

製品・サービス価値 Web

Slide 117

Slide 117 text

Webの本質 The power of the Web is in its universality. Access by everyone regardless of disabilityis an essential aspect. Webの力はその普遍性にあります。障害の有無にかかわらず誰もがアクセスできるというのがWebの本質的な側面なのです。 23 http://www.w3.org/standards/webdesign/accessibility

Slide 118

Slide 118 text

僕なら「ウェブ制作の教科書」とか「ウェブ制作のすべて」とつけるすべてのウェブサイト制作者のための「ウェブサイト構築」の教科書土台の揺らぐことのないウェブサイトを構築するチャート本書はWebデザインの「型」の説明をしてくれています実は、ユニバーサルなユーザビリティの解説本 Webの本質はアクセシビリティ

Slide 119

Slide 119 text

アクセシビリティはゼロか1かではない  特定の施策ができなくとも、他の施策が無駄なわけではない  ガイドラインの全ての施策を完璧に実施しても、全てのアクセスが完全に保証されるわけではない  逆に、たとえば見出しをマークアップするだけでも劇的にアクセシブルになる可能性がある  高すぎる目標を設定する必要はない  できる範囲で方針を立て、できることからはじめましょう！ 106

Slide 120

Slide 120 text

方針がないと…… 73

Slide 121

Slide 121 text

まずは方針を立てることをオススメ 72

Slide 122

Slide 122 text

まとめ  アクセシビリティとは、幅広い層へのユーザビリティ  ヒューマン向け≒ マルチデバイス向けデザインの基礎  マシン向け≒ 複数ルートと可能性、これが根幹  その架け橋は、ちゃんと設計されたテキスト  アクセシビリティは売りアップ、コスト減、投資  社会からの要請、需要も増える  あなたは既にやっている！方針立てて、できるところから 2