アクセシビリティ試験の"その後"を仕組み化する

Transcript

1. CA11Y #3 アクセシビリティ試験の "その後"を仕組み化する — Ameba ブログでの実践 AmebaLIFE 事業本部 Web フロントエンドエンジニア 湯本航基 WCAG 2.2 Claude Code Automation
2. SELF INTRODUCTION 湯本 航基 ゆーみん / @yu_3in CyberAgent, Inc. AmebaLIFE 事業本部 Web フロントエンドエンジニア Ameba ブログの開発など 02 CA11Y #3
3. ABOUT AmebaLIFE事業本部 サイバーエージェント「 メディア&IP」 管轄の組織で、⼈々の⽇常⽣活を豊かにする複数サービスを運営 03 CA11Y #3 Ameba ブログ ドットマネー Ameba チョイス Ameba 塾探し など Ameba ブログ — 国内最⼤級のブログプラットフォーム ドットマネー — ポイント交換プラットフォーム Ameba チョイス / Ameba 塾探し — ⽐較メディア amebalife.jp — AmebaLIFE 事業部公式サイト
4. ACCESSIBILITY アクセシビリティへの取り組み Ameba ではガイドライン‧デザインシステム‧試験に加え、 勉強会の開催や技術記事の発信など、多⾓的にアクセシビリティに取り組んでいます。 04 CA11Y #3 01 Ameba Accessibility Guidelines WCAG 2.1 に基づく独⾃ガイドラインを策定。実装例‧テスト⽅法を明記し判断基準を統⼀ 02 デザインシステムSpindle 共通コンポーネントにアクセシビリティ基準を組み込み、UI 品質のばらつきを抑制 03 ナレッジ共有‧発信 勉強会の開催や技術ブログでの記事発信を通じ、アクセシビリティの知⾒を蓄積‧展開 04 アクセシビリティ試験 JIS X 8341-3:2016 準拠の試験を実施 a11y-guidelines.ameba.design 2021 アメブロで初のアクセシビリティ試験を実施 レベルA ⼀部適合を達成 ameblo.jp/accessibility 2025 AmebaLIFE で 2 回⽬の試験を実施中 WCAG 2.2 AA 準拠を⽬標に 対象範囲を拡⼤して再検証
5. TESTING アクセシビリティ試験の進め⽅ JIS X 8341-3:2016 （WCAG 2.2 AA ）準拠を⽬標に、スプレッドシートで試験結果を管理。 Notion でチケットを切り担当者が分担。検証にはLighthouse ‧⽬視確認‧masuP9 さんのa11y-specialist-skills を併⽤。 進め⽅ 1 スプレッドシートに達成基準 × 対象ページのチェックリストを作成 2 Notion で達成基準ごとにチケットを作成、担当者を割り当て 3 Lighthouse ‧⽬視確認‧masuP9 さんのa11y-specialist-skills を併⽤して検証 4 アクセシビリティチームで議論し、判定や対応⽅針を決定 github.com/masuP9/a11y-specialist-skills 試験記録（スプレッドシート抜粋） 達成基準 LV 適⽤ 結果 件数 担当 1.1.1 ⾮テキストコンテン ツ A 適⽤ ⾮適合 5 QCチーム 1.3.2 意味のある順序 A 適⽤ 適合 0 ⼭⽥太郎 2.1.1 キーボード A 適⽤ 適合 0 QCチーム 3.1.1 ページの⾔語 A 適⽤ 適合 0 佐藤花⼦ ※ 2 種類のシート構成: ① 達成基準ごとの総括（上表）② ページ別テスト詳細（タブ別に 1.1.1, 1.3.1 ... と管理） 05 CA11Y #3
6. 試験で⾒つけた問題を どう直して、 どう再発を防ぐか 試験で⾒つけた問題を仕組みで直し、 ナレッジとして蓄積する──そのサイクルをAI で回す 06 CA11Y #3 再発
7. APPROACH 改善の仕組み — 3 つのステップ STEP 1 試験結果をIssue 化 STEP 2 AI が修正PR を作成 STEP 3 ガイドラインで再発防⽌ 07 CA11Y #3
8. STEP 1 試験結果を Issue に変換する スプレッドシートの試験結果をAI が読み取り、 WCAG 達成基準ごとに構造化されたIssue を⾃動⽣成する 1 スプレッドシートの試験結果をClaude Code スキルに⼊⼒ 2 /a11y-audit-to-issues スキルがIssue Markdown を⽣成 3 ⼈間が⽣成内容を確認‧修正する（Human in the Loop ） 4 対象ファイル‧⾏番号‧修正⽅針を含むIssue をGitHub に起票 WCAG 1.1.1 ⾮テキストコンテンツ 対象ファイル - ShareButton.tsx:14 - ArticlePagination.tsx:195 - ImageListNav.tsx:51 修正⽅針 aria-label で「Xにポストする」 「前の記事」「次の年」等の 代替テキストを付与する 08 CA11Y #3
9. STEP 1+2 /a11y-audit-to-issues 試験で⾒つかった不適合項⽬を精査し⾃動でIssue 化。 Issue 内の @claude メンションでClaude Code が修正PR を⾃動作成する。 なぜ作ったか 試験結果の転記‧Issue 化が⼿作業だと 時間がかかり、粒度も揺れやすかった スキルがやること スプレッドシートの達成基準‧対象ページ‧ 所⾒を解析し、Issue 本⽂を⾃動⽣成 起票後のワークフロー gh issue create → @claude メンション → Claude Code が修正PR を⾃動作成 → ⼈間がレビュー‧マージ 09 CA11Y #3 ⼈間がやること ⽣成されたIssue と修正PR をレビューし、修正⽅針が妥当かを確認する ⼿が回らなかった改善フローを⾃動化し、修正着⼿までのリードタイムを短縮
10. STEP 3 知⾒をガイドラインに蓄積する 10 CA11Y #3 Issue やPR レビューの知⾒をガイドラインとして蓄積し、 Claude Code が参照することで同じ指摘を繰り返さない仕組み 01 a11y 指摘を 抽出 ― ガイドラインPR ⽣成 02 ⼈間がPR 上で 採否を判断 ― ガイドラインPR ⽣成 03 ドキュメントに ⾃動反映 ― Code Review 活⽤ 04 Code Review で 再発を防ぐ ― Code Review 活⽤ ガイドラインPR ⽣成 Code Review 活⽤
11. STEP 3 guideline PR ガイドライン PR を ⾃動⽣成する 01 レビューのa11y 指摘を抽出 PR レビューに含まれるアクセシビリティの指摘を cron で定期収集。Issue の知⾒も対象にする。 02 ガイドライン候補をPR で起票 収集した指摘をClaude Code が分析‧構造化し、 ガイドライン候補としてまとめたPR を⾃動起票。 11 CA11Y #3
12. STEP 3 code review 蓄積したガイドラインで Code Review する 03 判断結果をドキュメントへ⾃動反映 承認されたガイドラインをCLAUDE.md へ反映 04 Code Review がガイドラインを参照 ガイドラインが増えるほどClaude Code のレビュー精度が向上。 同じ指摘を繰り返さず、チーム全体の品質が底上げされる。 12 CA11Y #3
13. READ MORE 詳しくはこちら developers.cyberagent.co.jp/blog/?p=62639 13 CA11Y #3
14. SUMMARY まとめ AI を仕組みに組み込み、アクセシビリティ改善を効率的かつ持続可能にする 1 アクセシビリティ試験‧改善にAI を組み込む 2 AI でガイドラインに収集し、⼀度指摘したことは再発防⽌ 3 持続的にラクに運⽤できる体制づくり 14 CA11Y #3
15. アクセシビリティ改善を、 仕組みとして回し続ける 属⼈化しない。⽌まらない。 試験 → Issue → 修正PR → ガイドライン蓄積のサイクルが⾃動で回る AmebaLIFE 事業本部 湯本航基 Accessibility Claude Code Guideline 15 github.com/yu-3in @yu_3in