SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Downloaden Sie, um offline zu lesen
アクセシビリティ
はじめました
サイボウズ株式会社 杉山祐一
About me
そろそろ新卒3年目のプログラマ
大企業向けグループウェア Garoon
副業ミュージシャン(自称)
Agenda
Webアクセシビリティって?
進まないアクセシビリティ対応
アクセシビリティ対応が進んでから気がついたこと
Webアクセシビリティって?
日本Webアクセシビリティ協会によると
アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが、
様々な製品や建物やサービスなどを支障なく利用できるかどうか、
あるいはその度合いを表す言葉です。
http://www.jawaa.or.jp/Accessibility/Accessibility.html
日本Webアクセシビリティ協会によると
アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが、
様々な製品や建物やサービスなどを支障なく利用できるかどうか、
あるいはその度合いを表す言葉です。
http://www.jawaa.or.jp/Accessibility/Accessibility.html
誰でも最低限使えるようにすること
画像にはalt タグをつける
全盲の人でも画像が何かわかる
背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源
背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源
弱視の人でもはっきり文字が読める
背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源
WCAG AAA基準不適合
WCAG AA基準不適合!
7:1 のコントラスト比
4.5:1 のコントラスト比
ほかにもたくさん
キーボード操作を行えるようにする
200%まで拡大可能にする
スタイルシートが当たっていなくても正しく読むことができるようにする
正しいHTMLを書く
...
詳しくはWCAG2.xを!
アクセシビリティ
はじめました
3か月後
なんの成果も!!
得られませんでした!!
アクセシビリティ
はじまりません
時間が取れなかった
手が空いたらやろう。思い続けて3ヶ月。
もしかして
Accessibility Day!
2週間ごとに半日アクセシビリティのことだけをやる日を決める
予定が決まっているので先に通常タスクを調整できる
ローコストで開催する
Small Start
デザイナー 1名 + プログラマ 1名
 事前準備は原則なし
 宿題も原則なし
学び
待っていても時間はいつまでたってもできない
時間がないなら、さきに作ればいいじゃない
ローコストにして時間を区切ればメリハリが出る
メンバー間に温度差がある
プロダクトマネージャ「次期バージョンで前向きに検討しよう」
もしかして
実際に見てもらう
百聞は一見に如かず
社内でアクセシビリティのワークショップ
障害者の方に製品を実際に触ってもらう
学び
自分たちの製品を使えないユーザーを
目の当たりにするのは結構つらい
多様なユーザーを知ることは大事
メンバーに知ってもらうことはもっと大事
どこから対応するかが決められない
「全部対応するのにどれくらいかかる?」
「それ調べるのに3か月もらっていいですか?」
もしかして
アクセシビリティチェックツールをかける
ChromeLens
https://chrome.google.com/webstore/detail/chrome
lens/idikgljglpfilbhaboonnpnnincjhjkd
ごめんなさい
アクセスしにくい環境から触ってみる
スクリーンリーダー(音声読み上げソフト)から操作する
拡大鏡を使ってみる
キーボードだけで操作する
モノトーン環境での表示を確かめる
アクセスしにくい環境から触ることで、より重要な問題点が浮き彫りになる
ユーザーごとに困るポイントは異なる
altがない・テーブルレイアウト
クリック操作前提のパーツ
広い余白 ・ スクロールするパーツ
一行が長い ・ レスポンシブデザイン
フォーカスできない要素がある
隠れている要素にフォーカスが当たる
キーボードだけを使うユーザー
拡大鏡利用ユーザー
スクリーンリーダーユーザー
altがない・テーブルレイアウト
クリック操作前提のパーツ
広い余白 ・ スクロールするパーツ
一行が長い ・ レスポンシブデザイン
フォーカスできない要素がある
隠れている要素にフォーカスが当たる
ユーザーごとに困るポイントは異なる
キーボードだけを使うユーザー
拡大鏡ユーザー
スクリーンリーダーユーザー
何に対応すればどんなユーザーのアクセシビリティが改善するかがわかる
学び
自動チェックツールも大事だが、実際に触ってみることも大事
自分の体験にすることで、アクセシビリティ対応のモチベーション
が上がる
アクセシビリティ対応が進んでから気づいたこと
誰かが使いやすい製品は、
他の誰かにも使いやすい
代替テキストは、初めて製品を触るユーザーへのヒントになる
余白が広すぎる場合、晴眼者でも見にくくなる
キーボードだけで操作できる製品は、多くのユーザーにも便利
アクセシビリティ対応は障害者向けの対応ではない!
完ペキは目指してもしょうがない
ユーザーも利用環境も多様
完ペキに対応するのはそもそも無理
基準をクリアすることがアクセシビリティ対応ではない!
アクセシビリティ対応はただのコストじゃない
開発的メリット
• 実装コストが下がるときもある
• HTMLがきれいになる
• E2Eテスト自動化が捗る
• SEO対策
ビジネス的メリット
• 導入検討時のプラス材料
• ブランドイメージアップ
コストは十分ペイできる!
アクセシビリティ
はじめませんか?

