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
2k
a11y対応やってくぞい
Chatwork Tech Talk #1 LT
Michihiro Ikeda
October 21, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
Jetpack for KMP
fornewid
1
290
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
CSC307 Lecture 05
javiergs
PRO
0
210
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
유연한 Composable 설계
l2hyunwoo
0
380
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Happy Clients
brianwarren
94
6.5k
Web Components: a chance to create the future
zenorocha
307
41k
Being A Developer After 40
akosma
72
580k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Making Projects Easy
brettharned
111
5.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Embracing the Ebb and Flow
colly
81
4.3k
Side Projects
sachag
451
42k
How to train your dragon (web standard)
notwaldorf
79
5.5k
How to Ace a Technical Interview
jacobian
274
23k
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 とりあえず読み上げられる から 読み上げられて使いやすい に
働くをもっと楽しく、創造的に