a11y対応やってくぞい

Bb49e68eb46070029845fb3022d9026f?s=47 Michihiro Ikeda
October 21, 2020
Programming
1
920

 a11y対応やってくぞい

Chatwork Tech Talk #1 LT

Bb49e68eb46070029845fb3022d9026f?s=128

Michihiro Ikeda

October 21, 2020
Tweet

Other Decks in Programming

See All in Programming
Dee939e8aa52d13793b2f0c5e463777b?s=48 julep
1
150
62340514ee3033d54d79c9e7a3db68d5?s=48 kazutomo
0
820
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
0
130
636420dfa4bd120435447924327530f0?s=48 nichimu
0
840
6170c1d1970baf2a36a9ae2955e47ff3?s=48 jimhester
0
250
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
1
480
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
130
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
2
410
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130
8cc27471bcdeb2858fca212586a208b4?s=48 takahia1988
0
330
53850955f15249a1a9dc49df6113e400?s=48 line_developers
5
1.5k
2f38ad91642226a08c0e1b926ba17f7c?s=48 furuhama
1
120

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.3k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
13
1.7k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.5k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
125
20k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
9
1.1k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
306
17k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k

Transcript

  1. Chatwork Tech Talk #1 LT Chatwork株式会社 開発本部 モバイルアプリケーション開発部 Androidエンジニア 池田

    道弘 a11y対応やってくぞい

  2. 自己紹介 2 池田 道弘 2019年9月入社 以降、広島でフルリモートワーク Chatwork 株式会社 開発本部 モバイルアプリケーション開発部

    Androidエンジニア

  3. 01 アクセシビリティとは a11y ?

  4. a11yってなに？ 4 accessibility 11文字 a11y ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。 ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを 意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うよ うになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは

    必要不可欠な品質と言えます。 引用元: アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC） https://waic.jp/knowledge/accessibility/ ウェブアクセシビリティとは

  5. a11y対応が必要なシーン 5 • 見ることができない ◦ スクリーンリーダーなどを用いて画面に 表示されている文字を読み上げる • 見えづらい ◦

    表示を拡大して読みやすくする • 手を動かしづらい ◦ スイッチなどのデバイスを使って操作する • 暗いところで画面が眩しい ◦ ダークモード • 電車の中で音が出せない ◦ 動画の字幕 ユーザー補助機能 アクセシビリティが 必要なシーンは 誰にでも発生しうる

  6. TalkBackデモ 6

  7. a11y対応開始前のChatworkアプリ 7 ＿人人人人人人人人人人人人人人人人＿ ＞　メッセージが読み上げられない　＜ ￣Y^Y^Y^Y^Y^Y^^Y^Y^Y^Y^Y^Y^Y￣ メッセージ 読み上げ内容 あるメッセージを TalkBack で読み上げようとしたとき

  8. 02 対応チーム発足

  9. a11y対応やってくぞい(仮称)チーム発足 9 　 Accessibility Friday! 開催 2020年1月末 Chatworkをもっと便利に使ってもらうために読み上げ機能を使ってみて 「使いづらいところがないかどうか、まず自分たちで知ろう！」 という社内活動

    • 以前、フロントエンドの勉強会でa11y対応についてのセッションを 聞いたことがあり、a11y対応について興味があった • メッセージが読めないのは、どうにかしないといけないと思った a11y対応やってくぞい(仮称)チーム ジョイン！ チーム発足！

  10. a11y対応やってくぞい！ 10 ユーザーはまさに今困っている 　→「こうしたほうが使いやすい」は後で考える 対応方針 • ヤバいところから対応する • 完璧は目指さない •

    まずは必要な情報にアクセスできるように 理由 • 社内にTalkBackユーザーがいないので、正解が分からない • a11y的に"正しい"対応をしようとすると、調査に時間が掛かる

  11. a11y対応の流れ 11 1.提案書作成 QPRD (Quick Product Requirement Document) ユーザー課題の改善案を、エンジニアから 提案できるChatwork社内の仕組み

  12. a11y対応の流れ 12 2.チーム内レビュー

  13. a11y対応の流れ 13 3.プロダクトマネージャーに確認 4.実装

  14. a11y対応に対するユーザーの反応 14 要望 (一部抜粋) Androidの読み上げ機能「TalkBack」を有効にしている状態で チャット内のメッセージが表示された場所をタップすると、 メッセージの送信者の名前の後に「cw-text-view-body」と読み上げられます。 内容が読めるように改善していただけると非常に嬉しいです。 反応 (一部抜粋)

    この前送った要望が通ってた。 「cw-text-view-body」とか読まなくなってチャット確認がしやすくなった。 これは嬉しい！ 私も嬉しい！やってよかった！

  15. a11y対応の状況 15 メッセージと絵文字 リアクション 引用 ルームの未読数 対応してリリースしたもの

  16. 03 今後は…

  17. 読み上げられないところをどんどん改善していく 17 絵文字入力分からない タスク分からない ボタン分からない • 1人でも使えない人がいると認識齟齬が発生してしまう • コミュニケーションツールとして対応の必要あり •

    全員に同じように受け取ってもらえるように対応を進めていく

  18. より良い実装を追求する 18 とりあえず読み上げられる から 読み上げられて使いやすい に

  19. 働くをもっと楽しく、創造的に