【書き起こしテキスト】Essence of “Form Design Patterns”

(土屋)よろしくお願いします

「Accessible & Usable」の土屋と申します
よろしくお願いいたします

ウェブサイトの設計や
評価といった仕事をしつつーー

「Accessible & Usable」(この4月まで
Website Usability Info)のサイトでーー

ウェブをはじめとする
デジタルコンテンツのーー

ユーザビリティとか
アクセシビリティーー

情報設計(IA)に関する話題を
マイペースに発信してます

HCD-Net認定の人間中心設計専門家です

あと ウェブアクセシビリティ基盤委員会
(WAIC)のーー

翻訳ワーキンググループでも
活動をしております

今日なんですけれども こちらですね
「Form Design Patternsーー

シンプルでインクルーシブな
フォーム制作実践ガイド」の書籍をーー

題材に お話をしたいと思います

この本は イギリスの
アダム・シルヴァーさんというーー

インタラクション・デザイナーの方が
書かれた本で

私のほうで
監訳をさせていただいたんですけれども

こちらを ご紹介がてら
お話ししたいと思います

ウェブにおいてフォームというのは
インタラクションの要です

フォームがあることによってーー

ユーザーは能動的に
自らの意思をシステムに伝えてーー

それに応じたフィードバックを
得ることができるからです

本書は いわゆる お仕着せの
ベストプラクティス集ではなくーー

フォームの利用シーンにおける
ユーザー体験(UX)まで見据えてーー

ユーザー調査を基にした
デザイン判断を行うことを説いています

とはいえ その中でもーー

あらゆるフォームに共通して
実践できることも多いので

そのエッセンスをーー

今回 いくつか かいつまんで
ご紹介したいなと思います

ちょっと その前にーー

インクルーシブデザインの原則にも
簡単に触れておきたいと思います

こちら “inclusivedesign
principles.org”のサイトでーー

公開されているものです

The Paciello Groupというーー

アクセシビリティの
コンサルティング・チームがーー

まとめたデザインの原則です

「Form Design Patterns」の本も
事あるごとにーー

こちらの原則に立ち帰って引用してます

日本語訳をインフォアクシアの植木さんと
私で手がけさせていただいて

公開させていただいてるんですけど
7つの原則があります

1つは“同等の体験を提供する”

例えば 代替コンテンツですね

代替テキストとか トランスクリプト
音声解説 手話などの提供

それから
ライブリージョンによるーー

インタラクティブな
通知の提供を含んでます

それから 2つ目 “状況を考慮する”

こちらは例えば 屋外でもーー

視認することができる配色
(十分なコントラスト)とか

あと 外出中で
音が聞けない状況のときのーー

動画のキャプションなどが含まれます

それから 3つ目 “一貫性を保つ”

こちらは プラットフォームとの
整合性だったりーー

あるいは
一貫したエディトリアルとかーー

ページの構造などを
保つことが含まれます

4つ目 “利用者に制御させる”

これは 無限スクロールの代わりに
“もっと読む”ボタンを用意して

ユーザーの任意で読ませるですとか

あるいは アニメーション効果とかーー

パララックス効果を
任意で停止することができる

あるいは ユーザーが自由に
大きくズームしたりなどが含まれます

あと 5つ目 “選択肢を提供する”

これは 場合によっては
ジェスチャーによってーー

操作するインターフェースも
あるかと思うんですけども

ジェスチャーが使えない人はーー

例えば 1本指のタップでのみ
操作ができるようにするとか

あるいは グラフによって
ビジュアルで情報が提供されてる場合に

データテーブルの形でもデータを
理解することができるというーー

選択肢を用意することが含まれます

6つ目
“コンテンツの優先順位をつける”

タスクですとか コンテンツ あるいは
エディトリアルの優先順位づけをしたり

あるいは 場合によっては
プログレッシブディスクロージャーといって

段階的に情報を開示する

最初は概略的な所を見せつつ
もっと見たいなという人に対してはーー

詳細な情報を
任意で開示することが含まれます

7つ目 “価値を付加する”

こちらは
位置情報やセンサーを活用したり

