Soumettre la recherche
Mettre en ligne
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
•
11 j'aime
•
8,387 vues
Nozomi Sawada
Suivre
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
Lire moins
Lire la suite
Internet
Signaler
Partager
Signaler
Partager
1 sur 43
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
ギリギリUXD
ギリギリUXD
uenoyuuki
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
週刊Webサイトのアーキテクチャ
週刊Webサイトのアーキテクチャ
Yoshitaka Kawashima
Recommandé
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
ギリギリUXD
ギリギリUXD
uenoyuuki
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
週刊Webサイトのアーキテクチャ
週刊Webサイトのアーキテクチャ
Yoshitaka Kawashima
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
sizucca
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
javascriptの基礎
javascriptの基礎
Masayuki Abe
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
Yoshitaka Kawashima
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
Takuya Kawabe
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
Daisuke Matsuda
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
秀和 福永
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
Takuya Kitamura
Designing UX Development
Designing UX Development
Mizushima Kazuhiro
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
Contenu connexe
Tendances
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
sizucca
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
javascriptの基礎
javascriptの基礎
Masayuki Abe
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
Yoshitaka Kawashima
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
Takuya Kawabe
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
Daisuke Matsuda
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
秀和 福永
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
Takuya Kitamura
Designing UX Development
Designing UX Development
Mizushima Kazuhiro
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
Tendances
(20)
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
javascriptの基礎
javascriptの基礎
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
ぐるぐるDDD(ドメイン駆動設計)に参加してみました
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
プロダクトマネージャとしてグローバルプラットフォーム開発に関わって学んだ5つのこと #postudy
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
Designing UX Development
Designing UX Development
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
Plus de Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
コントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Plus de Nozomi Sawada
(15)
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
コントラスト高めでいこう
コントラスト高めでいこう
代替テキストの基本から応用まで
代替テキストの基本から応用まで
岡山をリーダブルな世界に
岡山をリーダブルな世界に
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第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 ありがとうございました。
Télécharger maintenant