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