Weitere ähnliche Inhalte

Was ist angesagt?

kintonecafefukushima-vol1-20161001
kintonecafefukushima-vol1-20161001kintonecafefukushima-vol1-20161001
kintonecafefukushima-vol1-20161001kintone papers
 
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)力也 伊原
 
kintone Café 釧路 Vol.2(kintoneのキホン)
kintone Café 釧路 Vol.2(kintoneのキホン)kintone Café 釧路 Vol.2(kintoneのキホン)
kintone Café 釧路 Vol.2(kintoneのキホン)kintone papers
 
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4kintone papers
 
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAIエンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAIYuki Okada
 
【MashupAwards11】kintoneのご紹介
【MashupAwards11】kintoneのご紹介【MashupAwards11】kintoneのご紹介
【MashupAwards11】kintoneのご紹介Koji Asaga
 
kintone Café 高知 Vol.4
kintone Café 高知 Vol.4kintone Café 高知 Vol.4
kintone Café 高知 Vol.4kintone papers
 
kintoneチームのKAIZEN文化
kintoneチームのKAIZEN文化kintoneチームのKAIZEN文化
kintoneチームのKAIZEN文化Ryo Mitoma
 
エンジニアサマーインターンシップ 2016 ご紹介
エンジニアサマーインターンシップ 2016 ご紹介エンジニアサマーインターンシップ 2016 ご紹介
エンジニアサマーインターンシップ 2016 ご紹介Akitsugu Ito
 
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)Mari Takahashi
 
20100803 NetCommons in User Conference
20100803 NetCommons in User Conference20100803 NetCommons in User Conference
20100803 NetCommons in User ConferenceKenichi Ohwada
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 
2019-11-14 JAWS-UG 高知のご紹介
2019-11-14 JAWS-UG 高知のご紹介2019-11-14 JAWS-UG 高知のご紹介
2019-11-14 JAWS-UG 高知のご紹介Yukihito Kataoka
 
セキュリティ品質向上に向けたサイボウズの取り組み
セキュリティ品質向上に向けたサイボウズの取り組みセキュリティ品質向上に向けたサイボウズの取り組み
セキュリティ品質向上に向けたサイボウズの取り組みAkitsugu Ito
 
kintone knowledge summary for jait
kintone knowledge summary for jaitkintone knowledge summary for jait
kintone knowledge summary for jaitkintone papers
 

Was ist angesagt? (20)

kintonecafefukushima-vol1-20161001
kintonecafefukushima-vol1-20161001kintonecafefukushima-vol1-20161001
kintonecafefukushima-vol1-20161001
 
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
 
kintone Café 釧路 Vol.2(kintoneのキホン)
kintone Café 釧路 Vol.2(kintoneのキホン)kintone Café 釧路 Vol.2(kintoneのキホン)
kintone Café 釧路 Vol.2(kintoneのキホン)
 
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
 
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4
 
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAIエンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
 
