Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
a11y対応やってくぞい
Search
Michihiro Ikeda
October 21, 2020
Programming
1
2.2k
a11y対応やってくぞい
Chatwork Tech Talk #1 LT
Michihiro Ikeda
October 21, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
0
310
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
ニーリーにおけるプロダクトエンジニア
nealle
0
860
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Discover Metal 4
rei315
2
140
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
YesSQL, Process and Tooling at Scale
rocio
173
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Scaling GitHub
holman
460
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
207
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
314
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
Site-Speed That Sticks
csswizardry
10
690
The Language of Interfaces
destraynor
158
25k
Transcript
Chatwork Tech Talk #1 LT Chatwork株式会社 開発本部 モバイルアプリケーション開発部 Androidエンジニア 池田
道弘 a11y対応やってくぞい
自己紹介 2 池田 道弘 2019年9月入社 以降、広島でフルリモートワーク Chatwork 株式会社 開発本部 モバイルアプリケーション開発部
Androidエンジニア
01 アクセシビリティとは a11y ?
a11yってなに? 4 accessibility 11文字 a11y ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。 ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを 意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うよ うになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは
必要不可欠な品質と言えます。 引用元: アクセシビリティとは | ウェブアクセシビリティ基盤委員会(WAIC) https://waic.jp/knowledge/accessibility/ ウェブアクセシビリティとは
a11y対応が必要なシーン 5 • 見ることができない ◦ スクリーンリーダーなどを用いて画面に 表示されている文字を読み上げる • 見えづらい ◦
表示を拡大して読みやすくする • 手を動かしづらい ◦ スイッチなどのデバイスを使って操作する • 暗いところで画面が眩しい ◦ ダークモード • 電車の中で音が出せない ◦ 動画の字幕 ユーザー補助機能 アクセシビリティが 必要なシーンは 誰にでも発生しうる
TalkBackデモ 6
a11y対応開始前のChatworkアプリ 7 _人人人人人人人人人人人人人人人人_ > メッセージが読み上げられない <  ̄Y^Y^Y^Y^Y^Y^^Y^Y^Y^Y^Y^Y^Y ̄ メッセージ 読み上げ内容 あるメッセージを TalkBack で読み上げようとしたとき
02 対応チーム発足
a11y対応やってくぞい(仮称)チーム発足 9 Accessibility Friday! 開催 2020年1月末 Chatworkをもっと便利に使ってもらうために読み上げ機能を使ってみて 「使いづらいところがないかどうか、まず自分たちで知ろう!」 という社内活動
• 以前、フロントエンドの勉強会でa11y対応についてのセッションを 聞いたことがあり、a11y対応について興味があった • メッセージが読めないのは、どうにかしないといけないと思った a11y対応やってくぞい(仮称)チーム ジョイン! チーム発足!
a11y対応やってくぞい! 10 ユーザーはまさに今困っている →「こうしたほうが使いやすい」は後で考える 対応方針 • ヤバいところから対応する • 完璧は目指さない •
まずは必要な情報にアクセスできるように 理由 • 社内にTalkBackユーザーがいないので、正解が分からない • a11y的に"正しい"対応をしようとすると、調査に時間が掛かる
a11y対応の流れ 11 1.提案書作成 QPRD (Quick Product Requirement Document) ユーザー課題の改善案を、エンジニアから 提案できるChatwork社内の仕組み
a11y対応の流れ 12 2.チーム内レビュー
a11y対応の流れ 13 3.プロダクトマネージャーに確認 4.実装
a11y対応に対するユーザーの反応 14 要望 (一部抜粋) Androidの読み上げ機能「TalkBack」を有効にしている状態で チャット内のメッセージが表示された場所をタップすると、 メッセージの送信者の名前の後に「cw-text-view-body」と読み上げられます。 内容が読めるように改善していただけると非常に嬉しいです。 反応 (一部抜粋)
この前送った要望が通ってた。 「cw-text-view-body」とか読まなくなってチャット確認がしやすくなった。 これは嬉しい! 私も嬉しい!やってよかった!
a11y対応の状況 15 メッセージと絵文字 リアクション 引用 ルームの未読数 対応してリリースしたもの
03 今後は…
読み上げられないところをどんどん改善していく 17 絵文字入力分からない タスク分からない ボタン分からない • 1人でも使えない人がいると認識齟齬が発生してしまう • コミュニケーションツールとして対応の必要あり •
全員に同じように受け取ってもらえるように対応を進めていく
より良い実装を追求する 18 とりあえず読み上げられる から 読み上げられて使いやすい に
働くをもっと楽しく、創造的に