多様なユーザーニーズに応えるフロントエンドデザインパターン

Transcript

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