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
1.9k
a11y対応やってくぞい
Chatwork Tech Talk #1 LT
Michihiro Ikeda
October 21, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
TypeScript x GraphQLで2年開発してみて
yutank34
8
4.7k
PHP で読む楽しいコアダンプ
sji
0
220
オープンなデータ・ソフトウェアを活用した開発
404background
0
160
Microsoft Fabricを7ヶ月使ってわかったこと
shun_oshidari
2
450
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
220
Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
850
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
400
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
960
Running Laravel Apps With FrankenPHP
dunglas
4
1.2k
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
250
Featured
See All Featured
Docker and Python
trallard
33
2.6k
Bash Introduction
62gerente
604
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Embracing the Ebb and Flow
colly
78
4.1k
In The Pink: A Labor of Love
frogandcode
137
21k
Unsuck your backbone
ammeep
660
56k
Raft: Consensus for Rubyists
vanstee
130
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Documentation Writing (for coders)
carmenintech
59
3.7k
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 とりあえず読み上げられる から 読み上げられて使いやすい に
働くをもっと楽しく、創造的に