SlideShare a Scribd company logo
あなたの言葉で伝えるWebアクセシビリティ
小林 大輔 @sukoyakarizumu
サイボウズ株式会社
小林大輔
▌サイボウズ株式会社 開発本部 東京第2開発部 プログラマー
▌Webアクセシビリティの啓蒙、機能開発など
自己紹介
▌お伝えする内容
Webアクセシビリティの重要性を、社内の人たちに理解してもらうため、
わたしが取り組んできたこと
▌対象とする方
Webアクセシビリティに関わるすべての方
誰に何を伝えたい?
Webアクセシビリティとはなにか
ターゲットは障がい者・高齢者?
色だけに依存した表現
一般色覚 P型色覚 T型色覚
印刷
Kindle
Voice Over
KindleのVoiceOverでながら聞き
引用元: http://umenon.com/2013/11/17/ios7-kindle-voiceover/
▌日光があたりまぶしい
▌運転中で画面に注目できない
▌周りがうるさくて音声入力できない
▌料理中で手が汚れている
利用環境の多様化
http://www.ict4everyone.jp/read/171.html
人×デバイス×コンテキスト
Webアクセシビリティは
障がい者・高齢者を含めて
「すべての人」がWebにアクセスできること
Webの理念
The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.
Webの力はその普遍性にある。
障害の有無にかかわらず、誰もがアクセスできることが
本質的な側面なのだ。
顧客
開発者 営業
顧客
開発者 営業
他に優先すべきタスクがある
今のプロダクトにとって重要?
Webの理念を伝えても、相手の行動が変わらないのはなぜ?
わたしが考え、行動したこと
チームの
理想へ
翻訳する
理想を
広める
チャンスを
たいせつに
❶ ❷ ❸
1. チームの理想へ翻訳する
「理想」と「チーム」
▌「理想」とは、望んでいる状態
▌「チーム」とは、共通の「理想」を実現するために集まった集団
▌「チーム」は理想の実現のために行動する
理想の実現に寄与しない行動はしない
理想
チーム
あなたが相手にしているものは「チーム」
チームの理想に即していなければ、チームは動かない
理想への翻訳が必要
Webの
理念
チームの
理想
サイボウズにあてはめて考えたこと
サイボウズのイメージ?
▌スケジュール管理
▌会議室予約
▌ワークフロー
▌業務メッセージ
▌メール管理
▌ファイル管理
サイボウズの理想
チームワークあふれる社会を創る
▌世界にはさまざまなチームがある
会社、学校、地域、家庭、ボランティア、公共団体etc...
▌それぞれのチームワークが向上し、
よりよい社会が実現されることがサイボウズの理想
▌そのためには、チームの情報共有やコミュニケーションが必要不可欠
チームワークあふれる社会を創る
サイボウズにとって
アクセシビリティとはなんだろう?
Accessibility = Access + Ability
ユーザは、わたしたちの製品にアクセスすることで
何にアクセスしようとしているのか?
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは
「ユーザがチームにアクセスできる能力」
サイボウズは、「チームにアクセスしたい」という
ユーザの願いにどう向き合うか?
サイボウズは、ユーザの願いにどう向き合うか
▌サイボウズは、「チームに参加したい」という願いを叶える立場ではない
▌「チームに参加したい」という願いを叶えられるのは「チーム」
▌サイボウズは、誰かの役に立ちたい、という願いに価値があると信じ
製品をアクセシブルにして、願いをチームに伝える道をつくることはできる
▌つまり「チームに参加したい」という願いを尊重することができる
アクセシビリティを確保することは
「チームに参加したい」というユーザのねがいを
尊重すること
2. 理想を広める
技術バー(チーム横断LT大会)
http://blog.cybozu.io/entry/8305
グループウェアでの啓蒙
書いてみた記事の例
▌VoiceOverの使い方
▌スイッチコントロールの使い方
▌WAI-ARIAの実装方法
▌他社製品のアクセシビリティの対応状況
まずは興味を持ってもらうことから。
「こんな世界があるのだな」と知ってもらえればよい
Webアクセシビリティ勉強会
▌参加メンバー約20人
• プログラマー
• デザイナー
• プロダクトマネージャー
• ドキュメントライター
▌ 輪講形式で章ごとに発表
参加者の声(第4章担当者)
参加者の声(第8章担当者)
グループウェアでの勉強会まとめ
▌ドキュメントチームからの参加者が、有志がまとめている
▌勉強会に参加していない人向けに内容を共有する目的
前回、小林さんのお話をおききして、とても感銘を受けたこと。
何のためのアクセシビリティか。
ユーザーはサイボウズ製品にアクセスすることで、何にアクセスしようとしているのか。
チームにアクセスしたいから、サイボウズ製品にアクセスするのではないか。
一番うれしかったコメント
理想を広める
▌すでにある情報共有の場を活かす
▌場がなければ、自分でつくる
3. チャンスをたいせつに
デザインのリニューアルのタイミング
アクセシビリティ基準に基づいたコントラストの設定
3.33 : 1 10.98:1
開発合宿
▌プログラマー自身が
自由に機能追加を行う合宿
▌プロトタイプとして作った機能が
実際に製品に導入されることもある
フォームのキーボード操作対応
チームの
理想へ
翻訳する
理想を
広める
チャンスを
たいせつに
❶ ❷ ❸
おさらい
チームの理想に翻訳できるのは誰?
それは「あなた」
あなたは、Webの理念とチームの理想、
両方を知っているから
「あなたの言葉」で理想を考え、広め、行動しよう
ありがとうございました
あなたの言葉で伝えるWebアクセシビリティ