【MashupAwards11】kintoneのご紹介
【MashupAwards11】kintoneのご紹介【MashupAwards11】kintoneのご紹介
【MashupAwards11】kintoneのご紹介
 
Cmclt 20190805
Cmclt 20190805Cmclt 20190805
Cmclt 20190805
 
こうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイントこうすればできる!ウェブアクセシビリティ試験実施のポイント
こうすればできる!ウェブアクセシビリティ試験実施のポイント
 
kintone dev demo
kintone dev demokintone dev demo
kintone dev demo
 
アクセシビリティへの取り組みの歴史
アクセシビリティへの取り組みの歴史アクセシビリティへの取り組みの歴史
アクセシビリティへの取り組みの歴史
 
kintone Café 高知 Vol.4
kintone Café 高知 Vol.4kintone Café 高知 Vol.4
kintone Café 高知 Vol.4
 
kintoneチームのKAIZEN文化
kintoneチームのKAIZEN文化kintoneチームのKAIZEN文化
kintoneチームのKAIZEN文化
 
エンジニアサマーインターンシップ 2016 ご紹介
エンジニアサマーインターンシップ 2016 ご紹介エンジニアサマーインターンシップ 2016 ご紹介
エンジニアサマーインターンシップ 2016 ご紹介
 
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
企業アプリのマーケティング活用事例(UXデザインによるアプリ企画)
 
20100803 NetCommons in User Conference
20100803 NetCommons in User Conference20100803 NetCommons in User Conference
20100803 NetCommons in User Conference
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 
2019-11-14 JAWS-UG 高知のご紹介
2019-11-14 JAWS-UG 高知のご紹介2019-11-14 JAWS-UG 高知のご紹介
2019-11-14 JAWS-UG 高知のご紹介
 
セキュリティ品質向上に向けたサイボウズの取り組み
セキュリティ品質向上に向けたサイボウズの取り組みセキュリティ品質向上に向けたサイボウズの取り組み
セキュリティ品質向上に向けたサイボウズの取り組み
 
kintone knowledge summary for jait
kintone knowledge summary for jaitkintone knowledge summary for jait
kintone knowledge summary for jait
 

Andere mochten auch

BCU30 - Webでできるマルチメディア表現
BCU30 - Webでできるマルチメディア表現BCU30 - Webでできるマルチメディア表現
BCU30 - Webでできるマルチメディア表現Leonardo Ken Orihara
 
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudyなんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudyPOStudy
 
アジャイルメトリクス実践ガイド
アジャイルメトリクス実践ガイドアジャイルメトリクス実践ガイド
アジャイルメトリクス実践ガイドHiroyuki Ito
 
[RSGT2017] つらい問題に出会ったら
[RSGT2017] つらい問題に出会ったら[RSGT2017] つらい問題に出会ったら
[RSGT2017] つらい問題に出会ったらTakahiro Kaihara
 
導入に困っているあなたに贈る スクラム導入コミュニケーション術
導入に困っているあなたに贈る スクラム導入コミュニケーション術導入に困っているあなたに贈る スクラム導入コミュニケーション術
導入に困っているあなたに贈る スクラム導入コミュニケーション術Kouki Kawagoi
 
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたエンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたYusuke Amano
 
共感する開発のことだけ考えた。
共感する開発のことだけ考えた。共感する開発のことだけ考えた。
共感する開発のことだけ考えた。shoji_yamada
 
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudyKazuhito Miura
 
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクスHiroyuki Ito
 
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なことと
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なこととアジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なことと
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なこととYasui Tsutomu
 
3 SaaS Metrics That Matter
3 SaaS Metrics That Matter3 SaaS Metrics That Matter
3 SaaS Metrics That MatterTien Tzuo
 
エンジニアが働きたい場所で働けるために、チームに必要なこと
エンジニアが働きたい場所で働けるために、チームに必要なことエンジニアが働きたい場所で働けるために、チームに必要なこと
エンジニアが働きたい場所で働けるために、チームに必要なことYuki Okada
 
