Chatwork Creator's Note

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

読者になる

Androidアプリのアクセシビリティ対応やってくぞい!

こんにちは!モバイルアプリケーション開発部のAndroidエンジニア、いけちょ(@ikeda_shogouki)こと池田です。

さて、チームリーダーの守谷が先日投稿している通り、仮称「アクセシビリティやってくぞい!」チームが発足しました。

creators-note.chatwork.com

私はAndroidエンジニアとして、やってくぞい!(仮)チームにジョインしています。

守谷の投稿では、やってくぞい!(仮)チームの発足について紹介されていますので、今回は実際どのようにアクセシビリティ改善を進めているかをご紹介したいと思います。

アクセシビリティ改善チームに参加した理由

以前、どこかの勉強会でWebフロントのアクセシビリティ対応についてのセッションを聞いたことがあり、スクリーンリーダーの存在や、スクリーンリーダーを使ってWebページを"見て"いる方々が居るのを知り、「なるほど、そういう世界もあるのかー」と思ったのが、アクセシビリティとの出会いでした。

Accessibility Fridayで現状を知るに参加し、Chatworkアプリの現状を見たとき、コミュニケーションツールとして最も大切なメッセージが読み上げられないのを目の当たりにしました。

  • メッセージ本文

メッセージ

  • 読み上げ内容

cw-text-view-bodyと読み上げれられる

肝心かなめのメッセージがすべて「cw-text-view-body」と読み上げられてしまう致命的な状態で、「これはヤバい」と思い、やってくぞい!(仮)チームに参加し、改善していきたいと思いました。

どうやって改善を進めているか

対応方針

↑の状況を見ていただくと分かるように、一刻も早くアクセシビリティ対応が必要な状態です。

そのため、以下の方針で進めています。

  • ヤバいところから対応する
    • "何が書いてあるか分からない", "何のボタンか分からない" はヤバい
  • 完璧は目指さない
    • モバイルアプリの正しいアクセシビリティ対応を勉強・調査している余裕はない
  • まずは必要な情報にアクセスできるように
    • 正しい読み上げ、より分かりやすい読み上げは後で考える

1. 提案書作成

まず、アクセシビリティ対応が必要なところを提案書としてまとめます。

弊社には、QPRD*1という独自の簡易要件ベース開発フローがあるため、これに倣って進めます。詳しくはこちら

内容としては、

  • 対応前後で、なにがどう変わるか
  • 致命度指数
  • 既存のUI等に影響が出ないか

等を記載します。

提案書例1

提案書例2

2. チーム内レビュー

提案書が出来たら、まずはやってくぞい!(仮)チーム内で、提案書のレビューをします。

チーム内レビュー

3. プロダクトマネージャーの承認を得る

チーム内で合意が取れたら、モバイルアプリのプロダクトマネージャーに対応を進めて良いか確認します。

プロダクトマネージャーに確認する

4. 実装

実装は、通常のプロジェクトの開発に混ぜて進めていきます。

アクセシビリティ対応に対する反応

正直、メッセージが読めないアプリをTalkBackで使ってくれているユーザーが本当にいるんだろうか…と不安になりながら"メッセージを読み上げる"チケットの対応を行い、リリースの準備を行っていたところ、ちょうど読み上げに関するご要望が届きました!

お客様からのご要望(一部抜粋)

Androidの読み上げ機能「TalkBack」を有効にしている状態で

チャット内のメッセージが表示された場所をタップすると、

メッセージの送信者の名前の後に「cw-text-view-body」と読み上げられます。

内容が読めるように改善していただけると非常に嬉しいです。

ちょうど準備中の次バージョンで公開される対応だったので、今すぐ公開ボタンを押したい気持ちを抑えつつ、スケジュール通り公開しました。

公開後、ご要望をいただいたと思われるお客様からの反応を発見しました。(一部抜粋)

「cw-text-view-body」とか読まなくなってチャット確認がしやすくなった。

これは嬉しい!

私も嬉しい!

そして、メッセージの読み上げを対応したことにより、続々と新しい要望が…

タスクや画像が送られてきた際に、チャット画面を読み上げさせると「info-parent」と読むだけで内容がわかりません。
改善お願いいたします。

頑張ります!

現在の対応状況

現在までに以下の部分のアクセシビリティ改善を行いました。

  1. メッセージと絵文字
    メッセージと絵文字の対応

  2. ルームの未読数
    ルームの未読数の対応

  3. 引用
    引用の対応

  4. リアクション
    リアクションの対応

  5. メッセージ入力欄のボタン
    ツールバーのボタンの対応

今後について

まだまだ、読み上げ出来ないところはたくさんあります。メッセージの本文は読み上げ出来るようになりましたが、メッセージ内のタスクなどは読み上げられず、ヤバい状態です。

1人でも使えない人がいると認識齟齬が発生してしまうため、コミュニケーションツールとして対応する必要があると考えています。 引き続き、全員に同じように受け取ってもらえるように対応を進めていきたいと思います。

アクセシビリティ改善、頑張るぞい!

*1:QPRD:Quick Product Requirements Documentのことで、PRDの要素を抽出した簡易版の要件定義テンプレート