Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

lunastera

June 06, 2023
Tweet

More Decks by lunastera

Other Decks in How-to & DIY

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