（土屋）よろしくお願いします

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

とはいえ その中でもーー

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

そのエッセンスをーー

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

ちょっと その前にーー

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

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

公開されているものです

The Paciello Groupというーー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

段階的に情報を開示する

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

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

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

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

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

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

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

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

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

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

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

ご興味ありましたらーー

こちらのＵＲＬ(inclusivedesign
principles.org)をーー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こういったラベルはーー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォーカスの位置をーー

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

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

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

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

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

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

これですね

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは再生します

（読み上げ音声）
登録フォーム 見出しレベル１

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

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

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

登録する

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

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

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

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

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

（土屋）このような形でーー

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

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

次の例です

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iPhoneとVoiceOverの場合ですとーー

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

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

それでは再生してみます

（読み上げ音声）到着地

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

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

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

249の到着地候補

（機械音声）ｊ ｊ

（読み上げ音声）11の到着地候補

（機械音声）ａ ａ

（読み上げ音声）５の到着地候補

完了ボタン 完了

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

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

ジャマイカ/Jamaica

日本/Japan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あと ＰＣでもスマホでも
一貫性のあるＵＩを提供することでーー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

同時に読み上げられます

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

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

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

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

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

再生してみます

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

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

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

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

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

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

製品検索

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

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

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

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

次の例 座席の選択です

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

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

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

その座席には １Ａ １Ｂとか
２Ａ ２Ｂとか番号が振ってあって

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

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

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

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

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

HTMLの<fieldset>で囲んでーー

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

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

座席番号(１Ａ １Ｂ １Ｃとか)は
<label>要素でマークアップしてあって

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

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

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

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

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

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

あとは隠し味的にーー

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

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

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

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

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

こちらですね

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

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

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

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

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

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

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

例えば
お隣の１Ｃという座席を選ぶとーー

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

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

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

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

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

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

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

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

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

それでは再生します

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

１Ａ 窓側 チェックボックス
チェックが外されました

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

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

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

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

１Ｄ窓側 チェックボックス
チェックが外されました

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

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

（土屋）こんな感じで ２次元的に
平面に並んでいる情報なんですけど

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例えば 赤を選びます

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

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

読み込み中 読み込み完了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再生してみます

（読み上げ音声）財布 見出しレベル１

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

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

絞り込み 見出しレベル２

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

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

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

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

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

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

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

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

読み込み完了

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

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

一応 読まれて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この入力要素ーー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

１枚ずつの紙にまとめたものです
ＰＤＦとして配布してます

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“ウィズコロナの時代”

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

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

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

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

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

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

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

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

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

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

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

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

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

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