あるいは セカンドスクリーンだったり
音声UI(VUI)ーー

スマートスピーカーのような
デバイスを併用したりですとか

あるいは パスワードを
表示させるオプションを用意したり

パスワード以外での
認証を可能にしたりとかのーー

より便利になるような
価値を付加することが含まれます

こういったインクルーシブデザインの
原則に のっとった形でーー

今日ご紹介する「Form Design
Patterns」も書かれてますのでーー

ご興味ありましたらーー

こちらのURL(inclusivedesign
principles.org)をーー

ご覧いただければと思います

ここからが
今日のメインのコンテンツになります

“インクルーシブな
フォームの例”を いくつかーー

「Form Design Patterns」の本の中で
実際にデモがありますのでーー

そのデモの中から かいつまんで
見ていきたいなと思います

まず 1つ目 基本の登録フォームです

メールアドレスとか
パスワードの入力欄があってーー

“登録する”のボタンを押すと
登録ができるようなーー

よくある登録フォームです

このフォームなんですけれども

インクルーシブなポイントとしては
どういったものがあるでしょうか?

いくつか あるんですけれども
例えば ラベル

ラベルは
入力欄に対する項目名(文言)です

ここで言うと メールアドレスとか
パスワードの文言ですけど

こういったラベルはーー

入力欄の左ではなく
上に左寄せで配置する

こうすることで 例えば 画面幅が小さい
スマホで利用してる方でもーー

ラベルと入力欄の両方が
常に見えてる状態

入力中であっても 常に見えてる状態を
担保することができます

それから ラベルの文言はーー

HTMLの<label>要素でマークアップして
入力欄と紐付ける

こうすることで 入力欄に
フォーカスが当たったときにーー

ラベル(項目名)も一緒に
読み上げられる効果が期待できますし

また 入力欄に
フォーカスを当てたいときにーー

ラベル部分をクリックやタップしても
フォーカスを当てることができます

例えば ラジオボタンとか
チェックボックスのようなーー

小さいフォームの入力要素に対しても
ラベルがクリック可能であればーー

その分だけ押しやすくなる効果も
期待できます

それから 入力欄の<input>要素には
適切なtype属性を設定する

例えば メールアドレスの入力欄であれば
<input>要素のtype=…

普通 type=“text”と
してしまうケースが多いと思いますが

ここを例えば
type=“email”にしておくことでーー

スマホでメールアドレス欄を
タップしたときにーー

キーパッドが出てくると思いますが
そのキーパッドのキー配列がーー

メールアドレスを
入力しやすいようなキー配列のーー

キーパッドを提示することができます

それから 入力欄は
いかにも入力できそうな外観にする

“シグニファイア”と呼ばれてまして
そういうことが大事です

普通に ここにあるように
四角で囲ってあればいいんですけど

フォームによっては
下線(アンダーライン)だけが引いてあったり

あるいは
薄い字の塗りがあるだけでーー

ここに入力できると
いまひとつ伝わりにくいようなーー

フォームもあったりするので
注意が必要だと思います

それから “ヒント”ですね

ここで言うと パスワード欄の所に
“数字を1文字以上含めてーー

8文字以上で入力してください”と
ヒントがありますけど

このヒントは
常に見えるようにしておく

時折あるのが
プレースホルダーといってーー

ヒントを入力欄の中に
提示してしまうケースがあると思いますが

これをやってしまうと
入力欄にフォーカスを当ててーー

いざ 入力しようとしたときにーー

ヒントそのものが
消えてしまうという問題があるので

そういった意味では
オススメできません

それから Tabキーを使って
キーボード操作をするときにーー

フォーカスの位置をーー

どこにフォーカスが当たってるのか視覚的に
分かりやすく提示することも大事です

それから エラー表示ですね

エラーのサマリー(概要)とーー

個別のエラーメッセージの2つを
表示するといいと思います

それも スクリーンリーダーで
伝わるように表示できるといいと思います

例を見てみたいと思います

これですね

登録フォームがあって
登録するボタンがあるのでーー

クリックを押すとエラーが出て
このようにエラーのサマリーが出てきます

