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

by azukiazusa

Slide 1

Slide 1 text

Mackerel のアクセシビリティ改善事例 id:azukiazusa 2023/06/06 Hatena Engineer Seminer #25 アクセシビリティ編

Slide 2

Slide 2 text

自己紹介 ● azukiazusa ○ Mackerel チーム Web アプリケーションエンジニア ○ フロントエンド周りをよく見ている ● 技術記事をよく書いています

Slide 3

Slide 3 text

発表内容 ● Mackerel の開発チームにおいてアクセシビリティの改善を進めたステップ ● アクセシビリティに興味はあるが、具体的にどうやって進めていけばいいかという人向け

Slide 4

Slide 4 text

Slide 5

Slide 5 text

なぜ Mackerel でアクセシビリティ改善に取り組むのか

Slide 6

Slide 6 text

クラウド時代に最適な監視モデルを使いやすいUIで提供し、システムの運用・監視にチームで取り組む文化を作る「クラウド運用の道標」となるSaaS型サーバー監視サービス

Slide 7

Slide 7 text

使いやすい UI ● = ユーザビリティの高い UI ● ユーザビリティの高い状況を提供するためには、土台となるアクセシビリティが確保されて使える状態がある前提が必要

Slide 8

Slide 8 text

● ユーザビリティは特定の状況での使いやすさ ● アクセシビリティは使える度合いや状況の広さ間嶋沙知, 読みにくい「困った！」を解決するデザイン, マイナビ出版, 2022, P23

Slide 9

Slide 9 text

チームで取り組む文化を作る ● チームのメンバー全員が障害なく Mackerel にアクセスできることが不可欠

Slide 10

Slide 10 text

アクセシビリティ改善の進め方 1. 個人の裁量で小さな実績を積み上げていく 2. 成果を積極的にアピールする 3. アクセシビリティに興味を持った人を巻き込む

Slide 11

Slide 11 text

個人の裁量で小さな実績を積み上げていく ● アクセシビリティ改善自体は正しい行いであり、否定されることはない ● しかし、プロジェクトには他にもやるべきことがたくさんある ● アクセシビリティ改善の優先度を上げるように説得をするのは、なかなか大変

Slide 12

Slide 12 text

プロジェクト外の時間を利用する ● まずは「アクセシビリティの改善が行われた」という事実が大事 ● Mackerel チームでは 1 スプリントごと 10% 今自分が一番やりたいことをやる時間が存在する

Slide 13

Slide 13 text

個人で改善を進める際に意識したこと ● 小さな改善からトライする ● リリース告知に出せる単位を目標とする

Slide 14

Slide 14 text

具体的なアプローチはじめは「キーボードのみですべての操作を可能にする」から取り組むのがおすすめ

Slide 15

Slide 15 text

キーボードのみですべての操作を可能に ● キーボードは身近なデバイス ○ 結果が見えやすい ○ 検証を行いやすい ● キーボード操作を可能にするだけでも、多くの達成基準に影響がある

Slide 16

Slide 16 text

実際の改善内容

Slide 17

Slide 17 text

フォーカスリングサイドメニューのナビゲーションのフォーカスリングが表示されていなかった達成基準 2.4.7: フォーカスの可視化を理解する

Slide 18

Slide 18 text

フォーカスリング focus-visible 擬似クラスは、キーボードで操作したときだけスタイルを適用する

Slide 19

Slide 19 text

ボタンをフォーカス可能に ●

タグでボタンが実装されていた ● タグを使うように達成基準 2.1.1: キーボードを理解する

Slide 20

Slide 20 text

成果を積極的にアピールする ● 改善によってできるようになったことをアウトプットをすることが重要 ● チーム内外に向けて成果をアピールすることで、アクセシビリティに興味を持つ人を増やす活動にも繋がる 20

Slide 21

Slide 21 text

成果をアピールする方法 ● スプリントレビュー ● 社内勉強会 ● リリース告知 21

Slide 22

Slide 22 text

スプリントレビュー ● プロジェクト外のことをやる時間は 1 スプリントにごとに設けられているので、改善結果を共有するのに最適 ● 動画を撮影してキーボード操作の様子を共有すると、具体的に改善結果が伝わりやすい

Slide 23

Slide 23 text

社内勉強会 ● 社内にアピールする手段として、最も反響がある ● 何回か発表を行ううちに、アクセシビリティをやってる人として認知されるようになった

Slide 24

Slide 24 text

リリース告知 ● 外部にも成果をアピールする ● 告知担当の方と連携して告知を書く UI・アクセシビリティを改善しましたほか

Slide 25

Slide 25 text

リリース告知 ● アクセシビリティのコミュニティに対して、アクセシビリティへの取り組みを実施している企業であることをアピールできる絶好の機会 ● 外部にリリース告知を出している、という事実を通じて社内においても認知も高まった 25

Slide 26

Slide 26 text

アクセシビリティに興味を持った人を巻き込む ● 個人で小さな改善を積み重ね、成果をアピールしていくと、アクセシビリティに興味を持つ人が増えていく ● 次のステップは複数人で改善に取り組むこと

Slide 27

Slide 27 text

開発合宿 ● 複数人で改善に取り組む場として、開発合宿を利用した ● 機械チェックでアクセシビリティを改善するプロジェクトを提案

Slide 28

Slide 28 text

機械チェックを用いたアプローチ ● 問題の所在がわかりやすい ○ 複数人で作業を分担しやすい ○ 改善方法が明確なので、はじめての作業として取り組みやすい ● 数字として結果が見える ○ 作業のモチベーションが維持しやすい ○ 成果としてアピールしやすい 28

Slide 29

Slide 29 text

開発合宿の成果 ● 機械的に検出された問題の 231 個の改善に成功した ● デザイン上の観点も含めて議論できた VoiceOver などの支援技術の体験もできた

Slide 30

Slide 30 text

アクセシブルな状態を継続可能にする

Slide 31

Slide 31 text

Mackerel のフロントエンドを触る人が皆アクセシビリティの知識があるわけではない

Slide 32

Slide 32 text

はじめからアクセシブルにする ● ESLint ルールの追加 ○ React：eslint-plugin-jsx-a11y ○ Vue：eslint-plugin-vue-a11y ● 既存の UI パーツを UI コンポーネントとして提供する

Slide 33

Slide 33 text

UI コンポーネント ● 例えばタブのようなパーツ ○ アクセシビリティを考慮して実装するには、 WAI-ARIA に対する深い知識が必要

Slide 34

Slide 34 text

UI コンポーネント ● コンポーネントとして提供することで、詳細な実装を知らなくてもアクセシビリティを担保できる ● 既存のデザインを保ちつつアクセシブルな UI コンポーネントを実装するには、Radix UI や Headless UI のようなヘッドレスな UI ライブラリがおすすめ

Slide 35

Slide 35 text

まとめ ● まずは個人の裁量で小さな改善を積み重ねる ● 成果を積極的にアピールして、アクセシビリティに興味を持つ人を増やして、複数人での活動にしていく ● チームを飛び出してアクセシビリティを広げる。社内の勉強会が最も効果的