Suche senden
Hochladen
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
•
4 gefällt mir
•
3,284 views
Nozomi Sawada
Folgen
2017-05-18(木)に神戸商工貿易センタービルにて行われた「アクセシビリティの祭典」でのスライドです。
Weniger lesen
Mehr lesen
Internet
Melden
Teilen
Melden
Teilen
1 von 75
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
プログラミング生放送勉強会 第45回@名古屋
セッション「NW.js スタートアップ」資料
セッション「NW.js スタートアップ」資料
Sora Arakawa
UDC2015アイデア部門作品
【UDC2015】アイデア 008 室蘭百名坂
【UDC2015】アイデア 008 室蘭百名坂
CSISi
アーバンデータチャレンジ2015のアイデア部門に応募したアイデアです。 チーム: グループさん(戸子台、大嶋、白井、野路、山口)
室蘭百名坂 - アーバンデータチャレンジ2015
室蘭百名坂 - アーバンデータチャレンジ2015
yamahige
2019.6.15発表資料です。
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
Sakura Asano
TokyuRubyKaigi09のアクセプトLT(喋りたい人出てこいや!※高田延彦風)で発表した内容になります。昨年Railsの現場に入る前に自分が行った勉強法に関して軽くまとめた備忘録になります。
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Fumiya Sakai
(だいたい)新卒エンジニア向け技術交流会 vol.5 http://dark.connpass.com/event/23132/ で発表した資料 https://github.com/shengbo-medley/MiscForStudy/tree/master/20151212
でも、機械学習って お難しいんでしょ?
でも、機械学習って お難しいんでしょ?
Shengbo Xu
Imas hack 2019 カタヲP
ユニットが覚えられないおじさん
ユニットが覚えられないおじさん
Daichi Kataoka
CoEdo.rb Ruby / Railsビギナーズ勉強会第12回の資料になります。LINEBOTのサーバーサイド部分をお試しで作成した際の参考資料やその他諸々の部分をまとめたものになります。
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
Fumiya Sakai
Empfohlen
プログラミング生放送勉強会 第45回@名古屋
セッション「NW.js スタートアップ」資料
セッション「NW.js スタートアップ」資料
Sora Arakawa
UDC2015アイデア部門作品
【UDC2015】アイデア 008 室蘭百名坂
【UDC2015】アイデア 008 室蘭百名坂
CSISi
アーバンデータチャレンジ2015のアイデア部門に応募したアイデアです。 チーム: グループさん(戸子台、大嶋、白井、野路、山口)
室蘭百名坂 - アーバンデータチャレンジ2015
室蘭百名坂 - アーバンデータチャレンジ2015
yamahige
2019.6.15発表資料です。
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
「XD、受託案件で使ってみた」Adobe XD ユーザーフェス (名古屋)
Sakura Asano
TokyuRubyKaigi09のアクセプトLT(喋りたい人出てこいや!※高田延彦風)で発表した内容になります。昨年Railsの現場に入る前に自分が行った勉強法に関して軽くまとめた備忘録になります。
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Fumiya Sakai
(だいたい)新卒エンジニア向け技術交流会 vol.5 http://dark.connpass.com/event/23132/ で発表した資料 https://github.com/shengbo-medley/MiscForStudy/tree/master/20151212
でも、機械学習って お難しいんでしょ?
でも、機械学習って お難しいんでしょ?
Shengbo Xu
Imas hack 2019 カタヲP
ユニットが覚えられないおじさん
ユニットが覚えられないおじさん
Daichi Kataoka
CoEdo.rb Ruby / Railsビギナーズ勉強会第12回の資料になります。LINEBOTのサーバーサイド部分をお試しで作成した際の参考資料やその他諸々の部分をまとめたものになります。
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
Fumiya Sakai
2019/11/2(土)にハッシュタグにて行われた「リーダブルな昼下がり on 2019/11/02」でのセッションで使用したスライドです。
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
2019/9/2(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/09/02」でのワークショップで使用したスライドです。
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
2019/7/8(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/07/08」でのスライドです。
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
2019/05/17(金)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。 カラーユニバーサルデザイン 推奨配色セット ガイドブック(第2版) http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。
コントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】 代替テキスト決定ツリー:http://bit.ly/readable_ALT
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
2017-05-17(木)に神戸ジーベックホールにて行われた「アクセシビリティの祭典 2018」でのスライドです。
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
※ P.83に注釈を追加しました。 2017-06-10(土)に倉敷物語館にて行われた「第7回 okayama-js」でのスライドです。
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
2017-06-03(土)にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
(※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09) 2017-03-05(日)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
2016-09-22(木)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。 公開にあたり下記の編集を加えました。 1.資料中の下線箇所にハイパーリンクを張りました。 2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90) ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82) ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90) 3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Weitere ähnliche Inhalte
Mehr von Nozomi Sawada
2019/11/2(土)にハッシュタグにて行われた「リーダブルな昼下がり on 2019/11/02」でのセッションで使用したスライドです。
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
2019/9/2(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/09/02」でのワークショップで使用したスライドです。
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
2019/7/8(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/07/08」でのスライドです。
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
2019/05/17(金)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。 カラーユニバーサルデザイン 推奨配色セット ガイドブック(第2版) http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。
コントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】 代替テキスト決定ツリー:http://bit.ly/readable_ALT
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
2017-05-17(木)に神戸ジーベックホールにて行われた「アクセシビリティの祭典 2018」でのスライドです。
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
※ P.83に注釈を追加しました。 2017-06-10(土)に倉敷物語館にて行われた「第7回 okayama-js」でのスライドです。
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
2017-06-03(土)にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
(※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09) 2017-03-05(日)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
2016-09-22(木)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。 公開にあたり下記の編集を加えました。 1.資料中の下線箇所にハイパーリンクを張りました。 2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90) ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82) ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90) 3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Mehr von 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
Jetzt herunterladen