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

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
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