自動的に ここにフォーカスを
当てることができるのでーー

エラーのサマリー(“問題があります”)を
自動的に音声で読み上げることができます

それから
個別のエラーメッセージがありますけど

例えば “パスワードを
入力してください”をクリックすると

自動的に パスワードの入力欄に
フォーカスが当たって

そうすると この入力欄に紐付いた
ラベルの部分もーー

自動的に音声で読み上げることが
可能になります

実際に スクリーンリーダーだと
どうなるかっていうのをーー

聞いてみていただきたいと思います

iPhoneのSafariとVoiceOverの
組み合わせで録画しました

見ていただくポイントとしては
入力欄にフォーカスが当たるとーー

ヒントテキストを含むラベルが
同時に読み上げられるのを聞いてください

あと 何も入力されてない状態でーー

登録するボタンを押すと
エラーが表示されます

そうすると エラーのサマリーに
自動的にフォーカスが当たってーー

“問題があります”という見出しが
読み上げられます

個別のエラーへの
ページ内リンクをタップするとーー

該当する入力欄がフォーカスされます

紐付いた個別の
エラーメッセージを含むラベルがーー

同時に読み上げられるのを
聞いてみていただければと思います

右側にあるスクリーンショットが
動画になってるんですけど

動画の下の部分の黒い帯の所に
読み上げの字幕も併せて表示されるので

こちらも見ながら
聞いていただければと思います

それでは再生します

(読み上げ音声)
登録フォーム 見出しレベル1

メールアドレス テキストフィールド
ダブルタップして編集します

パスワード数字を1文字以上含めて
8文字以上で入力してください

表示するボタン 登録するボタン

登録する

問題があります 見出しレベル2

メールアドレスを入力してください
ページ内リンク

パスワードを入力してください
ページ内リンク

パスワード数字を1文字以上含めて
8文字以上で入力してください

パスワードを入力してください

(土屋)このような形でーー

スクリーンリーダーを使っている
目が見えない利用者も含めてーー

インクルーシブに使えるフォームが
できるようになります

次の例です

オートコンプリートを
見ていきたいと思います

これは テキストボックスに
文字を入力し始めるとーー

入力した文字を補完するような
リストが選択されてーー

その中から入力したい項目を
選ぶことができるフォームです

ここでは国の名前を選ぶシチュエーションを
想像していただければと思います

このオートコンプリートのフォームをーー

インクルーシブにするポイントは
どういったことがあるでしょうか?

こちらは 裏側に HTMLの
<select>要素があるんですけれど

これを基に
テキストボックス<input type=“text”>と

選択肢の箇条書き(<ul>/<li>要素)を加えて
UIを拡張する形で実装してます

プログレッシブエンハンスメントを使って
<select>要素は隠されているんですけれど

拡張された可視UIでの入力情報
(テキストボックスでの選択)がーー

<select>要素の選択値となり
サーバー側に渡される実装になっています

テキスト入力に応じて 選択肢が
インタラクティブに提示されます

インクルーシブにする工夫としてはーー

まず キーボード操作だけで選択と入力が
完結できるようにすることが大事です

それから リアルタイムな状況の変化
(この例では選択肢の数)がーー

スクリーンリーダーでも伝わるようにーー

ライブリージョンを設ける形で
補完してあげるといいかと思います

こちらも 実際のデモのページを
見ていただくと分かりやすいと思います

このように
オートコンプリートになってます

こうやって
選択肢が出てくる形になります

ここに何か文字を入れると
選択肢が絞られるんですけれども

実は HTMLに“5つの
到着地候補”というのが表示されてます

この部分が aria-live=“polite”の形で
マークアップされてるので

例えば 何か文字を入れると
そのつど HTMLの数字が変わるので

スクリーンリーダーのユーザーにとっても
伝わりやすくなります

実際 スクリーンリーダーでのデモを
ご覧いただければと思うんですけれども

見るべきポイントとしては
まず テキスト入力に応じてーー

提示される選択肢の数が変わります

その度に “いくつの
到着地候補”という情報がーー

音声で読み上げられる様子を
聞いてみてください

