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

Transcript

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

   Seminar #25 1

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

   まとめ 2

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

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

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

6. 6 チームでのa11y活

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

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

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

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

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

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

13. TLとして定めた「最低限ライン」 • 「キーボード操作はできるようにしたい」 ◦ タブによる移動など • 「可能な限り適切なDOMを使う」 ◦ ボタンっぽい要素ならbuttonタグを ◦

    一般的なクリック遷移はaタグを ◦ 挙動の都合上、どうしてもだめなら自分がaria-*など でなんとかする 13

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

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

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

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

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

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

    興味を持ってもらう 19