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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
250
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
310
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
PicoRuby on Rails
makicamel
2
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
710
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
430
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Docker and Python
trallard
44
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fireside Chat
paigeccino
37
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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 とりあえず読み上げられる から 読み上げられて使いやすい に
働くをもっと楽しく、創造的に