そのあと ある程度
絞り込まれたところでーー

実際に Tabキーでフォーカスを
移動するさまを やってみます

iPhoneとVoiceOverの場合ですとーー

右フリック操作で
Tabキーと同等の操作ができますので

キーボードだけで操作ができるところを
見ていただきたいと思います

それでは再生してみます

(読み上げ音声)到着地

コンボボックス リストボックス
中黒 ポップアップ 隠されました

展開するにはダブルタップします

到着地 コンボボックス リストボックス
中黒 ポップアップ 拡大

249の到着地候補

(機械音声)j j

(読み上げ音声)11の到着地候補

(機械音声)a a

(読み上げ音声)5の到着地候補

完了ボタン 完了

到着地 ja コンボボックス
リストボックス 中黒 ポップアップ 拡大

アゼルバイジャン/Azerbaijan
リストの開始位置です

ジャマイカ/Jamaica

日本/Japan

(土屋)ここでは 選択肢の数が
リアルタイムで変わる状況も含めてーー

音声で伝わるところが
非常に面白いかなと思います

次の例はサイト内検索です

こちらは サイトの共通ヘッダーにーー

虫眼鏡アイコンがあるような
よくあるサイト内検索なんですけど

これをインクルーシブなものにする
ポイントとしてはーー

どういったものがあるでしょうか?

限られたヘッダーのスペースの中で
どう検索機能を提示するかってのはーー

非常に悩ましい問題かなと思います

いちばんいいのは 検索窓が開いた状態で
ヘッダーに置いてあるのがいいんですけど

例えば そこに グローバルナビゲーションの
メニュー項目が いくつもあったときにーー

スペースの問題で どう収めようかとか

特に モバイルの画面幅が狭い場合
どうするのかという悩みがあると思います

このデモでは 検索窓のラベルと入力欄
ボタンを分かりやすく提示することと

検索クエリのヒントも
表示できるようにすること

あと PCでもスマホでも
一貫性のあるUIを提供することでーー

ひとつのソリューションとして
このような形を取っています

虫眼鏡アイコンを押すと
検索機能が開閉する仕組みです

この場合
リアルタイムな状況の変化ーー

この例では 検索機能が開いたとか
折りたたまれた状況がーー

スクリーンリーダーでも伝わるように

aria-expanded属性を使って
伝わるようにします

それから 検索機能が開いたら フォーカスを
自動的に入力欄(検索窓)に移動させる

そうすることで スムーズに
検索入力の操作に入れますしーー

フォーカスが当たったときに同時にーー

ラベルも併せて読み上げられることで
使いやすくすることができます

こちらも 実際のデモページを
見ていただきたいと思います

こちら 虫眼鏡アイコンをタップすると
開いて・閉じてというふうになります

このボタン部分を見ると
開いて・閉じてと やったときにーー

HTMLに
aria-expanded=“false”と出てます

これが 検索窓を開くとーー

aria-expandedは
“true”の属性値になります

こういうふうに
trueとfalseの値が切り替わることでーー

スクリーンリーダーのユーザーにーー

検索窓が開いた・閉じたと
伝えることができます

これも 実際に VoiceOverのデモを
見ていただきたいと思います

また 見るべきポイントとしてはーー

虫眼鏡アイコンにフォーカスが当たると
検索の開閉状況が読み上げられます

VoiceOverの場合は
“隠されました”と読み上げられます

それから 虫眼鏡アイコンをたたくと
検索機能が開いてーー

入力欄に
自動的にフォーカスが当たります

そうすると <label>要素で
マークアップされたラベルーー

ヒントテキストも
その中に含まれてますのでーー

同時に読み上げられます

そのあと いったん フォーカスを
虫眼鏡アイコンに戻します

そうすると その時点では開閉状況が
“拡大”と読み上げられます

そして もう1回 虫眼鏡アイコンを開くと
検索機能が閉じるんですけども

今度は開閉状況が
“隠されました”と読み上げられます

そういった一連の流れを
聞いてみていただければと思います

再生してみます

(読み上げ音声)
ロゴ バナー ランドマーク

サイト内検索の開閉ボタン end バナー

