SlideShare a Scribd company logo
Submit Search
Upload
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Report
Share
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
•
11 likes
•
8,382 views
1
of
43
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
•
11 likes
•
8,382 views
Report
Share
Download Now
Download to read offline
Internet
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
Read more
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
Recommended
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」 by
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2.4K views
•
57 slides
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」 by
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
1.7K views
•
41 slides
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」 by
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2.2K views
•
67 slides
岡山で アクセシビリティ はじめよーでー by
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2.4K views
•
42 slides
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性 by
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
185 views
•
32 slides
ギリギリUXD by
ギリギリUXD
uenoyuuki
2.7K views
•
36 slides
More Related Content
What's hot
デザインスプリントを実践して分かったこと by
デザインスプリントを実践して分かったこと
sizucca
1.6K views
•
30 slides
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪 by
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
4.6K views
•
38 slides
デザイナーからみた仕事をしやすいディレクター by
デザイナーからみた仕事をしやすいディレクター
take-it
73.9K views
•
53 slides
Webサイトのようには作れない!Webアプリ設計の考え方 by
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
9.6K views
•
73 slides
BizVektorに見る汎用テンプレートの設計思想 by
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
2.8K views
•
30 slides
javascriptの基礎 by
javascriptの基礎
Masayuki Abe
1.3K views
•
26 slides
What's hot
(20)
デザインスプリントを実践して分かったこと by sizucca
デザインスプリントを実践して分かったこと
sizucca
•
1.6K views
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪 by Yuki Okada
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
•
4.6K views
デザイナーからみた仕事をしやすいディレクター by take-it
デザイナーからみた仕事をしやすいディレクター
take-it
•
73.9K views
Webサイトのようには作れない!Webアプリ設計の考え方 by girigiribauer
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
•
9.6K views
BizVektorに見る汎用テンプレートの設計思想 by Hidekazu Ishikawa
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
•
2.8K views
javascriptの基礎 by Masayuki Abe
javascriptの基礎
Masayuki Abe
•
1.3K views
聞いて覚えるマテリアルデザイン入門 by 正樹 平野
聞いて覚えるマテリアルデザイン入門
正樹 平野
•
5.3K views
デザイナーが複業でデザイナーしてる話 by Yuya Toida
デザイナーが複業でデザイナーしてる話
Yuya Toida
•
2.8K views
それはYAGNIか? それとも思考停止か? by Yoshitaka Kawashima
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
•
29.3K views
ふつうの受託開発チームのつくりかた by Yoshitaka Kawashima
ふつうの受託開発チームのつくりかた
Yoshitaka Kawashima
•
16.5K views
ぐるぐるDDD(ドメイン駆動設計)に参加してみました by Takuya Kawabe
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
Takuya Kawabe
•
6.1K views
コーディングを考慮したWebデザインガイドライン by Hiroyuki Makishita
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
•
188.1K views
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy by Daisuke Matsuda
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
Daisuke Matsuda
•
2K views
ワークショップとUX ――なぜ今ワークショップが重要なのか by Hitomi Yamagishi
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
•
4.3K views
ゲーム開発出身者がチームラボで働いてみた by 秀和 福永
ゲーム開発出身者がチームラボで働いてみた
秀和 福永
•
53K views
コンポーネント単位で考えるWeb制作 by 祐磨 堀
コンポーネント単位で考えるWeb制作
祐磨 堀
•
20.9K views
Swiftにおけるclassとstructの使い分けをDDDから考える by Takuya Kitamura
Swiftにおけるclassとstructの使い分けをDDDから考える
Takuya Kitamura
•
4.2K views
Designing UX Development by Mizushima Kazuhiro
Designing UX Development
Mizushima Kazuhiro
•
2.8K views
Bootstrapにちょい足しアニメーション@春のJavascript祭り by Masayuki Abe
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
•
8K views
UXグラフとUXグラフツールのススメ - UX評価について - by uenoyuuki
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
•
4.5K views
More from Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ by
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
1.9K views
•
84 slides
「誰」が「何」をする?みんなで考えてみよう! by
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
564 views
•
22 slides
UDトークで会話をアクセシブルにしてみよう by
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
1.5K views
•
48 slides
色にまつわるエトセトラ(いろいろ) by
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
1.2K views
•
95 slides
コントラスト高めでいこう by
コントラスト高めでいこう
Nozomi Sawada
2.9K views
•
81 slides
代替テキストの基本から応用まで by
代替テキストの基本から応用まで
Nozomi Sawada
5.3K views
•
62 slides
More from Nozomi Sawada
(15)
中小企業のWebサイトでも気にしておきたいアクセシビリティ by Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
•
1.9K views
「誰」が「何」をする?みんなで考えてみよう! by Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
•
564 views
UDトークで会話をアクセシブルにしてみよう by Nozomi Sawada
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
•
1.5K views
色にまつわるエトセトラ(いろいろ) by Nozomi Sawada
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
•
1.2K views
コントラスト高めでいこう by Nozomi Sawada
コントラスト高めでいこう
Nozomi Sawada
•
2.9K views
代替テキストの基本から応用まで by Nozomi Sawada
代替テキストの基本から応用まで
Nozomi Sawada
•
5.3K views
岡山をリーダブルな世界に by Nozomi Sawada
岡山をリーダブルな世界に
Nozomi Sawada
•
725 views
こんなとき実感!代替テキストと字幕の大切さ by Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
•
1K views
Webアクセシビリティ 今ならどうするの? by Nozomi Sawada
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
•
1.3K views
第7回 okayama-js 実践 WAI-ARIA by Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
•
2.5K views
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと by Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
•
17.4K views
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜 by Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
•
3.3K views
WAI-ARIAの考え方と使い方を整理しよう by Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
•
14.2K views
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント by Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
•
2.9K views
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 by Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
•
2.9K views
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
1.
アクセシブルな入力フォームを作ろう 2015年6月21日 第6回 D2Dアクセシビリティ勉強会
2.
2 自己紹介
3.
3 SAWADA STANDARD DESIGN
澤田 望 @SawadaStdDesign WAIC WG2委員(2011年〜) キヤノンサイトのデザイン監修/運用(〜2013年) 2014年、岡山で独立
4.
4 今回の目標
5.
5 ↑ ここの克服。 D2Dサイト用の単純な入力フォームは作れた。 でも、現実世界はそんなに甘くない!もっと面倒 なフォームばかりで、対応できない気がする。
6.
6 ま、できる範囲のことをしてみよう。(なげやり)
7.
7 プログラムは変更せず、マークアップの工夫だけでも アクセシブルにするためのポイントは大部分がカバーできる .
. . はず。
8.
8 入力フォームを JIS対応させる際のポイント
9.
9 •知覚可能 フォームのコントロールであることが分かり、 •操作可能 ちゃんと操作できて、 •理解可能 何を入力すべきかが理解できる。
•堅牢性 ウェブアクセシビリティの4つの原則
10.
10 JIS X 8341-3:2010
達成等級Aの 達成基準を満たすために必要なこと 参考:実装チェックリストの例例 2012年年11⽉月版
11.
11 フォームコントロールも非テキストコンテンツなので、 ラベルや代替テキストで「何の」コントロールなのか を伝える。 ⚫達成方法の例 H36:コントロールに画像を使うなら代替テキストを設定する。
H44:label要素でテキストラベルとコントロールを関連付ける。 H65:label要素を使えないなら、title属性で代用する。 7.1.1.1 非テキストコンテンツ
12.
12 「ラベルとコントロール」「コントロールのグループ」等 の関係性をちゃんと伝える。 ⚫達成方法の例 H44:label要素で、テキストラベルとコントロールを関連付ける。
H65:label要素を使えないなら、title属性で代用する。 H71:fieldset要素とlegend要素で、グループの説明をする。 H85:optgroup要素で、select要素内のoption要素をグループ化する。 7.1.3.1 情報及び関係性
13.
13 入力完了までに制限時間を設ける場合は、入力に時間がか かる利用者が困らないよう、延長や解除ができる手段を提 供する。 ⚫達成方法の例 G133:複数画面あるフォームの最初のページに、
利用者が制限時間を延長/解除できるチェックボックスを提供する。 G198:利用者が制限時間を解除できる手段を提供する。 7.2.2.1 タイミング調整可能
14.
14 入力すべき順序とフォーカスの順序を一致させる。 まずはマークアップ順。ダメならtabindex属性。 ⚫達成方法の例
G59:コンテンツ内の順番と関係に従ってコントロールを並べる。 H4:コントロールには論理的なタブ移動順序を作成する。 C27:DOMの順序を表示順序と一致させる。 7.2.4.3 フォーカス順序
15.
15 利用者が気づかないと混乱する恐れのある大きな変化を、 フォームコントロールの設定変更中(操作している最中) に起こさない。 ⚫達成方法の例 G80/H32:実行ボタンを提供する。
H84:select要素とボタンを併用してアクションを実行する。 G13:変化を引き起こす前に、何が起こるのかを説明する。 7.3.2.2 コンテキスト変化の防止(入力時)
16.
16 入力エラー検出時には、エラー箇所を特定し、 エラー内容を利用者にテキストで説明する。 ⚫達成方法の例
G83:必須なのに未入力な項目をテキストで指摘する。 G84:認められない値が入力されたらテキストで指摘する。 G85:要求と違うフォーマットや値ならテキストで指摘する。 7.3.3.1 エラーの特定
17.
17 入力用の各コントロールには、ラベル又は説明文を提供する。 ⚫達成方法の例 G89:データ形式および入力例を提供する。
G184:フォームの先頭でフォーマットの説明文を提供する。 G162:入力項目とラベルの関係がよく分かるように配置する。 G83:必須なのに未入力な項目をテキストで指摘する。 H44:label要素でテキストラベルとコントロールを関連付ける。 H65:label要素を使えないなら、title属性で代用する。 H71:fieldset要素とlegend要素で、グループの説明をする。 G167:テキストフィールドを隣のボタンでラベル付けする。(最終手段) 7.3.3.2 ラベル又は説明
18.
18 やっぱり大変. . .
19.
19 いやいや、多く見えるけど、基本的には ラベル/説明文/エラーメッセージ の3つで多くのケースはカバーできるはず。
20.
20 D2Dサイトの入力フォームを アクセシブルにするポイント
21.
21 1.迷いようのないラベル 2.必須項目が3箇所 3.メールアドレス
4.電話番号 5.ラジオボタン 6.白抜き文字のデザイン
22.
22 <label for="hoge">お名前<span>必須</span></label> <input
type="text" id="hoge"> 1. 迷いようのないラベル ※for属性とid属性によって対応関係を定義する。
23.
23 <label for="hoge">お名前<span>必須</span></label> <input
type="text" id="hoge" aria-‐‑‒required="true"> 2. 必須項目が3箇所 ※required属性はNVDAが「無効なエントリー」と読み上げてしまう。 required属性 + aria-required="true"でも同じ。
24.
24 <label for="hoge">メールアドレス<span>必須</span></label> <input
type="text" id="hoge" aria-‐‑‒required="true"> 3. メールアドレス ※type=“email”はエラーチェックが厳く、半角スペースが入っていても 「メールアドレスが正しくありません」でエラーになるため今回は見送り。
25.
25 <label for="hoge">電話番号</label> <input
type="tel" id="hoge"> 4. 電話番号 ※type=“tel”は特にエラーチェックしてくれるわけではないが、 スマホでキーボードを電話番号用に切り替えてくれる。
26.
26 <p id="hoge">お問合せの種類</p> <div
role="radiogroup"> <label for="hogeA"> <input type="radio" id="hogeA" aria-‐‑‒describedby="hoge">Aについて </label> : </div> 5. ラジオボタン ※本来ならfieldset要素を使うべき箇所。 しかしPC-Talker7とVoiceOverで読み上げられないので、現時点では見送り。 確実に読み上げられないと意味が通じなくなる箇所にはfieldset要素を使わない。
27.
27 6. 白抜き文字のデザイン input[type="submit"] {
background: #000000 url(“〜~/img/arrow.gif") no-‐‑‒repeat scroll 94% 50%; border-‐‑‒bottom-‐‑‒left-‐‑‒radius: 10px; border-‐‑‒top-‐‑‒right-‐‑‒radius: 10px; color: #ffffff; display: block; } ※文字サイズ拡大時に背景からはみ出して読めなくならないように注意。
28.
28 D2Dサイト用の入力フォームは単純だったけど、 もう少し複雑なパターンを作れないと、実際の業 務に活かせない. . .
29.
29 もう少し現実世界と向き合うために
30.
30 1.要素のセマンティクスを最優先 それで通じるなら、それだけでいい。 (Notes
on Using ARIA in HTML [日本語訳]参照) •label要素など 2.WAI-ARIAの必要性検討 妥当な要素が使えない場合。 •aria-label/aria-labelledbyでラベル •aria-describedbyで説明 •roleでグループ化(radiogroupなど) 3.スクリーンリーダーの対応状況は、まだマチマチ html5で追加された要素や属性は要注意。 無視されるよりも間違った読み方をされることが危険。 WAICのアクセシビリティサポーテッド情報も未整備。 WAI-ARIAの使用について(基本的な考え方)
31.
31 じゃ、よくあるパターンをいくつか
32.
32 <label for="hoge">電話番号</label> <div>
<input type="tel" id="hoge" title="市外局番">-‐‑‒<input type="tel" title="市内局番">-‐‑‒ <input type="tel" title="加入者番号"> </div> 一つの項目が複数のフィールドに分かれている ※各フィールドに対するラベルは必要。しかしデザイン上表記されているのは「電 話番号」のみで、「市外局番」などを個別に表示することは難しい状況。 →仕方ない状況なので、今回はtitle属性を使う。 ただし、title属性はビジュアルブラウザーでは表示されない点に注意。 電話番号 - -
33.
33 <label for="hoge">リングネーム</label> <input
type="text" id="hoge" aria-‐‑‒describedby="hogeDesc"> <p id="hogeDesc">全角カナ</p> 説明文がフィールドの右にレイアウトされている ※そのまま並べただけでは、スクリーンリーダー利用者や画面拡大利用者が入力前に気がつ かない可能性が高い。 →aria-describedby属性で説明文と関係付ける。 リングネーム 全角カナ
34.
34 <label for="hoge">リングネーム</label> <input
type="text" id="hoge" placeholder="ミル・マスカラス"> フィールド内に入力例を表示したい ※ placeholder属性を使うと割とお気軽に実現できる。 ように見えるが. . . ミル・マスカラス リングネーム
35.
35 プレースホルダーの問題点 1.入力時にplaceholder属性の内容が消えてしまうため、 途中で「何だったっけ?」と振り返れない。 →必要な情報は常時表示させる。
2.入力漏れを探しにくい。 3.入力前に自分で消そうとする利用者がいる。 4.input要素がlabel要素と関係付けられている場合、placeholder 属性は、PC-Talker7とNVDAで読み上げられない。 →title属性をjQuery使って重ねる。 <label for="hoge">リングネーム</label> <input type="text" id="hoge" title="例:ミル・マスカラス">
36.
36 <body onload=“document.getElementById('error_̲message').focus()"> :
<label for="hoge">リングネーム</label> <input type="text" id="hoge" aria-‐‑‒describedby="hogeDesc"> <p id=“hogeDesc">全角カナ</p> <p role="alert" aria-‐‑‒live="assertive" id="error_̲message" tabindex="-‐‑‒1">リングネームは全力で入力してください。 </p> エラーメッセージを読み上げさせたい ※HTML5で追加された属性(required属性やpattern属性など)による入力チェック結果 表示は、スクリーンリーダーの読み上げ対応が遅れているため、現状ではJavaScriptな どで動的に追加する方法を推奨します。 ※role=“alert”だけだとNVDAが優先読み上げしない。 上田馬之助リングネーム 全角カナ リングネームは全力で入力してください。
37.
37 次は、みるくさんから意地悪問題の出題です。
38.
38 では、制作開始!
39.
39 お疲れ様でした!では解答例を。
40.
40 最後に補足を一つ
41.
41 【補足】外部サービスのフォームをアクセシブルにする WAIC宛にいただいた質問の中に「外部サービスを利用した検索窓を設置しており、提供さ れたコードを編集できないため、label要素を追加できない」というものがありました。 しかし外部サービスでもHTML編集できるものや、編集は出来なくてもid属性が付けられて いれば、対応するlabel要素を追加することができます。 例)Googleの場合
提供されるコード 埋め込み後、実行時のコード <script> (function() { var cx = '016706344149176820118:zkxgdo_̲a-‐‑‒oe'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> <input id="gsc-‐‑‒i-‐‑‒id1" class="gsc-‐‑‒input" type="text" lang="ja" autocomplete="off" size="10" name="search" title=“検索"〜〜〜> <label for=“gsc-‐‑‒i-‐‑‒id1">検索したい情 報を入力してください。</label> 下記を追加すればアクセシブルに!
42.
42 諦めなければ、たどり着けるぜ!
43.
43 ありがとうございました。