--- 
[Page 1]

(表紙)
セッションタイトル : Essence of "Form Design Patterns"

---
[Page 2]

(自己紹介)
土屋 一彦 (@caztcha)
Accessible & Usable
https://accessible-usable.net

ウェブサイトの設計や評価といった仕事をしつつ、「Accessible & Usable」(旧名称 : Website Usability Info) にて、ウェブをはじめとするデジタルコンテンツの、ユーザビリティ、アクセシビリティ、情報設計 (IA) に関する話題をマイペースに発信。

HCD-Net 認定 人間中心設計専門家。
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループでも活動中。

---
[Page 3]

「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」

ウェブにおいてフォームは、インタラクションの要である。
フォームがあることによって、ユーザーは能動的に自らの意思をシステムに伝えて、それに応じたフィードバックを得ることができるから。

本書は、お仕着せの「ベストプラクティス」集ではなく、フォームの利用シーンにおけるユーザー体験 (UX) までをも見据え、ユーザー調査を基にしたデザイン判断を行なうことを説いている。

そんな中でも、あらゆるフォームに共通して実践できることも多いので、そのエッセンスをご紹介します。

---
[Page 4]

インクルーシブデザインの原則
https://inclusivedesignprinciples.org/ja/
日本語訳 : 植木 真、土屋 一彦

1. 同等の体験を提供する
- 代替となるコンテンツ (代替テキスト、トランスクリプト、音声解説、手話など) の提供
- ライブリージョンによる通知の提供

2. 状況を考慮する
- 屋外でも視認可能な配色 (十分なコントラスト)
- 外出中の動画キャプション

3. 一貫性を保つ
- プラットフォームとの整合性
- 一貫したエディトリアル
- 一貫したページの構造

4. 利用者に制御させる
- 無限スクロールの代わりに「もっと見る」ボタン
- アニメーション効果やパララックスの停止
- 自由なズーム

5. 選択肢を提供する
- ジェスチャ or タップのみの操作
- グラフ or データテーブル

6. コンテンツの優先順位を付ける
- タスク / コンテンツ / エディトリアルの優先順位づけ
- プログレッシブディスクロージャー (段階的な開示)

7. 価値を付加する
- 位置情報やセンサーの活用
- セカンドスクリーンや VUI デバイスの併用
- パスワード表示オプション、パスワード以外での認証

---
[Page 5]

インクルーシブなフォームの例
"Form Design Patterns" のデモより

---
[Page 6]

基本の「登録フォーム」
https://form-design-patterns-ja.herokuapp.com/examples/registration-form

「インクルーシブ」なポイントは？

---
[Page 7]

基本の「登録フォーム」
https://form-design-patterns-ja.herokuapp.com/examples/registration-form

- ラベルを、入力欄の上に、左寄せで配置する。
- ラベルは、<label> 要素でマークアップし、入力欄と紐付ける。
- 入力欄の <input> 要素には、適切な type 属性を設定する。
- 入力欄は、いかにも入力できそうな外観にする (シグニファイア)
- ヒントは常に見えるようにする。(「プレースホルダー」として提示しない。)
- キーボード操作時、フォーカス位置を視認できるようにする。
- エラー表示。エラーのサマリーと、個別のエラーメッセージ。スクリーンリーダーでも伝わるように。

---
[Page 8]

スクリーンリーダー (iOS Safari + VoiceOver) でのデモ

- 入力欄 (メールアドレス、パスワード) にフォーカスが当たると、ラベル (<label> 要素 / ヒントテキストを含む) が同時に読み上げられます。
- (何も入力されていない状態で) [登録する] ボタンを押すと、エラーが表示されます。エラーのサマリーに自動的にフォーカスがあたり、「問題があります」という見出しが読み上げられます。
- 個別のエラーへのページ内リンクをタップすると、該当する入力欄がフォーカスされます。紐付いたラベル (<label> 要素 / 個別のエラーメッセージを含む) が同時に読み上げられます。

デモ動画 https://youtu.be/pu4JNOdMwfY

---
[Page 9]

オートコンプリート
https://form-design-patterns-ja.herokuapp.com/examples/autocomplete

「インクルーシブ」なポイントは？

---
[Page 10]

オートコンプリート
https://form-design-patterns-ja.herokuapp.com/examples/autocomplete

- セレクトボックス (<select> 要素) を基に、テキストボックス (<input type=“text”> ) と選択肢の箇条書き
(<ul> / <li> 要素) を加えて UI を拡張。
  - プログレッシブエンハンスメントで、<select> 要素は隠されているが、拡張された可視 UI での入力情報 (テキストボックスでの選択) が <select> の選択値となる仕組み。
- テキスト入力に応じて、選択肢がインタラクティブに提示される。
- キーボード操作だけで、選択 / 入力が完結できるようにする。
- リアルタイムな状況の変化 (この例では、選択肢の数) が、スクリーンリーダーでも伝わるようにする。

---
[Page 11]

スクリーンリーダー (iOS Safari + VoiceOver) でのデモ

- テキスト入力に応じて、提示される選択肢の数が変わると、そのたびに「●●の到着地候補」という情報が、音声で読み上げられます。
- 絞り込まれた選択肢は、Tab キー (iPhone + VoiceOver の場合は右フリック操作) でフォーカスすることができます。

デモ動画 https://youtu.be/TqFY1Lvyuik

---
[Page 12]

サイト内検索
https://form-design-patterns-ja.herokuapp.com/examples/search-form

「インクルーシブ」なポイントは？

---
[Page 13]

サイト内検索
https://form-design-patterns-ja.herokuapp.com/examples/search-form

- 限られたヘッダーのスペースで、どう検索機能を提示するか？ (悩ましいですね) の一例。
  - ラベル、入力欄、ボタンをわかりやすく。
  - 検索クエリのヒントも表示。
  - PC でもスマホでも一貫性のある UI。
- 虫眼鏡アイコンを押すと、検索機能が開閉する仕組み。リアルタイムな状況の変化 (この例では、検索機能が「開いた」「折りたたまれた」) が、スクリーンリーダーでも伝わるようにする。
- 検索機能が開いたら、フォーカスを自動的に、入力欄に移動させる。もちろんラベルも同時に読み上げられる。

---
[Page 14]

スクリーンリーダー (iOS Safari + VoiceOver) でのデモ

- 虫眼鏡アイコンにフォーカスが当たると、開閉状況が読み上げられます。「隠されました」
- 虫眼鏡アイコンを叩くと検索機能が開き、入力欄に自動的にフォーカスが当たります。ラベル (<label> 要素 / ヒントテキストを含む) が同時に読み上げられます。
- フォーカスを虫眼鏡アイコンに戻します。開閉状況が読み上げられます。「拡大」
- 虫眼鏡アイコンを叩くと検索機能が閉じ、再び開閉状況が読み上げられます。「隠されました」

デモ動画 https://youtu.be/_UEX5nYdjVo

---
[Page 15]

座席選択
https://form-design-patterns-ja.herokuapp.com/examples/seat-chooser

「インクルーシブ」なポイントは？

---
[Page 16]

座席選択
https://form-design-patterns-ja.herokuapp.com/examples/seat-chooser

- 個々の座席はチェックボックスになっている。
- チェックボックスのグループ全体を <fieldset> で囲み、見出し「座席を選択」は <legend> 要素でマークアップ。
- 座席番号 (1A, 1B, 1C, …) は <label> 要素でマークアップし、チェックボックスと紐付ける。
- チェックボックスの <label> をスタイリング。チェックボックス自体は隠し、状態 (フォーカス / 選択) の可視化はラベル部分に対して適用する形。
- <label> 要素の中に、座席番号に加えて、隠しテキストとして、「窓側」「通路側」の種別も記載。

---
[Page 17]

スクリーンリーダー (iOS Safari + VoiceOver) でのデモ

- 各座席 (実はチェックボックス) に順にフォーカスを当てると、座席名、窓側か通路側かの種別、チェックされているかどうか、が読み上げられます。
- フォーカスされた座席をダブルタップしてチェックを付けると、チェックマークが付いた旨、読み上げられます。

デモ動画 https://youtu.be/6sSq3eVXxaA

---
[Page 18]

フィルター (ファセットナビゲーション)
https://form-design-patterns-ja.herokuapp.com/examples/filter-form

「インクルーシブ」なポイントは？

---
[Page 19]

フィルター (ファセットナビゲーション)
https://form-design-patterns-ja.herokuapp.com/examples/filter-form

- フィルターの選択 (チェックの付け外し) を変更するたびに、自動的に絞り込みが実行される。
- キーボードだけで、一連のフィルターの操作が完結できるようにする。
- フィルターの各カテゴリー (ここでは「色」「評価」の開閉状況の変化が、スクリーンリーダーでも伝わるようにする。)
- リアルタイムな状況の変化 (この例では、絞り込み結果の「読み込み中」「読み込み完了」) が、スクリーンリーダーでも伝わるようにする。

---
[Page 20]

スクリーンリーダー (iOS Safari + VoiceOver) でのデモ

- 「絞り込み」ボタンを押して、フィルターを展開します。続いて、フィルターのカテゴリー「色」を展開します。展開前は「隠されました」、展開後は「拡大」と読み上げられます。
- フィルターの設定を変更する (ここでは「緑」を選択します) と、一瞬「読み込み中」と読み上げられ、最終的に「読み込み完了」と読み上げられます。

デモ動画 https://youtu.be/7c3KWgXsN9s

---
[Page 21]

ほかにもいろいろあります...

「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」
ぜひ、ご一読ください！

---
[Page 22]

テクニックだけでなく「ユーザーを知る」ことも大事。
"Form Design Patterns" でも、ユーザー調査をもとにデザイン判断することを説いています。

---
[Page 23]

障害当事者をテスターとした、ユーザビリティテスト

-  この機能、キーボード操作だとリーチできないのか...
-  この入力要素、ラベルがスクリーンリーダーで読み上げられないから使えないじゃん...
-  スクリーンリーダーだと (シリアルな情報取得なので) 記憶負荷が高すぎて伝わりにくそう...
-  拡大表示したら、何が起こっているのか、わけがわからない...
-  このボタン、小さすぎて押すに押せないのか...
-  音が聴こえない状態だと、コンテンツのメッセージが伝わらないな...

ウェブサイトそれぞれ、ユーザー体験を阻む障壁が見つかるはず。

---
[Page 24]

インクルーシブなペルソナ拡張
https://github.com/caztcha/Inclusive-Persona-Extension

---
[Page 25]

- Context / 例 : 視覚障害者 (全盲)
- Problem / ウェブ利用時の障壁
- Solution / 解決方法

---
[Page 26]

ペルソナと紐付けてチームみんなで一緒に考えよう！

---
[Page 27]

こんなご時世だからこそ。

---
[Page 28]

「ウィズコロナ」(さらには「アフターコロナ」) 時代になり、人や社会との関わりかたが大きく変わりゆく中、コミュニケーションにおけるデジタル情報のアクセシビリティはますます重要に。

受動的な情報消費だけでなく、能動的な情報利用にも、十分なアクセシビリティを。

---
[Page 29]

ご清聴ありがとうございました。

---