メニュー 中黒 ポップアップ
隠されました

展開するにはダブルタップします

製品検索例 黒い財布 検索フィールド
ダブルタップして編集します

ローターを使用して
スペルミスのある単語にアクセスします

製品検索

サイト内検索の開閉ボタン end バナー
メニュー 中黒 ポップアップ 拡大

サイト内検索の開閉 end バナー
メニュー 中黒 ポップアップ 隠されました

(土屋)このように 検索機能が
開いた・閉じた状況も含めてーー

目が見えない人にも
伝えることができます

次の例 座席の選択です

飛行機の座席を予約するときの
座席を選ぶシチュエーションをーー

思い浮かべていただければと
思うんですけれども

真ん中に通路があって その通路を挟んで
2列ずつ座席が並んでいます

その座席には 1A 1Bとか
2A 2Bとか番号が振ってあって

それぞれの座席がボタンのような
見栄えになっているフォームです

これが インクルーシブに
なっているポイントはーー

どういったものがあるのか
見ていきたいと思います

こちら 個々の座席は
チェックボックスになっています

チェックボックスのグループ全体
つまり 座席の並び全体をーー

HTMLの<fieldset>で囲んでーー

“座席を選択”という見出しを
<legend>要素でマークアップする

これは チェックボックスを
マークアップすることの基本なんですけど

座席番号(1A 1B 1Cとか)は
<label>要素でマークアップしてあって

チェックボックスと
紐付ける形になります

チェックボックスの<label>を
スタイリングする実装です

チェックボックス自体は隠してあって

チェックボックスが
フォーカスされてるのかーー

選択されてるのかの状態の可視化をーー

ラベル部分に対して
適用する形を取ってます

あとは隠し味的にーー

各<label>要素の中に
座席番号があるんですけど

それに加えて
隠しテキストとしてーー

スクリーンリーダーの
ユーザーだけに伝わるテキストとして

窓側とか 通路側とかの
種別も併せて記載しております

こちらも 実際のデモのページを
見ていただきたいと思います

こちらですね

どれか1コ
座席を選んでみますと…

このように
input type=“checkbox”とあります

実は 1コ1コが
チェックボックスになっています

それから チェックボックスに
紐付いているラベルの中としてーー

ここでは
1Dという座席番号がありますけど

それに加えて スクリーンリーダーだけが
可視できるテキストとしてーー

“窓側”というテキストがあります

例えば
お隣の1Cという座席を選ぶとーー

“通路側”という隠しテキストが
仕込んである形になります

これを 実際
スクリーンリーダー(VoiceOver)でーー

聞いてみると どうなるのかを
見ていただきたいと思います

見ていただくポイントとしては
各座席(実はチェックボックス)にーー

順にフォーカスを当てると
座席名 窓側 通路側の種別ーー

あと チェックされてるかどうかが
読み上げられます

フォーカスされた座席を
ダブルタップしてチェックをつけると

チェックマークがついた旨
読み上げられるという一連の流れをーー

聞いてみていただきたいと思います

それでは再生します

(読み上げ音声)
座席を選択 フォームの開始位置です

1A 窓側 チェックボックス
チェックが外されました

ダブルタップして設定を切り替えます

チェックマークが付きました

1B通路側 無効 チェックボックス
チェックが外されました

1C通路側 チェックボックス
チェックが外されました

1D窓側 チェックボックス
チェックが外されました

ダブルタップして設定を切り替えます

チェックマークが付きました

(土屋)こんな感じで 2次元的に
平面に並んでいる情報なんですけど

窓側とか通路側といった情報も含めて
テキストとして仕込んでおくとーー

スクリーンリーダーを利用してる方にも
伝わりやすいフォームにすることができます

では 次の例 フィルター
(ファセットナビゲーション)です

よくeコマースのサイトで見ます

商品の一覧があって 色とか
価格帯とか材質とかで選ぶとーー

商品の一覧が絞り込まれて
表示が切り替わるインターフェースです

よく 宝石のカット面になぞらえて
“ファセット”という呼び方もされますけど

こういった
フィルターのナビゲーションです

