Soumettre la recherche
Mettre en ligne
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
•
4 j'aime
•
3,284 vues
Nozomi Sawada
Suivre
2017-05-18(木)に神戸商工貿易センタービルにて行われた「アクセシビリティの祭典」でのスライドです。
Lire moins
Lire la suite
Internet
Signaler
Partager
Signaler
Partager
1 sur 75
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
セッション「NW.js スタートアップ」資料
セッション「NW.js スタートアップ」資料
Sora Arakawa
【UDC2015】アイデア 008 室蘭百名坂
【UDC2015】アイデア 008 室蘭百名坂
CSISi
室蘭百名坂 - アーバンデータチャレンジ2015
室蘭百名坂 - アーバンデータチャレンジ2015
yamahige
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
Sakura Asano
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Fumiya Sakai
でも、機械学習って お難しいんでしょ?
でも、機械学習って お難しいんでしょ?
Shengbo Xu
ユニットが覚えられないおじさん
ユニットが覚えられないおじさん
Daichi Kataoka
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
Fumiya Sakai
Recommandé
セッション「NW.js スタートアップ」資料
セッション「NW.js スタートアップ」資料
Sora Arakawa
【UDC2015】アイデア 008 室蘭百名坂
【UDC2015】アイデア 008 室蘭百名坂
CSISi
室蘭百名坂 - アーバンデータチャレンジ2015
室蘭百名坂 - アーバンデータチャレンジ2015
yamahige
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
Sakura Asano
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Fumiya Sakai
でも、機械学習って お難しいんでしょ?
でも、機械学習って お難しいんでしょ?
Shengbo Xu
ユニットが覚えられないおじさん
ユニットが覚えられないおじさん
Daichi Kataoka
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
Fumiya Sakai
中小企業の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
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Contenu connexe
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
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Plus de Nozomi Sawada
(19)
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
コントラスト高めでいこう
コントラスト高めでいこう
代替テキストの基本から応用まで
代替テキストの基本から応用まで
岡山をリーダブルな世界に
岡山をリーダブルな世界に
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
1.
1
2.
2 自己紹介
3.
3
4.
4
5.
5
6.
6 D2Dアクセシビリティ勉強会って?
7.
7
8.
8
9.
9 今日はWAI-ARIAです。
10.
10 神戸を紹介するページを作ります!
11.
11
12.
12
13.
13 role属性をたくさん盛ったから すっごくアクセシブルよ!!
14.
14 オヤオヤ、みるくさん それはどーなんでしょーか?
15.
15 えっ
16.
16 ちょっと盛り過ぎてやしませんか?
17.
17
18.
18 3月の勉強会で何て言いましたっけ?
19.
19
20.
20
21.
21 あっ
22.
22
23.
23
24.
24
25.
25
26.
26 なんか、わくわくしないけど。 (せっかく盛ったのに...
27.
27 じゃ、次は...分かりやすくと思って 見出しを追加しました!!
28.
28
29.
29
30.
30 普通にマークアップしないから。 せっかく覚えたからWAI-ARIA使うの! (要素もちゃんと変えてるの) • • •
•
31.
31 オヤオヤ、みるくさん それはどーなんでしょーか?
32.
32 えっ
33.
33
34.
34 たしかにdiv要素は暗黙のARIAセマンティ クスがないので、role属性でロールを与 えるのは間違いじゃないんですけど...
35.
35
36.
36 じゃー、いいんじゃないの?
37.
37 いやいや、WAI-ARIAはHTMLの適切な 要素で実装できない場合にあくまで • • •
• ウラ技として使って欲しいんですよね。
38.
38 大切なのはセマンティクス ↓ 要素の意味 ↓ 適切な要素が使えない時にWAI-ARIA
39.
39 でも、間違いじゃないんですよね?
40.
40 えっ、そ、そーですけど...
41.
41 このページって、div要素にしないと いけない(CMS、JSやフレームワークなどの) 制限ってあるんですか?
42.
42 いや、別に無いけど...
43.
43 じゃ、HTMLの要素を 普通に使っておきましょう。
44.
44
45.
45
46.
46 なんか、普通...
47.
47 普通じゃ何か不都合でも?
48.
48 そんなコトないけど...
49.
49 最後は...キービジュアルに キャッチコピーを入れました!!
50.
50
51.
51
52.
52 キャッチコピーを画像化してないから すっごくアクセシブルよ!!
53.
53 オヤオヤ、みるくさん それはどーなんでしょーか?
54.
54 えっ
55.
55
56.
56 キャッチコピーは伝わりますが、 ポートタワーの夜景だということは 伝わらなくてもいいと。
57.
57 だーかーらー、一番伝えたいのは キャッチコピーなんだから、 背景は装飾と同じでしょ?
58.
58 なるほど。 兵庫大仏に変わっても影響はないと。
59.
59
60.
60 なにこれ!神戸っぽくないし...
61.
61 だって、一番伝えたいのは キャッチコピーなんやから、 背景は装飾と同じちゃいますのん!
62.
62 うっ
63.
63 その画像を視覚的に見ることができ なくても「写真があること」を認識 できれば、他の人に見てもらうこと もできますよね。
64.
64
65.
65
66.
66 なんか、否定されてばっかり。 WAI-ARIAって、実は役に立たない?
67.
67 いやいや、そんなことないですよ。 こんな例もあります。
68.
68
69.
69 この例みたいにtable要素をレイアウ ト目的で使った場合、このままだとス クリーンリーダーは「テーブル」とし て読み上げてしまうんですよね。
70.
70
71.
71 その他にも、こちらのブログに 便利な使い方が紹介されてますよ!!
72.
72
73.
73 あらやだ、私の記事じゃないの...
74.
74 詳しい説明は、 D2Dアクセシビリティ勉強会で!!
75.
75
Télécharger maintenant