ブックマークチームでアクセシビリティを広める際に直面した問題と、如何にして立て直していったか

Google Slide: https://docs.google.com/presentation/d/1E4bTB6v56ean2NkURTocDPkFmpeqHpH49Jz0jrQcQtg/edit?usp=sharing

サービスに於いてアクセシビリティという概念は非常に重要です。しかしながら開発チームメンバー全員にアクセシビリティ対応の知識をつけてもらうのは非常にコストが高く、一歩間違えると対応作業に対する忌避感を招いてしまう可能性があります。今回は実際にチーム内に広める際に失敗したこと、その失敗からどう方針を変えて改善していったかについて話します。

Transcript

1. ブックマークチームで
   アクセシビリティ改善を広める際に
   直面した問題と
   如何にして立て直したか
   id:lunastera / @lunastera
   2023/06/06 Hatena Engineer Seminar #25
   1
   

   View Slide

2. 話の流れ
   ● アクセシビリティとの出会い
   ● チームでのa11y活
   ● 広めていた際に直面した問題
   ● どう解決・変化したか
   ● まとめ
   2
   

   View Slide

3. 3
   アクセシビリティ
   との出会い
   

   View Slide

4. 最近までアクセシビリティという概念を意識していなかった
   4
   「キーボード操作とかのあれ？」
   

   View Slide

5. フロントエンド会という場で指摘をもらった
   どうやらWAI-ARIAというものがあるらしい…
   5
   

   View Slide

6. 6
   チームでのa11y活
   

   View Slide

7. 可能な限り適切なDOM構造になるようにする
   (No ARIA is better than Bad ARIA)
   7
   

   View Slide

8. インターン生向けにアクセシビリティ資料を作る
   後にチームにも展開
   8
   

   View Slide

9. 9
   広めていた際に
   直面した問題
   

   View Slide

10. とにかくレビューでの指摘が増え、作業が滞る
    10
    

    View Slide

11. 説明不足でチームメンバーに負荷がかかっていた
    11
    「どこまで対応すべきなのかがわからない」
    「全てを完璧にするのは無理筋ではないか」
    

    View Slide

12. 12
    どう解決・変化したか
    

    View Slide

13. TLとして定めた「最低限ライン」
    ● 「キーボード操作はできるようにしたい」
    ○ タブによる移動など
    ● 「可能な限り適切なDOMを使う」
    ○ ボタンっぽい要素ならbuttonタグを
    ○ 一般的なクリック遷移はaタグを
    ○ 挙動の都合上、どうしてもだめなら自分がaria-*など
    でなんとかする
    13
    

    View Slide

14. 「キーボード操作はできるようにしたい」
    14
    

    View Slide

15. 「可能な限り適切なDOMを使う」
    15
    

    View Slide

16. 自分が率先して対応する
    ● DOMの変更、キーボード対応、aria-*の付与…
    ● 背中を見せて、向こうから興味を持ってもらう
    ● 意外と簡単にできるんだなーということを
    知ってもらう
    16
    

    View Slide

17. 自分から率先してやってくれる人も出てきた
    17
    

    View Slide

18. 18
    ブックマークチームで
    アクセシビリティ改善を広める際に
    直面した問題と
    如何にして立て直したか
    

    View Slide

19. まとめ
    ● 「対応しないと使えない人がいる」という
    意識はとても大事
    ● しかし開発コストは無限ではない
    ● まずは簡単なものから実践してもらう
    ● 詳しいことはわかる人間が少しずつやって
    興味を持ってもらう
    19
    

    View Slide