インクルーシブなポイントとしては
どういったものがあるでしょうか?

挙動としては フィルターの
選択(チェックの付け外し)を変更する度に

自動的に絞り込みが実行されます

インクルーシブにするためには
キーボードだけでーー

一連のフィルターの操作が
完結できる必要があります

あと フィルターの各カテゴリー
ここでは 色とか 評価とかありますけど

その開閉状況がスクリーンリーダーで
伝わるようにする必要があります

あと リアルタイムな状況の変化ですね

例えば チェックボックスの
チェックをつけるとか 外すとかはーー

状況が変わりますので 読み込み中とか
読み込み完了といった状況がーー

スクリーンリーダーでも
伝わるようにすることが必要になります

こちらのデモのページを
見ていこうと思います

これから 私が
TabキーとEnterキーだけで操作します

今 色にフォーカスが当たっていて
ここで Enterキーを押すと開きます

赤 青 緑とフォーカスを移動させて
青のチェックボックスにーー

spaceキーを押してチェックを入れる形で
キーボード操作だけで ひととおり使える

それから
ソースを見ていこうと思います

色の開いた・閉じたのボタンです

さっき サイト内検索の虫眼鏡アイコンで
見ていただいたものと一緒なんですけど

aria-expandedが
今 falseになってますけど

これが 開くとtrueになり
閉じるとfalseになる

こういう形で
開いた・閉じたの状況がーー

スクリーンリーダーのユーザーにも
伝わります

それから “読み込み完了”の
隠しテキストがあります

この辺りを見といてください

今から私が チェックボックスを
付け替えたりします

例えば 赤を選びます

こうすると 一瞬 読み込み中となって
そのあと 読み込み完了

読み込み中 読み込み完了
分かりますかね?

読み込み中 読み込み完了

こういう形で 読み込みの途中なのか
終わったのかをテキストで表示されてまして

それが aria-live=“polite”の
ライブリージョンの形でーー

コーディングされることでーー

スクリーンリーダーのユーザーにも
伝わる形になってます

実際 これも スクリーンリーダーで
見ていただきたいと思います

見ていただきたいポイントとしてはーー

絞り込みボタンを押して
フィルターを展開します

続いて フィルターのカテゴリー(色)を
展開する操作をします

そうすると 展開された情報がーー

リアルタイムで
スクリーンリーダーに読まれるんですけど

展開する前は“隠されました”
展開後は“拡大”の形でーー

さっきのサイト内検索の
虫眼鏡アイコンと同じですけど

そんな形で 開いた・閉じたの状況が
読み上げられます

あと フィルターの設定を変更する
ここでは緑を選択しようと思います

そうすると 一瞬
“読み込み中”と読み上げられて

最終的に “読み込み完了”と
読み上げられます

その様子を
聞いてみていただければと思います

再生してみます

(読み上げ音声)財布 見出しレベル1

絞り込みボタン メニュー 中黒
ポップアップ 隠されました

展開するにはダブルタップします

絞り込み 見出しレベル2

色ボタン フォームの開始位置です
隠されました

展開するにはダブルタップします

色 フォームの開始位置です 拡大

赤 チェックボックス
チェックが外されました

青 チェックボックス
チェックが外されました

緑 チェックボックス
チェックが外されました

ダブルタップして設定を切り替えます

読み込み…
チェックマークが付きました

読み込み完了

(土屋)このような形です
読み込み中というのは一瞬でーー

途中で“チェックが付きました”の音声に
遮られちゃうんですけど

一応 読まれて

その上で 最終的には
読み込み完了が伝わる形になってます

こういった形で
リアルタイムな状況変化も含めてーー

スクリーンリーダーのユーザーにも
伝わる形にしておくとーー

よりインクルーシブかなという
ひとつの例です

ということで いろいろインクルーシブの
フォームの例を見ていただきました

ほかにも いろいろ あるんですけれども

是非 この
「Form Design Patterns」の書籍をーー

ご一読いただければと思います

ここまではテクニックめいたことを
いろいろ話しましたけども

実際にはテクニックだけじゃなくて
もっとユーザーを知るということも大事です

