a11y対応やってくぞい

Chatwork Tech Talk #1 LT

Transcript

1. Chatwork Tech Talk #1 LT
   Chatwork株式会社
   開発本部 モバイルアプリケーション開発部 Androidエンジニア
   池田 道弘
   a11y対応やってくぞい
   

   View Slide

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

   View Slide

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

   View Slide

4. a11yってなに？
   4
   accessibility
   11文字
   a11y
   ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。
   ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを
   意味します。
   さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うよ
   うになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは
   必要不可欠な品質と言えます。
   引用元: アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC）
   https://waic.jp/knowledge/accessibility/
   ウェブアクセシビリティとは
   

   View Slide

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

   View Slide

6. TalkBackデモ
   6
   

   View Slide

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

   View Slide

8. 02
   対応チーム発足
   

   View Slide

9. a11y対応やってくぞい(仮称)チーム発足
   9
   　 Accessibility Friday! 開催 2020年1月末
   Chatworkをもっと便利に使ってもらうために読み上げ機能を使ってみて
   「使いづらいところがないかどうか、まず自分たちで知ろう！」
   という社内活動
   ● 以前、フロントエンドの勉強会でa11y対応についてのセッションを
   聞いたことがあり、a11y対応について興味があった
   ● メッセージが読めないのは、どうにかしないといけないと思った
   a11y対応やってくぞい(仮称)チーム
   ジョイン！
   チーム発足！
   

   View Slide

10. a11y対応やってくぞい！
    10
    ユーザーはまさに今困っている
    　→「こうしたほうが使いやすい」は後で考える
    対応方針
    ● ヤバいところから対応する
    ● 完璧は目指さない
    ● まずは必要な情報にアクセスできるように
    理由
    ● 社内にTalkBackユーザーがいないので、正解が分からない
    ● a11y的に"正しい"対応をしようとすると、調査に時間が掛かる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 03
    今後は…
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide