Slide 1
Slide 1 text
ブックマークチームで
アクセシビリティ改善を広める際に
直面した問題と
如何にして立て直したか
id:lunastera / @lunastera
2023/06/06 Hatena Engineer Seminar #25
1
Slide 2
Slide 2 text
話の流れ
● アクセシビリティとの出会い
● チームでのa11y活
● 広めていた際に直面した問題
● どう解決・変化したか
● まとめ
2
Slide 3
Slide 3 text
3
アクセシビリティ
との出会い
Slide 4
Slide 4 text
最近までアクセシビリティという概念を意識していなかった
4
「キーボード操作とかのあれ？」
Slide 5
Slide 5 text
フロントエンド会という場で指摘をもらった
どうやらWAI-ARIAというものがあるらしい…
5
Slide 6
Slide 6 text
6
チームでのa11y活
Slide 7
Slide 7 text
可能な限り適切なDOM構造になるようにする
(No ARIA is better than Bad ARIA)
7
Slide 8
Slide 8 text
インターン生向けにアクセシビリティ資料を作る
後にチームにも展開
8
Slide 9
Slide 9 text
9
広めていた際に
直面した問題
Slide 10
Slide 10 text
とにかくレビューでの指摘が増え、作業が滞る
10
Slide 11
Slide 11 text
説明不足でチームメンバーに負荷がかかっていた
11
「どこまで対応すべきなのかがわからない」
「全てを完璧にするのは無理筋ではないか」
Slide 12
Slide 12 text
12
どう解決・変化したか
Slide 13
Slide 13 text
TLとして定めた「最低限ライン」
● 「キーボード操作はできるようにしたい」
○ タブによる移動など
● 「可能な限り適切なDOMを使う」
○ ボタンっぽい要素ならbuttonタグを
○ 一般的なクリック遷移はaタグを
○ 挙動の都合上、どうしてもだめなら自分がaria-*など
でなんとかする
13
Slide 14
Slide 14 text
「キーボード操作はできるようにしたい」
14
Slide 15
Slide 15 text
「可能な限り適切なDOMを使う」
15
Slide 16
Slide 16 text
自分が率先して対応する
● DOMの変更、キーボード対応、aria-*の付与…
● 背中を見せて、向こうから興味を持ってもらう
● 意外と簡単にできるんだなーということを
知ってもらう
16
Slide 17
Slide 17 text
自分から率先してやってくれる人も出てきた
17
Slide 18
Slide 18 text
18
ブックマークチームで
アクセシビリティ改善を広める際に
直面した問題と
如何にして立て直したか
Slide 19
Slide 19 text
まとめ
● 「対応しないと使えない人がいる」という
意識はとても大事
● しかし開発コストは無限ではない
● まずは簡単なものから実践してもらう
● 詳しいことはわかる人間が少しずつやって
興味を持ってもらう
19