実際 「Form Design Patterns」の
本の中でもーー

ユーザー調査を基に デザイン判断を
することを いろんな所で説いています

ユーザーを知ることの中で
いちばん有効なのがーー

障害当事者をテスターとした
ユーザビリティテストかなと思います

実際やってみると 例えばーー

この機能 キーボード操作だと
リーチできないのかとか

この入力要素ーー

ラベルがスクリーンリーダーで
読み上げられないから使えないじゃんとか

スクリーンリーダーですと
情報取得がシリアルな形です

目が見えると
2次元的に捉えられるんですけど

音声読み上げだと
どうしても1次元的になりますので

そうすると 記憶負荷が高すぎて
伝わりにくそうだなとか

あるいは 拡大表示したときに
何が起こっているのかワケが分からないとか

あるいは このボタン 小さすぎて
押すに押せないとか

あと 音が聞こえない状態だとーー

コンテンツのメッセージそのものが
伝わらないなとか

いろいろ ウェブサイトそれぞれーー

ユーザー体験を阻む要因というのは
きっと見つかるかなと思います

とはいえ 実際 障害当事者さんを
リクルートしてきてーー

ユーザビリティテストをやることはーー

なかなか難しいケースが
あるかもしれません

そのときの一助として こちらの
インクルーシブなペルソナ拡張です

こちら アクセシビリティの祭典で何度か
ご紹介させていただいてるんですけど

改めて ご紹介ということでーー

こんなのも使っていただけると
いいかなと思います

私のGitHubのリポジトリでーー

ご自由にダウンロードして
お使いいただくことができます

こちらは 障害とか
利用状況のタイプごとにーー

それぞれのウェブ利用時の
障壁といったものがあって

そのための解決方法は
こうだっていうのをーー

1枚ずつの紙にまとめたものです
PDFとして配布してます

障害とか状況のタイプとしては
8つありまして

1つは 視覚障害(全盲)の方
それから 視覚障害(ロービジョン)の方

あと 色覚特性 聴覚障害 運動障害
ほかは認知/学習障害 あと 加齢

それから モバイルといった
8つのタイプごとに まとめてます

こちらは視覚障害(全盲)の方の
シートの例なんですけど

全盲というcontext(状況)があってーー

その場合 ウェブ利用時の
障壁としては こういう問題があって

その解決方法は こうでという形で
まとめてあります

このようなcontextと
problem(問題) solution(解決)のーー

パターン・ランゲージっぽい形で
まとめてあるのでーー

活用いただければと思います

こちらの contextのエリアの所に
白抜きの丸がありますけど

こちらを使っていただくとーー

実際に皆さんがお使いの
ペルソナの顔写真を当てはめる形で

ペルソナに障害とか利用状況の
属性を追加することができます

例えば ペルソナの山田さんが
ロービジョンだったらとか

ペルソナの佐藤さんが
聴覚障害だったらとか

ペルソナの鈴木さんが
運動障害だったらとかの形でーー

ペルソナにcontextを
付け加えることができますのでーー

こういったことを併せて
チームみんなで一緒に考えてーー

できれば 設計の上流の段階からーー

アクセシビリティ インクルーシブに
配慮したUI設計などにーー

つなげていただけたら
ありがたいなと思います

最後 結びになりますけども
“こんなご時世だからこそ”ということで

“ウィズコロナの時代”

更には “アフターコロナ”なんて
言葉も ささやかれてます

そういった時代になって 人と社会との
関わり方が大きく変わってきています

これは 皆さん自身が
痛感されてることかなと思いますけど

そういった中 コミュニケーションにおける
デジタル情報のアクセシビリティはーー

ますます重要になってくるところです

その中 受動的な
情報消費だけじゃなくてーー

能動的な情報利用においてもーー

十分なアクセシビリティを
担保していきたいなと思います

皆さんに 今日は
「Form Design Patterns」を題材にしたーー

セッションで
お話しさせていただきましたけども

このセッションを通じてーー

実際に取り組めそうなことが
何か ありましたら ちょっとずつでもーー

取り組んでみていただけたら
ありがたいかなと思います

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