Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

azukiazusa

June 06, 2023
Tweet

More Decks by azukiazusa

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 実際の改善内容

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. リリース告知
    ● アクセシビリティのコミュニティに対して、
    アクセシビリティへの取り組みを実施してい
    る企業であることをアピールできる絶好の機

    ● 外部にリリース告知を出している、という事
    実を通じて社内においても認知も高まった
    25

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. UI コンポーネント
    ● コンポーネントとして提供することで、詳細
    な実装を知らなくてもアクセシビリティを担保でき

    ● 既存のデザインを保ちつつアクセシブルな UI コン
    ポーネントを実装するには、Radix UI や Headless
    UI のようなヘッドレスな UI ライブラリがおすすめ

    View full-size slide

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

    View full-size slide