Mackerel のアクセシビリティ改善事例

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

Transcript

1. Mackerel のアクセシビリ ティ改善事例 id:azukiazusa 2023/06/06 Hatena Engineer Seminer #25 アクセシビリティ編
2. 自己紹介 • azukiazusa ◦ Mackerel チーム Web アプリケーションエンジニア ◦ フロントエンド周りをよく見ている • 技術記事をよく書いています
3. 発表内容 • Mackerel の開発チームにおいてアクセシビリ ティの改善を進めたステップ • アクセシビリティに興味はあるが、具体的に どうやって進めていけばいいかという人向け
5. なぜ Mackerel でアクセシ ビリティ改善に取り組むの か
6. クラウド時代に最適な監視モデルを 使いやすいUIで提供し、システムの 運用・監視にチームで取り組む文化 を作る「クラウド運用の道標」とな るSaaS型サーバー監視サービス
7. 使いやすい UI • = ユーザビリティの高い UI • ユーザビリティの高い状況を提供するために は、土台となるアクセシビリティが確保され て使える状態がある前提が必要
8. • ユーザビリティは 特定の状況での使 いやすさ • アクセシビリティ は使える度合いや 状況の広さ 間嶋 沙知, 読みにくい「困った！」を解決す るデザイン, マイナビ出版, 2022, P23
9. チームで取り組む文化を作る • チームのメンバー全員が障害なく Mackerel にアクセスできることが不可欠
10. アクセシビリティ改善の進め方 1. 個人の裁量で小さな実績を積み上げていく 2. 成果を積極的にアピールする 3. アクセシビリティに興味を持った人を巻き込 む
11. 個人の裁量で小さな実績を積み上げていく • アクセシビリティ改善自体は正しい行いであり、 否定されることはない • しかし、プロジェクトには他にもやるべきことが たくさんある • アクセシビリティ改善の優先度を上げるように説 得をするのは、なかなか大変
12. プロジェクト外の時間を利用する • まずは「アクセシビリティの改善が行われ た」という事実が大事 • Mackerel チームでは 1 スプリントごと 10% 今自分が一番やりたいことをやる時間が存在 する
13. 個人で改善を進める際に意識したこと • 小さな改善からトライする • リリース告知に出せる単位を目標とする
14. 具体的なアプローチ はじめは「キーボードのみですべての操作を可 能にする」から取り組むのがおすすめ
15. キーボードのみですべての操作を可能に • キーボードは身近なデバイス ◦ 結果が見えやすい ◦ 検証を行いやすい • キーボード操作を可能にするだけでも、多く の達成基準に影響がある
16. 実際の改善内容
17. フォーカスリング サイドメニューのナビゲーション のフォーカスリングが表示されて いなかった 達成基準 2.4.7: フォーカスの可視化を理解する
18. フォーカスリング focus-visible 擬似ク ラスは、キーボードで操作 したときだけスタイルを適 用する
19. ボタンをフォーカス可能に • <div> タグでボタン が実装されていた • <button> タグを使 うように 達成基準 2.1.1: キーボードを理解 する
20. 成果を積極的にアピールする • 改善によってできるようになったことをアウ トプットをすることが重要 • チーム内外に向けて成果をアピールすること で、アクセシビリティに興味を持つ人を増や す活動にも繋がる 20
21. 成果をアピールする方法 • スプリントレビュー • 社内勉強会 • リリース告知 21
22. スプリントレビュー • プロジェクト外のことをやる時間は 1 スプリ ントにごとに設けられているので、改善結果 を共有するのに最適 • 動画を撮影してキーボード操作の様子を共有 すると、具体的に改善結果が伝わりやすい
23. 社内勉強会 • 社内にアピールする手段として、最も反響が ある • 何回か発表を行ううちに、アクセシビリティ をやってる人として認知されるようになった
24. リリース告知 • 外部にも成果をアピールする • 告知担当の方と連携して告知を書く UI・アクセシビリティを改善しました ほか
25. リリース告知 • アクセシビリティのコミュニティに対して、 アクセシビリティへの取り組みを実施してい る企業であることをアピールできる絶好の機 会 • 外部にリリース告知を出している、という事 実を通じて社内においても認知も高まった 25
26. アクセシビリティに興味を持った人 を巻き込む • 個人で小さな改善を積み重ね、成果をアピー ルしていくと、アクセシビリティに興味を持 つ人が増えていく • 次のステップは複数人で改善に取り組むこと
27. 開発合宿 • 複数人で改善に取り組む場として、開発合宿 を利用した • 機械チェックでアクセシビリティを改善する プロジェクトを提案
28. 機械チェックを用いたアプローチ • 問題の所在がわかりやすい ◦ 複数人で作業を分担しやすい ◦ 改善方法が明確なので、はじめての作業として取り組 みやすい • 数字として結果が見える ◦ 作業のモチベーションが維持しやすい ◦ 成果としてアピールしやすい 28
29. 開発合宿の成果 • 機械的に検出された問題の 231 個の改善に成 功した • デザイン上の観点も含めて議論できた VoiceOver などの支援技術の体験もできた
30. アクセシブルな状態を継続 可能にする
31. Mackerel のフロントエンドを触る人 が皆アクセシビリティの知識があるわ けではない
32. はじめからアクセシブルにする • ESLint ルールの追加 ◦ React：eslint-plugin-jsx-a11y ◦ Vue：eslint-plugin-vue-a11y • 既存の UI パーツを UI コンポーネントとして 提供する
33. UI コンポーネント • 例えばタブのようなパーツ ◦ アクセシビリティを考慮して実装するには、 WAI-ARIA に対する深い知識が必要
34. UI コンポーネント • <Tab> コンポーネントとして提供することで、詳細 な実装を知らなくてもアクセシビリティを担保でき る • 既存のデザインを保ちつつアクセシブルな UI コン ポーネントを実装するには、Radix UI や Headless UI のようなヘッドレスな UI ライブラリがおすすめ
35. まとめ • まずは個人の裁量で小さな改善を積み重ねる • 成果を積極的にアピールして、アクセシビリ ティに興味を持つ人を増やして、複数人での 活動にしていく • チームを飛び出してアクセシビリティを広げ る。社内の勉強会が最も効果的