Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
あなたの価値を高める Webアクセシビリティ 2017.05.18 | アクセシビリティの祭典 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
本日プレゼント！ イベント限定の特別定価で販売！ 会場後方の試し読みコーナーをチェック！
Slide 5
Slide 5 text
本日のターゲット アクセシビリティが気になるWeb制作者 そういったチームメンバーを後押ししたい人 ちょっと変わった語り口を知りたい玄人筋の人
Slide 6
Slide 6 text
現状認識
Slide 7
Slide 7 text
http://wd‑flat.com/blog/internet/enquete2016/
Slide 8
Slide 8 text
Q：アクセシビリティについて 仕様書を見てはいないが 感覚的に意識している （100人、51%）
Slide 9
Slide 9 text
Q WCAG 2.0 JIS X 8341‑3
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
24位：アクセシブルなサイト構築 3位：優れたユーザビリティ設計 2位：優れたインターフェイス／ナビゲーション設計 1位：JavaScript Q：近いうちに習得したいものは？
Slide 12
Slide 12 text
Web制作者がアクセシビリティに 取り組む価値とは？
Slide 13
Slide 13 text
access + ability アクセスできる度合い
Slide 14
Slide 14 text
Intertwingled http://intertwingled.org/jp/
Slide 15
Slide 15 text
Evaluation method of UX “The User Experience Honeycomb” http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
Slide 16
Slide 16 text
Q アクセシビリティに なんらか取り組んでいる？
Slide 17
Slide 17 text
A この場にいる全員が 実は取り組んでいる
Slide 18
Slide 18 text
Webに載るだけで 圧倒的にアクセシブル
Slide 19
Slide 19 text
お店 → Web 新聞 → Web 学校 → Web 業務 → Web
Slide 20
Slide 20 text
ユーザは、 わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか？ あなたの言葉で伝えるWebアクセシビリティ http://www.slideshare.net/KobayashiDaisuke1/web‑59111913
Slide 21
Slide 21 text
製品・サービス 価値 Web
Slide 22
Slide 22 text
アクセシビリティ ＝特殊な対応？
Slide 23
Slide 23 text
アクセシビリティ ＝障害者・高齢者対応？
Slide 24
Slide 24 text
腱鞘炎でマウスが持てない Bluetoothイヤホンが電池切れ 子どもにメガネを壊された
Slide 25
Slide 25 text
アクセシビリティ ＝使えるかどうか？ 使いものになるか 使えるか accessible usable
Slide 26
Slide 26 text
remote control pig pile https://www.flickr.com/photos/redjar/136216456/
Slide 27
Slide 27 text
ISO 9241‑11 のユーザビリティ定義 特定の目的を達成するために、 特定の利用者が、特定の利用状況で、 有効性、効率性、そして満足とともに ある製品を利用することができる度合い。
Slide 28
Slide 28 text
様々な能力を持つ幅広い層の人々に対する、 製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義
Slide 29
Slide 29 text
ユーザビリティ アクセシビリティ Use Use ある状況での使える度 使える度合いの幅広さ
Slide 30
Slide 30 text
アクセシビリティ ＝ユーザビリティの幅広さ
Slide 31
Slide 31 text
Webアクセシビリティの解剖
Slide 32
Slide 32 text
素人とは違う、Webプロフェッショナルの 仕事としてのWebコンテンツ開発を考えてみた http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727
Slide 33
Slide 33 text
マシンリーダブル プログラムが解釈できるか 様々な形に変換して幅広く使えるようにする Webならではのアプローチ
Slide 34
Slide 34 text
ヒューマンリーダブル 人の目で見やすいか、わかりやすいか ひとつの表現で幅広く使えるようにする 物理的な製品のユニバーサルデザインに近い
Slide 35
Slide 35 text
WCAG 2.0 の ヒューマンリーダブル関連
Slide 36
Slide 36 text
コンテンツを、利用者にとって見やすく、聞きやすいものにすること。 これには、前景と背景を区別することも含む。 1.4 判別可能 1. 知覚可能
Slide 37
Slide 37 text
利用者がナビゲートしたり、コンテンツを探し出したり、 現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能 発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止 利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2: 操作可能
Slide 38
Slide 38 text
テキストのコンテンツを読みやすく理解可能にすること。 ウェブページの表示や挙動を予測可能にすること。 利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3: 理解可能
Slide 39
Slide 39 text
Web Content Accessibility Guidelines (WCAG) 2.0 イントロダクション： しばしば利用者全般の ユーザビリティを向上させる。
Slide 40
Slide 40 text
幅広い状況でのヒューマンリーダビリティ ≒モバイル、マルチデバイス
Slide 41
Slide 41 text
https://material.google.com/
Slide 42
Slide 42 text
https://developer.apple.com/ios/human‑interface‑guidelines/overview/design‑principles/
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
モバイルの利用状況から来るデザインヒント 必要十分な表現にとどめる チラ見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じことができる 時間軸を使って情報を整理する
Slide 45
Slide 45 text
http://www.slideshare.net/rikiha/mobile‑accessibility‑64942570
Slide 46
Slide 46 text
https://www.w3.org/TR/WCAG21/
Slide 47
Slide 47 text
特定状況でのユーザビリティ ＝いわゆるユーザビリティ UI
Slide 48
Slide 48 text
UI 幅広い状況でのヒューマンリーダビリティ ≒アクセシビリティ 特定状況でのユーザビリティ ＝いわゆるユーザビリティ
Slide 49
Slide 49 text
可能性をさらに広げる マシンリーダビリティ
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
ヒューマンリーダブル ひとつのものでは 対応範囲に限界がある マシンリーダブル 形を変えることで 様々な状況に対応できる 実はWCAG 2.0ではレベルA、必ず満たすべきとされている
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
https://calil.jp/
Slide 54
Slide 54 text
https://support.google.com/webmasters/answer/70897?hl=ja
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
http://www.softbank.jp/mobile/service/visually‑support‑iphone/
Slide 58
Slide 58 text
マシンとヒューマンの架け橋は 「テキスト」
Slide 59
Slide 59 text
伝わる可能性が一番高いUI「テキスト」 Webコンテンツのほとんどは「テキスト」 IAの中心にあるのは「テキスト」 検索に使うのも「テキスト」 書き込むのも「テキスト」
Slide 60
Slide 60 text
http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/
Slide 61
Slide 61 text
The Final Hamburger A/B Test http://sitesforprofit.com/menu‑eats‑hamburger
Slide 62
Slide 62 text
設計・デザインの段階でテキストを意識 わかりやすく、構造を持ったテキストを 「ヒューマンリーダブル」な形で出す
Slide 63
Slide 63 text
マシンリーダブルは テキストがあればこそ テキストが無ければマークアップはできない（！） 構造を持つテキストあれば、マークアップは難しくない title, h1～h6, ul, ol, a, form, label nav, article, section, aside, header, footer, main
Slide 64
Slide 64 text
可能性を保つ マシン リーダビリティ 網を張る ヒューマン リーダビリティ 狙い撃つ ユーザビリティ Web
Slide 65
Slide 65 text
アクセシビリティ ＝売りにつながらない？
Slide 66
Slide 66 text
遷移・回遊 コンバージョン 利用開始 流入 理解 申込 母数へのアプローチ デザイン側での唯一のアプローチ手段 65歳以上の利用が16.4％（1,653万人） 障害者の利用率は高い（82.7～93.4%） 流入を増やす？アクセシブルにする？
Slide 67
Slide 67 text
遷移・回遊 コンバージョン 利用開始 流入 理解 申込 各段階へのアプローチ WCAG2.0 に含まれる内容： ナビゲーションのガイドライン ライティングのガイドライン フォーム最適化のガイドライン
Slide 68
Slide 68 text
流入 例：ナビゲーション
Slide 69
Slide 69 text
流入 例：ナビゲーション
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
アクセシビリティ ＝KPIに寄与する
Slide 75
Slide 75 text
アクセシビリティ ＝コストが増える？
Slide 76
Slide 76 text
http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
ルールを要する案件にアクセシビリティを絡める
Slide 81
Slide 81 text
ルールを要する案件にアクセシビリティを絡める
Slide 82
Slide 82 text
ルールを要する案件にアクセシビリティを絡める 標準のガイドラインがあることで： 理由付けがしやすい CMS選定の基準となる 対応後に評価しやすい 発展させる際に立ち戻りやすい http://www.yasuhisa.com/could/article/design‑system‑language/
Slide 83
Slide 83 text
まとめ まずWebに載せるだけでアクセシブル アクセシビリティ＝ユーザビリティの幅広さ アクセシビリティ＝ヒューマン向けとマシン向け ヒューマン向けはマルチデバイス対応との重なり大 マシンリーダブルなら形も変えて届けられる ヒューマンとマシンの架け橋はテキスト アクセシビリティは利益にも寄与する
Slide 84
Slide 84 text
僕なら「ウェブ制作の教科書」とか「ウェブ制作のすべて」とつける すべてのウェブサイト制作者のための「ウェブサイト構築」の教科書 土台の揺らぐことのないウェブサイトを構築するチャート 本書はWebデザインの「型」の説明をしてくれています 実は、ユニバーサルなユーザビリティの解説本 Webの本質は アクセシビリティ
Slide 85
Slide 85 text
さあ、はじめよう！
Slide 86
Slide 86 text
ありがとうございました @magi1125 facebook.com/rikiya.ihara