WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜

Nozomi Sawada
Nozomi SawadaDesigner at SAWADA STANDARD DESIGN
1
2
自己紹介
3
4
5
6
D2Dアクセシビリティ勉強会って?
7
8
9
今日はWAI-ARIAです。
10
神戸を紹介するページを作ります!
11
12
13
role属性をたくさん盛ったから
すっごくアクセシブルよ!!
14
オヤオヤ、みるくさん
それはどーなんでしょーか?
15
えっ
16
ちょっと盛り過ぎてやしませんか?
17
18
3月の勉強会で何て言いましたっけ?
19
20
21
あっ
22
23
24
25
26
なんか、わくわくしないけど。
(せっかく盛ったのに...
27
じゃ、次は...分かりやすくと思って
見出しを追加しました!!
28
29
30
普通にマークアップしないから。
せっかく覚えたからWAI-ARIA使うの!
(要素もちゃんと変えてるの)
• • • •
31
オヤオヤ、みるくさん
それはどーなんでしょーか?
32
えっ
33
34
たしかにdiv要素は暗黙のARIAセマンティ
クスがないので、role属性でロールを与
えるのは間違いじゃないんですけど...
35
36
じゃー、いいんじゃないの?
37
いやいや、WAI-ARIAはHTMLの適切な
要素で実装できない場合にあくまで
• • • •
ウラ技として使って欲しいんですよね。
38
大切なのはセマンティクス
↓
要素の意味
↓
適切な要素が使えない時にWAI-ARIA
39
でも、間違いじゃないんですよね?
40
えっ、そ、そーですけど...
41
このページって、div要素にしないと
いけない(CMS、JSやフレームワークなどの)
制限ってあるんですか?
42
いや、別に無いけど...
43
じゃ、HTMLの要素を
普通に使っておきましょう。
44
45
46
なんか、普通...
47
普通じゃ何か不都合でも?
48
そんなコトないけど...
49
最後は...キービジュアルに
キャッチコピーを入れました!!
50
51
52
キャッチコピーを画像化してないから
すっごくアクセシブルよ!!
53
オヤオヤ、みるくさん
それはどーなんでしょーか?
54
えっ
55
56
キャッチコピーは伝わりますが、
ポートタワーの夜景だということは
伝わらなくてもいいと。
57
だーかーらー、一番伝えたいのは
キャッチコピーなんだから、
背景は装飾と同じでしょ?
58
なるほど。
兵庫大仏に変わっても影響はないと。
59
60
なにこれ!神戸っぽくないし...
61
だって、一番伝えたいのは
キャッチコピーなんやから、
背景は装飾と同じちゃいますのん!
62
うっ
63
その画像を視覚的に見ることができ
なくても「写真があること」を認識
できれば、他の人に見てもらうこと
もできますよね。
64
65
66
なんか、否定されてばっかり。
WAI-ARIAって、実は役に立たない?
67
いやいや、そんなことないですよ。
こんな例もあります。
68
69
この例みたいにtable要素をレイアウ
ト目的で使った場合、このままだとス
クリーンリーダーは「テーブル」とし
て読み上げてしまうんですよね。
70
71
その他にも、こちらのブログに
便利な使い方が紹介されてますよ!!
72
73
あらやだ、私の記事じゃないの...
74
詳しい説明は、
D2Dアクセシビリティ勉強会で!!
75
1 of 75

Recommended

セッション「NW.js スタートアップ」資料 by
セッション「NW.js スタートアップ」資料セッション「NW.js スタートアップ」資料
セッション「NW.js スタートアップ」資料Sora Arakawa
830 views39 slides
【UDC2015】アイデア 008 室蘭百名坂 by
【UDC2015】アイデア 008 室蘭百名坂【UDC2015】アイデア 008 室蘭百名坂
【UDC2015】アイデア 008 室蘭百名坂CSISi
2.5K views25 slides
室蘭百名坂 - アーバンデータチャレンジ2015 by
室蘭百名坂 - アーバンデータチャレンジ2015室蘭百名坂 - アーバンデータチャレンジ2015
室蘭百名坂 - アーバンデータチャレンジ2015yamahige
601 views24 slides
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋) by
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)Sakura Asano
1.1K views29 slides
Railsの現場に入る前のお話(勉強法) by
Railsの現場に入る前のお話(勉強法)Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)Fumiya Sakai
630 views6 slides
でも、機械学習って お難しいんでしょ? by
でも、機械学習って お難しいんでしょ?でも、機械学習って お難しいんでしょ?
でも、機械学習って お難しいんでしょ?Shengbo Xu
2.2K views35 slides

More Related Content

More from Nozomi Sawada

中小企業のWebサイトでも気にしておきたいアクセシビリティ by
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティNozomi Sawada
1.9K views84 slides
「誰」が「何」をする?みんなで考えてみよう! by
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!Nozomi Sawada
564 views22 slides
UDトークで会話をアクセシブルにしてみよう by
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようNozomi Sawada
1.5K views48 slides
色にまつわるエトセトラ(いろいろ) by
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)Nozomi Sawada
1.2K views95 slides
コントラスト高めでいこう by
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこうNozomi Sawada
2.9K views81 slides
代替テキストの基本から応用まで by
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用までNozomi Sawada
5.3K views62 slides

More from Nozomi Sawada(19)

中小企業のWebサイトでも気にしておきたいアクセシビリティ by Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada1.9K views
「誰」が「何」をする?みんなで考えてみよう! by Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada564 views
UDトークで会話をアクセシブルにしてみよう by Nozomi Sawada
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada1.5K views
色にまつわるエトセトラ(いろいろ) by Nozomi Sawada
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada1.2K views
コントラスト高めでいこう by Nozomi Sawada
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada2.9K views
代替テキストの基本から応用まで by Nozomi Sawada
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada5.3K views
岡山をリーダブルな世界に by Nozomi Sawada
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada727 views
こんなとき実感!代替テキストと字幕の大切さ by Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada1K views
Webアクセシビリティ 今ならどうするの? by Nozomi Sawada
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada1.3K views
第7回 okayama-js 実践 WAI-ARIA by Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada2.5K views
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと by Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada17.4K views
WAI-ARIAの考え方と使い方を整理しよう by Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada14.2K views
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント by Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada2.9K views
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」 by Nozomi Sawada
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada2.4K views
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」 by Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada1.7K views
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 by Nozomi Sawada
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada8.4K views
岡山で アクセシビリティ はじめよーでー by Nozomi Sawada
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada2.4K views
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」 by Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada2.2K views
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 by Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada2.9K views

WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