GitHub Copilot CLIでWebアクセシビリティを改善した話

GitHub Copilot CLIでWebアクセシビリティを改善した話
超dotnet new
https://dotnetnew.connpass.com/event/392979/

Transcript

1. GitHub Copilot CLIでWebアクセシビリ ティを改善した話 FutureOne株式会社 草場 友光 超dotnet new
2. 自己紹介 • .NETラボ勉強会を主宰 • 2022/08-2026 Microsoft MVP (Developer Technologies) • tomo_kusaba • ドラクエ大好き ドラクエ10のプレイ時間→ 1キャラ目：2691時間 2キャラ目：919時間 3キャラ目：793時間 4キャラ目：190時間(配信用)
3. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。
4. 今日の目的 • GitHub Copilot CLIは最も自然にエージェントを扱えるコー ディングAIのうちのひとつです。 • Webサービスにおいてはアクセシビリティの配慮が不可欠です。 • 今回は製造段階からアクセシビリティに配慮した仕組み作りにつ いて紹介します。
5. 前提 • 既定アーキテクチャとして以下を指示 項目 既定 Runtime/Framework 最新の.NET SDKとASP.NET Core UI Blazor Web AppのInteractive Server render mode Component library Fluent UI Blazor 4 App orchestration Aspire Accessibility WCAG 2.2のkeyboard/focus/label/ARIAを確認
6. 重要 • もともと、Fluent UI Blazorは設計原則を守り使用していれば WCAG2.1 AA準拠です。 • しかしながら、様々な理由でこの設計原則が破られれる可能性が あります。（人がコーディングしても同様です） • 製造段階からこの設計原則を守るための仕組み作りが重要です。
7. さらに重要 • アクセシビリティ改善を継続しやすくするためのフローです。 • WCAG適合を保障するものでも、ユーザーテストやレビューを置 き換えるものでもありません。
8. カスタマイズ機能の把握 機能 説明 Instructions 常に効く前提の規約。 プロジェクト全体の規約。組織全体の規約など。 Skills 作業マニュアルやツール一式が入ったもの 必要に応じてCopilotが使う Custom Agents 特定の役割をもった担当者
9. カスタムエージェントのフロー ユーザー要求 開発オーケストレーター コードライター コードレビューア アクセシビリティレビューア レビューチェッカー 正当な指 摘あり？ 人間が判断 修正完了 アクセシビリティスキル WCAGなど確認
10. スキルについて • 根拠の取り方 • WCAGの日本語情報を一次情報として参照する • 判断のよりどころを固定する • なにを確認するか？ • 何をもってアクセシビリティチェックが完了したかが明確にしないと判断 がぶれる • どうやって確認するかは書く必要ないが、何を確認するかは必須
11. なぜ改善につながるか？ • アクセシビリティが最初の段階から組み込まれている。 早い段階で取り込めるので問題が収束しやすい • 同じSkillを参照するので確認軸がぶれにくい • レビューが独立しているので検証的な角度でチェックできる • 最終判断は人間がする構造になっている
12. とはいえ限界も • 以下のような観点で人間によるチェックが必要 • 実際のユーザーの文脈でわかりやすいのか？ • 当事者の立場で負担の少ない操作になっているのか？ • 自動テストでは判断できない日本語の文脈で違和感がないか？ • Lighthouseなどの自動チェックではWCAGの網羅率は30% 程度 こうしたAIを駆使してもせいぜい50%～60％程度 最後は人間がチェックする必要あり
13. まとめ • GitHub Copilot CLI + Custom Agents + Skillsでコード を書く仕組みとともにアクセシビリティを改善する仕組みを入れ ることでWebアプリケーションのアクセシビリティを向上させるこ とはできる。 • しかしながら当然限界点はある。 • 開発の品質活動の1つとして当然組み込んで行くものの1つとし てやるべきこと。
14. 宣伝 おしまい
15. Microsoft Buildを徹夜するBar@ エデン 日暮里(6/2) 収益でいらないもの交換会が豪華になります （先ほどのピザになりました！）
16. くさば生誕祭 @ エデン日暮里(６/2６) 収益でいらないもの交換会が豪華になります
17. C# Kaigi 2026(9/19)
18. おしまい