Slide 1
Slide 1 text
多様なユーザーニーズに応える
フロントエンドデザインパターン
書籍「インクルーシブHTML+CSS & JavaScript」より
太田 良典 伊原 力也
2017.09.24
HTML5 Conference
Slide 2
Slide 2 text
セッション動画：https://www.youtube.com/watch?v=FOznWmVyk9I
Slide 3
Slide 3 text
自己紹介
太田 良典
HTML4.01のW3C仕様書を翻訳した「HTML4仕様書邦訳計画補完委員会」の委員を務めた
後、2001年にBAに参加。Web技術の分野で幅広い専門性を持ち、セキュリティ分野において
は「第二回IPA賞（情報セキュリティ部門）」を受賞。アクセシビリティ分野では、ウェブアクセシ
ビリティ基盤委員会（WAIC）の委員として活動している。
伊原 力也
アクセシブルなインタラクションデザインの実践を標榜し、Webサービスやスマートフォンアプリ
の設計業務に従事。ウェブアクセシビリティ基盤委員会（WAIC）理解と普及作業部会委員とし
ても活動。HCD-Net認定 人間中心設計専門家および評議委員。クリエイティブユニット
mokuva所属。
Slide 4
Slide 4 text
http://waic.jp
Slide 5
Slide 5 text
Amazonで「アクセシビリティ」と検索！
Slide 6
Slide 6 text
書籍「インクルーシブHTML+CSS & JavaScript」
著者：Heydon Pickering
監訳：太田 良典、伊原 力也
価格：3,024円（税込）
発売日：2017年11月4日（予定）
Amazonで予約受付中！
Amazonで「インクルーシブHTML」と検索！
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
このセッションの流れ
● インクルーシブ・デザインパターン
● パターン：商品リスト
● パターン：フィルターウィジェット
● インクルーシブ・プロトタイピング
Slide 9
Slide 9 text
インクルーシブ・デザインパターン
Slide 10
Slide 10 text
原著名: インクルーシブ・デザインパターン
Inclusive Design Patterns
Coding Accessibility Into Web Design
Slide 11
Slide 11 text
インクルーシブとは?
Inclusive
● 「包括的」「全てを含む」など
● exclusive (排他的) の反対語
ここでは、「誰でも受け入れる」「特定の人を除外しない」のような意味
Slide 12
Slide 12 text
インクルーシブではない例
障害のある人や、特定の状況に置かれた人には使えないもの
● 目の見えない人には読めないコンテンツ
● 画像をオフにしていると読めないコンテンツ
● マウスが使えないと操作できないUI
Slide 13
Slide 13 text
スクリーンリーダーを使う人
Slide 14
Slide 14 text
インクルーシブ・デザインパターン
インクルーシブなデザインパターン
= 誰でも使えるWebを作るためのデザインパターン
= アクセシビリティに配慮したWebを作るためのデザインパターン
Slide 15
Slide 15 text
https://24ways.org/2016/what-the-heck-is-inclusive-design/
Slide 16
Slide 16 text
アクセシビリティ系の記事のよくあるパターン
いろいろダメと言われる。特にJS系の処理
● JSでいろいろ派手に動かしても読めない人がいる
● JSの非同期処理でメッセージを出してもスクリーンリーダーで読めない
結論が「やるな」「避けろ」になってしまうことが多い
● 一般に普及しているUIを、ただ「ダメ」と言われても困る
● 結局、指摘を無視してやってしまうことになることが多い
Slide 17
Slide 17 text
この本は?
普及しているUIについて、アクセシブルなデザインパターンを提供
● 「やるな」ではなく、「こう実装するとアクセシブル」という話
（とはいえ、これはやってはダメ、という話ももちろんある）
● ブログ記事、ナビゲーション、メニューボタン、
商品リスト、フィルターウィジェット、登録フォームなど
● 今日は「商品リスト」「フィルターウィジェット」の一部を紹介
Slide 18
Slide 18 text
パターン：商品リスト
Slide 19
Slide 19 text
商品リストのポイント
1. リストや見出しを使ってマークアップ
2. 画像のパフォーマンスに配慮
3. 「今すぐ購入」ボタンを使いやすく
4. 外部サイトでも使いやすく (SERP)
Slide 20
Slide 20 text
Point 1 リストや見出しを使ってマークアップ
リストは、コンテンツをアクセシブルな形で項目別に並べたり、
テーマごとにグループ化したり、
構造化されていないダラダラした文章が続くことを解消したりします。
スクリーンリーダーのユーザーの中には、
見出しを使って商品リストを見て回る人もいます。
Slide 21
Slide 21 text
リストと見出しの長所
リストの長所
● リストであることと、項目数がわかる (リスト10項目、のように読む)
● 前後のリスト項目に飛べる
見出しの長所
● 見出しであることがわかる (見出しレベル3、のように読む)
● 見出しに直接飛べる、直前の見出しを読むこともできる
Slide 22
Slide 22 text
良くない例
見出しテキスト
Slide 23
Slide 23 text
https://suzuri.jp/masuP9/815489/t-shirt/s/sumi
Slide 25
Slide 25 text
ガソリンスタンドにたたずむ裸の男 by ケニー・マルバートン
- サイズ：
- 90cm × 30cm
- 価格：
- 35.95 ユーロ
- 評価:
-
5 つ星のう
ち4
Slide 26
Slide 26 text
ガソリンスタンドにたたずむ裸の男 by ケニー・マルバートン
- サイズ：
- 90cm × 30cm
- 価格：
- 35.95 ユーロ
- 評価:
-
5 つ星のう
ち4
Slide 27
Slide 27 text
https://www.pinterest.co.uk/pin/144326363030295068/
Slide 28
Slide 28 text
Point 2 画像のパフォーマンスに配慮
Web開発者は高額の回線を契約していることが多く、
勤務日の大半は超高速のブロードバンドで接続しています。
この体験は一部の特権階級のみに許されたものであって、
一般的なものではありません。
Slide 29
Slide 29 text
画像のパフォーマンス向上の工夫
● SVGを使う (この例は写真なので無理)
● 画像を圧縮する
● 遅延読み込みを行う
● 画面サイズに応じて画像を変える
Slide 30
Slide 30 text
JSを使って遅延読み込み
Slide 31
Slide 31 text
デバイスのサイズによって画像を変える
Slide 32
Slide 32 text
Point 3 「今すぐ購入」ボタンを使いやすく
ビジネス感覚が完全に欠落しているのでない限り、
ユーザーに写真プリントの購入を促したいと考えるはずです。
おそらく最も単純な方法は「今すぐ購入」ボタンをつけることです。
とは言え、避けるべき落とし穴がいくつかあります。
Slide 33
Slide 33 text
「今すぐ購入」ボタンについてのあれこれ
● ボタン vs ボタン風リンク
○ アンカー()にすべきか、ボタン()にすべきか?
○ 見た目をどうすべきか ?
● JavaScriptによる実装はどうか?
● 「今すぐ購入」でいいのか?
○ ユニークなテキストが必要ないか ?
● そもそも「今すぐ購入」ボタンは必要なのか?
○ 商品項目全体が押せればいいのではないか ?
Slide 36
Slide 36 text
通常リンク、強調リンク、ボタン
Slide 37
Slide 37 text
3種のスタイルを用意する
a {
/* 標準のリンクのスタイル */
}
a.call-to-action {
/* 強調されたリンクのスタイル */
}
button {
/* 要素のスタイル */
}
Slide 40
Slide 40 text
全体を押せるようにしてみる……?
ガソリンスタンドにたたずむ裸の男
- サイズ:
- 90cm × 30cm
- 価格:
- 35.95 ユーロ
- 評価:
-
5 つ星
のうち 4
Slide 41
Slide 41 text
全体を押せるようにするのはどうなのか
押しやすくなり一見よさそうだが、いくつか問題がある
● リンクを入れ子にできないため、写真家へのリンクを外すことになる
● これがリンクだと伝わるかどうか怪しい
● スクリーンリーダーで中身が全部読まれる
○ リンクテキストを全て読んだ後に「リンク」とアナウンスされる
○ リンク一覧の機能と相性が悪い
● 押せそうにない部分まで押せてしまう
Slide 42
Slide 42 text
完成!
Slide 43
Slide 43 text
Point 4 外部サイトでも使いやすく (SERP)
顧客が利用するのはサイト内のインターフェイスだけではありません。
サイトが適切にインデックス化されていれば、SERP
(search engine results pages、検索エンジンの検索結果ページ)
にも商品が表示されます。
特に支援技術ユーザーの中には、使い慣れたインターフェイスだという理由で、
Google検索に大きく依存している人もいます。
Slide 44
Slide 44 text
Googleで特定サイト内を検索
Slide 45
Slide 45 text
検索結果の例
Slide 46
Slide 46 text
検索結果の例
Slide 47
Slide 47 text
Productボキャブラリーの使用 (使用前)
ガソリンスタンドにたたずむ裸の男 by ケニー・マルバートン
- サイズ:
- 90cm × 30cm
- 価格:
- 35.95 ユーロ
- 評価:
-
5 つ星のう
ち4
支払い方法の選択
Slide 49
Slide 49 text
4つ星、
レビュー数13
支払い方法の選択
Slide 50
Slide 50 text
期待される表示結果
Slide 51
Slide 51 text
パターン：商品リストのまとめ
1. リストや見出しを使ってマークアップ
リストや見出しをきちんと使うと使いやすくなる
2. 画像のパフォーマンスに配慮
圧縮、遅延読み込み、etc.
3. 「今すぐ購入」ボタンを使いやすく
ボタンなのかリンクなのか考える。大きすぎるリンクは一長一短
4. 外部サイトでも使いやすく (SERP)
サーチエンジン経由で使う人もいる。メタデータを追加するとGood
Slide 52
Slide 52 text
パターン：フィルターウィジェット
Slide 53
Slide 53 text
フィルターウィジェットのポイント
1. まず標準の要素で実装
2. ラジオボタンのスタイルを工夫する
3. XHRと読み込み待ちを実装する
4. submitボタンをなくすべきか?
5. 「もっと読む」機能を実装する
Slide 54
Slide 54 text
Point 1 まず標準の要素で実装
ブラウザによって実現されている標準のインタラクティブ機能の方が、
JavaScriptによって作られたものよりもパフォーマンスに優れ、堅牢です。
標準の機能が使えるなら、それを使うべきです。
Slide 55
Slide 55 text
フィルターウィジェットの機能
Slide 56
Slide 56 text
見た目ではなく機能に沿ってマークアップ
新着順
Slide 57
Slide 57 text
Point 2 ラジオボタンのスタイルを工夫する
標準のラジオボタンは、本質的にインクルーシブではありますが、
スタイルの調整が難しいという問題があります。
これが、標準のラジオボタンを使わずに、
まったくアクセシブルではない
やベースの実装や、
比較的複雑で問題が起こりやすいWAI-ARIAによる解決策を選んでしまう
主な原因になっています。
Slide 58
Slide 58 text
隣接セレクタでlabelにスタイルを付ける
[type="radio"] + label {
cursor: pointer;
/* その他、基本のスタイル */
}
[type="radio"]:focus + label {
/* フォーカス時のスタイル */
}
[type="radio"]:checked + label {
/* 選択時のスタイル */
}
Slide 59
Slide 59 text
ラジオボタンを隠す
.sorter [type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding:0 !important;
border:0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px);
}
Slide 60
Slide 60 text
Point 3 XHRと読み込み待ちを実装する
ユーザーがJavaScriptを利用できる場合は、可能な限り体験を拡張すべきです。
XHRを利用してリストを再表示することで、
ページをリロードせずに新しいコンテンツを追加することができます。
キーボードに頼っているユーザーは、操作していたウィジェットから、
そのままコンテンツの操作を続けることできます。
Slide 61
Slide 61 text
読み込み中……
Slide 62
Slide 62 text
ローディングアイコンの問題点
問題は、これを確認できるのは目が見えているユーザーだけだということです。
コンテンツの読み込みが完了したことを
スクリーンリーダーユーザーにも伝えるのは重要なことです。
ユーザーは並べ替えボタンを押しても何も起きなかったのかと思い、
さまよい続けることになりかねません。
Slide 63
Slide 63 text
WAI-ARIAのライブリージョンを利用する
商品リストを読み込み中。しばらくお待ちください。
Slide 64
Slide 64 text
ライブリージョンのテキストを入れ替える
商品リストの読み込みが完了しました。 23点の商品が一覧されています。
Slide 65
Slide 65 text
Point 4 submitボタンをなくすべきか
JavaScriptで商品リストを表示する場合、
フォームをgetで送信する機能は使いません。
submitボタンのデフォルトの動作であるフォーム送信の機能を抑止して、
ページが再読み込みされることを防ぐ必要があります。
submitイベントの中でpreventDefault()を呼ぶことで実現できます。
Slide 66
Slide 66 text
submitイベントでXHRを呼び、フォーム送信を抑止
var sortForm = document.querySelector(' .sorter');
sortForm.addEventListener(' submit', function(event) {
// XHRで処理するため、
// ブラウザがフォームを送信しないようにする
event.preventDefault();
// ここでXHR処理
});
Slide 67
Slide 67 text
submitボタンをなくすべき?
そもそもsubmitボタンが必要なのか、という疑問も出てくるでしょう。
JavaScriptでsubmitボタンを取り除き、
changeイベントにXHRの機能を追加するほうが、
操作の結果が即座に反映されて良いと思われるのではないでしょうか。
Slide 68
Slide 68 text
changeイベントでsubmitされるように変更
var sortForm = document.querySelector('.sorter');
sortForm.addEventListener(' change', function(event) {
if (event.target.type !== ' radio') {
return;
}
this.submit();
}, true);
Slide 69
Slide 69 text
changeイベントで送信する場合の問題
● ユーザーに伝わるか?
明示的な送信ボタンがあるわけではないので、
選択して即表示が変わるということがユーザーに伝わらないかもしれない
● キーボードユーザーはストレスなく使えるか?
矢印キーで選択肢を選ぶが、キーを押すたびにchangeイベントが発動
(右端の選択肢に移動しようとすると、changeイベントが3回発動する)
そのたびにXHRと画面表示の更新が行われる
Slide 70
Slide 70 text
clickイベントに変更
var sortForm = document.querySelector('.sorter');
sortForm.addEventListener(' click', function(event) {
if (event.target.type !== 'radio') {
return;
}
this.submit();
}, true);
Slide 71
Slide 71 text
そして不要になったボタンを隠す
並べ替え
Slide 72
Slide 72 text
ボタンを隠した場合の問題
冗長になったsubmitボタンを隠してしまうと、
クリックもタップもできないキーボードユーザーは困ることになるでしょう。
Enterキーでこのフォームを送信できると
気づいてくれることを信じるほかありません。
ユーザーが実際にこうした挙動を理解するか、好むのかということは、
ユーザーテストで確認すべき問題です。
Slide 73
Slide 73 text
Point 5 「もっと読む」機能を実装する
扱っている商品数が多い場合、検索語句やフィルタオプションによっては、
かなりの数のアイテムと一致する可能性があります。
検索結果を読み込む量は少なめにしておき、
ユーザーが必要としたときに追加で取得するほうが良いでしょう。
これを行う方法はいくつか考えられます。そのうちのひとつ、
無限スクロールには、インクルーシビティに関する重大な問題があります。
Slide 74
Slide 74 text
無限スクロールの問題点
● ユーザーのアクションを乗っ取り、予期せぬ動作をする
ユーザーが望まなくても読み込みが走ってしまう
● スクロールバーのボックスをドラッグするユーザーが混乱する
(ドラッグした後にボックスが移動してしまうため)
● フッタに到達できないことがある
特にキーボードユーザーは、無限スクロールで追加される領域から
下に抜けることが不可能になる場合がある
Slide 75
Slide 75 text
無限スクロールをどうすべきか?
1. 無限スクロールは実装しない
2. ユーザーが明示的に操作する「検索結果をもっと読み込む……」という
ボタンやリンクに置き換える。ユーザーが何度か読み込みを繰り返したら、
自動読み込みをオンにするかを尋ねるプロンプトを表示する。
3. 無限スクロールは実装しない
“Automatic infinite scrolling & accessibility”
http://simplyaccessible.com/article/infinite-scrolling/
Slide 76
Slide 76 text
もっと読み込むボタンを追加
もっと読み込む
Slide 77
Slide 77 text
ロード中の処理
Slide 78
Slide 78 text
ロード完了後の処理
ロードされた商品の先頭にフォーカスを移動する必要がある
(スクリーンリーダーユーザーが迷子にならないように)
そのために、商品のタイトルをフォーカス可能にしておく必要がある
Slide 79
Slide 79 text
Slide 80
Slide 80 text
完成まではまだ少しありますが……
Slide 81
Slide 81 text
パターン：フィルターウィジェットのまとめ
1. まず標準の要素で実装
divで作ろうとせず、ラジオボタンやlabelなどを使う
2. ラジオボタンのスタイルを工夫する
ラジオボタンを隠してlabelにスタイルを付けるという手もある
3. XHRと読み込み待ちを実装する
WAI-ARIAのライブリージョンを使うと、
読み込み中・読み込み完了の状態をスクリーンリーダーにも伝えられる
Slide 82
Slide 82 text
パターン：フィルターウィジェットのまとめ (続き)
4. submitボタンをなくすべきか?
なくすことはお勧めしないが、比較的アクセスしやすい実現方法もある
結論としては、ユーザーテストをしましょう!
5. 「もっと読む」機能を実装する
無限スクロールは実装しない
「もっと読む」ボタンを押したあとはフォーカスを移動する
Slide 83
Slide 83 text
インクルーシブ・プロトタイピング
Slide 84
Slide 84 text
ペーパープロトタイピング
● 紙ならほぼ誰でも取り組むことができる
● 試行錯誤が簡単
● 洗練されていない
Slide 85
Slide 85 text
必要なもの
● 大判の紙（A2サイズを推奨）
● ハサミ
● スティッキータック
● 耐水性マーカーペン
● アセテートフィルム
● ホワイトボード用のペン
Slide 86
Slide 86 text
スティッキータック？
Slide 87
Slide 87 text
アセテートフィルム？
Slide 88
Slide 88 text
ペーパープロトタイプによるテスト
1. 予備をたくさん用意する
2. シナリオを書く
3. コンピューター役を任命する
4. ユーザーに明確な指示を与える
5. ユーザーを落ち着かせる
Slide 89
Slide 89 text
テストセッションのレイアウト
1. コンピューター役をする人
2. プロトタイプのこまごまとしたパーツ
3. テスト対象のアプリケーション
4. プロトタイプを操作するテストユーザー
5. 操作に参加しない、2人目のテストユーザー
6. メモ係
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
紙からコードへ
1. 複数人（または複数のチーム）で、あるコンポーネントを手に取る
○ さまざまな解決策を比較できる
2. それをHTMLとCSSでコード化する
○ アクセシビリティを検討の前提条件にする
○ 制限時間を設け、完璧にしたいという魔の誘惑に抵抗する
3. コードを比較して議論する
4. これを繰り返す
Slide 92
Slide 92 text
Slide 93
Slide 93 text
結局のところ、HTMLがなければ、
そこに貼りつけるCSSやJavaScriptを存在させることさえできません。
どのみちHTMLを書くわけですから、
どうせならいちばん最初にHTMLを用意したほうがいいですよね。
Slide 94
Slide 94 text
書籍「インクルーシブHTML+CSS & JavaScript」
著者：Heydon Pickering
監訳：太田 良典、伊原 力也
価格：3,024円（税込）
発売日：2017年11月4日（予定）
Amazonで予約受付中！
Amazonで「インクルーシブHTML」と検索！
Slide 95
Slide 95 text
今日からあなたも
インクルーシブデザイナー！
Slide 96
Slide 96 text
ありがとうございました