自転車のVRシステムがあったら欲しいですか?
自転車のVRシステムがあったら欲しいですか?自転車のVRシステムがあったら欲しいですか?
自転車のVRシステムがあったら欲しいですか?Chikara Tomioka
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホンYou_Kinjoh
 
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]【kintone便利に使おうシリーズ】[vol.07 プロセス管理]
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]Cybozucommunity
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦Teppei Sato
 
sukiyaki project 〜高可用な自宅サーバを目指して〜
sukiyaki project 〜高可用な自宅サーバを目指して〜sukiyaki project 〜高可用な自宅サーバを目指して〜
sukiyaki project 〜高可用な自宅サーバを目指して〜sukiyaki project
 
Waterfall cafeで働くBot
Waterfall cafeで働くBotWaterfall cafeで働くBot
Waterfall cafeで働くBotKazuki Nakajima
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティNaoki Matsuda
 

Andere mochten auch (20)

BCU30 - Webでできるマルチメディア表現
BCU30 - Webでできるマルチメディア表現BCU30 - Webでできるマルチメディア表現
BCU30 - Webでできるマルチメディア表現
 
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudyなんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
 
アジャイルメトリクス実践ガイド
アジャイルメトリクス実践ガイドアジャイルメトリクス実践ガイド
アジャイルメトリクス実践ガイド
 
[RSGT2017] つらい問題に出会ったら
[RSGT2017] つらい問題に出会ったら[RSGT2017] つらい問題に出会ったら
[RSGT2017] つらい問題に出会ったら
 
導入に困っているあなたに贈る スクラム導入コミュニケーション術
導入に困っているあなたに贈る スクラム導入コミュニケーション術導入に困っているあなたに贈る スクラム導入コミュニケーション術
導入に困っているあなたに贈る スクラム導入コミュニケーション術
 
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めましたエンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
 
共感する開発のことだけ考えた。
共感する開発のことだけ考えた。共感する開発のことだけ考えた。
共感する開発のことだけ考えた。
 
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
「実録!となりのJenkins2.0」 - 第7回大阪 / 第9回(東京)Jenkins勉強会 #jenkinsstudy
 
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス
世界と事例から学ぶ、プロダクトオーナーの「素養」としてのアジャイルメトリクス
 
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なことと
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なこととアジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なことと
アジャイルコーチが現場で学んだプロダクトオーナーの実際と勘所 POの二番目に大事なことと
 
C++ マルチスレッド 入門
C++ マルチスレッド 入門C++ マルチスレッド 入門
C++ マルチスレッド 入門
 
3 SaaS Metrics That Matter
3 SaaS Metrics That Matter3 SaaS Metrics That Matter
3 SaaS Metrics That Matter
 
エンジニアが働きたい場所で働けるために、チームに必要なこと
エンジニアが働きたい場所で働けるために、チームに必要なことエンジニアが働きたい場所で働けるために、チームに必要なこと
エンジニアが働きたい場所で働けるために、チームに必要なこと
 
自転車のVRシステムがあったら欲しいですか?
自転車のVRシステムがあったら欲しいですか?自転車のVRシステムがあったら欲しいですか?
自転車のVRシステムがあったら欲しいですか?
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホン
 
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]【kintone便利に使おうシリーズ】[vol.07 プロセス管理]
【kintone便利に使おうシリーズ】[vol.07 プロセス管理]
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
 
sukiyaki project 〜高可用な自宅サーバを目指して〜
sukiyaki project 〜高可用な自宅サーバを目指して〜sukiyaki project 〜高可用な自宅サーバを目指して〜
sukiyaki project 〜高可用な自宅サーバを目指して〜
 
Waterfall cafeで働くBot
Waterfall cafeで働くBotWaterfall cafeで働くBot
Waterfall cafeで働くBot
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
 

アクセシビリティはじめました