$30 off During Our Annual Pro Sale. View Details »

a11y対応やってくぞい

 a11y対応やってくぞい

Chatwork Tech Talk #1 LT

Michihiro Ikeda

October 21, 2020
Tweet

Other Decks in Programming

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