More Related Content

PDF
Webアクセシビリティポリシーのつくりかた・ひろめかた
Kobayashi Daisuke
 
PPTX
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
 
PDF
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
Kobayashi Daisuke
 
PDF
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
Kobayashi Daisuke
 
PPTX
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
Kobayashi Daisuke
 
PDF
kintoneとカラーユニバーサルデザイン
Kobayashi Daisuke
 
PPTX
すべての人にチームワークを サイボウズのアクセシビリティ
Kobayashi Daisuke
 
PPTX
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
 
Webアクセシビリティポリシーのつくりかた・ひろめかた
Kobayashi Daisuke
 
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
 
チームで取り組む!サイボウズのアクセシビリティ 開発プロセスにアクセシビリティをインクルードする | GAAD Japan 2021
Kobayashi Daisuke
 
アクセシビリティの祭典2021:みんなで創ろうアクセシブルなグループウェア インクルーシブな製品開発
Kobayashi Daisuke
 
サイボウズはアクセシビリティになぜ取り組む?どう取り組む?
Kobayashi Daisuke
 
kintoneとカラーユニバーサルデザイン
Kobayashi Daisuke
 
すべての人にチームワークを サイボウズのアクセシビリティ
Kobayashi Daisuke
 
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
 

What's hot (20)

PPTX
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
Yuki Okada
 
PDF
遅いクエリと向き合う仕組み #CybozuMeetup
S Akai
 
PPTX
エンジニアが働きたい場所で働けるために、チームに必要なこと
Yuki Okada
 
PDF
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
 
PPTX
kintoneチームのKAIZEN文化
Ryo Mitoma
 
PDF
アクセシビリティはじめました
Yuichi Sugiyama
 
PDF
Webアクセシビリティの現状ダイジェスト 2014
Mitsue-Links Co.,Ltd. Accessibility Department
 
PPTX
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
 
PDF
kintoneエンジニアが紹介する品質向上のための取り組み
Yasuharu Sakai
 
PDF
アジャイル時代の翻訳プロセス
Naohiro Nakata
 
PDF
ヘルプサイトの制作プロセス
Naohiro Nakata
 
PDF
サイボウズのサービスを支えるログ基盤
Shin'ya Ueoka
 
PPTX
WikiWikiアジャイル
Fumio Kawakami
 
PPTX
アジャイルパラレル開発
Fumio Kawakami
 
PDF
缶詰屋さんの課題解決にスクラムを使ってみた
Toshiyuki Ohtomo
 
PPTX
ペインストーミングで言葉の壁を越える
shoji_yamada
 
PPTX
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
Yuki Okada
 
PPTX
せっかくエンジニアやってるのになんで副業やらないんですか? - エンジニア副業Night #1
Yuki Okada
 
PDF
WorcCamp Kansai 2015 LT大会
Koji Asaga
 
PPTX
javascriptの基礎
Masayuki Abe
 
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
Yuki Okada
 
遅いクエリと向き合う仕組み #CybozuMeetup
S Akai
 
エンジニアが働きたい場所で働けるために、チームに必要なこと
Yuki Okada
 
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
 
kintoneチームのKAIZEN文化
Ryo Mitoma
 
アクセシビリティはじめました
Yuichi Sugiyama
 
Webアクセシビリティの現状ダイジェスト 2014
Mitsue-Links Co.,Ltd. Accessibility Department
 
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
 
kintoneエンジニアが紹介する品質向上のための取り組み
Yasuharu Sakai
 
アジャイル時代の翻訳プロセス
Naohiro Nakata
 
ヘルプサイトの制作プロセス
Naohiro Nakata
 
サイボウズのサービスを支えるログ基盤
Shin'ya Ueoka
 
WikiWikiアジャイル
Fumio Kawakami
 
アジャイルパラレル開発
Fumio Kawakami
 
缶詰屋さんの課題解決にスクラムを使ってみた
Toshiyuki Ohtomo
 
ペインストーミングで言葉の壁を越える
shoji_yamada
 
エンジニア組織づくり5年。見えてきた関西Web界隈のええとこ、あかんとこ - Developers Summit 2019 KANSAI
Yuki Okada
 
せっかくエンジニアやってるのになんで副業やらないんですか? - エンジニア副業Night #1
Yuki Okada
 
WorcCamp Kansai 2015 LT大会
Koji Asaga
 
javascriptの基礎
Masayuki Abe
 
Ad

Similar to あなたの言葉で伝えるWebアクセシビリティ (20)

PDF
キッチンにはスマートフォンとカレーライス
トモロヲ いちがみ
 
PDF
身近な人にちょっと教えたくなる!障害者の生活や仕事に役立つデジタルの工夫
Shogo Shirai
 
KEY
LexuesAcademy-全体まとめ
Shin Sekaryo
 
PDF
HTML5時代のWebデザイン
masaaki komori
 
PDF
超えていけ言語と文化と時差の壁 ~外資系プリセールスエンジニアのサバイバル術~ 
Satoru Yamaguchi
 
PDF
20171104 jaws festa_パネル進行_公開
Hideki Ojima
 
PDF
Gmo media.inc dev ops of own way
Dai Utsui
 
PDF
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
Yusuke Goto
 
PDF
すべての人にチームワークを kintoneとアクセシビリティ
Kobayashi Daisuke
 
PDF
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
 
PDF
ネットにおける多言語コミュニケーションの新展開
SKword Co.,Ltd.
 
PDF
Schoo講演資料130409
schoowebcampus
 
PDF
Schoo講演資料130409
Ryosuke Matsumoto
 
PDF
「はまぞう」は四方よし
株式会社はまぞう
 
PPTX
理念指向プログラミングのすゝめ
Hideki Okajima
 
PDF
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
 
PDF
デジタルハリウッド大学藤本ゼミプレゼンテーション(20071115)
Yosuke Yoshizaki
 
PDF
Dx private conf_20190628_004
Kei Nakahara
 
PDF
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
 
PDF
一般企業におけるWebアクセシビリティの進め方
Web Accessibility Infrastructure Committee (WAIC)
 
キッチンにはスマートフォンとカレーライス
トモロヲ いちがみ
 
身近な人にちょっと教えたくなる!障害者の生活や仕事に役立つデジタルの工夫
Shogo Shirai
 
LexuesAcademy-全体まとめ
Shin Sekaryo
 
HTML5時代のWebデザイン
masaaki komori
 
超えていけ言語と文化と時差の壁 ~外資系プリセールスエンジニアのサバイバル術~ 
Satoru Yamaguchi
 
20171104 jaws festa_パネル進行_公開
Hideki Ojima
 
Gmo media.inc dev ops of own way
Dai Utsui
 
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
Yusuke Goto
 
すべての人にチームワークを kintoneとアクセシビリティ
Kobayashi Daisuke
 
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
 
ネットにおける多言語コミュニケーションの新展開
SKword Co.,Ltd.
 
Schoo講演資料130409
schoowebcampus
 
Schoo講演資料130409
Ryosuke Matsumoto
 
「はまぞう」は四方よし
株式会社はまぞう
 
理念指向プログラミングのすゝめ
Hideki Okajima
 
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
 
デジタルハリウッド大学藤本ゼミプレゼンテーション(20071115)
Yosuke Yoshizaki
 
Dx private conf_20190628_004
Kei Nakahara
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
 
一般企業におけるWebアクセシビリティの進め方
Web Accessibility Infrastructure Committee (WAIC)
 
Ad

あなたの言葉で伝えるWebアクセシビリティ