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 とりあえず読み上げられる から 読み上げられて使いやすい に

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