Cursor × アクセシビリティを模索してみた

Transcript

1. Cursor × アクセシビリティを模索してみた 1
2. 自己紹介 sayn0 エン・ジャパン株式会社 23 卒フロントエンドエンジニア X:@sayn0de 2
3. 生成 AI × コーディングは結構浸透しつつある 3
4. アクセシビリティ観点にも使えるのでは 4
5. アクセシビリティについていざ取り組んでいこうと思 うと、結構大変 5
6. 特に、アクセシビリティチェックが大変 チェックリストを作成するのが大変 社内でアクセシビリティチェックが仕組み化されていない（アクセシビリティ知 識に個人差がある） 自動チェックと手動チェックの境界がはっきりしない 6
7. 理想はアクセシビリティチェックの手動チェックを少 しでも減らしていきたい 7
8. Cursor というエディタがアクセシビリティに対してど のように役立つのかを見ていく 8
9. Cursor とは AI 支援機能を搭載したコードエ ディタのこと Visual Studio Code を複製して作 られた 9
10. Cursor × アクセシビリティ Cursor 今回は Cursor の機能のうち、アクセシビリティに対して特に有効的に利用できそうだ と思った機能を 2 つ取り上げる Docs Codebase Answers アクセシビリティ 今回は以下の 2 つを取り上げる コードレビュー（セルフレビューも含む） ライブラリを把握する 10
11. Cursor の各機能を簡単に紹介します！ 11
12. Cursor の Docs について サードパーティライブラリのドキュメントを AI に読み込ませる機能 12
13. Cursor の Codebase Answers について コードベース全体に関する質問を AI に投げかけることができる機能 13
14. コードレビュー（セルフレビューも含む） 作成したコンポーネントがアクセシブルかどうかをチェックする 14
15. 簡易的なパンくずコンポーネントをチェック ARIA Authoring Practices Guide (APG) Patterns を Docs に読み込ませてこちらをベ ースにセルフレビューさせる 15
16. リクエスト内容 16
18. リクエスト結果 18
20. 結構よくできている 20
21. ライブラリを把握する axe-core って内部的に何をチェックしているのか 21
22. 個人的には手動チェックと自動チェック（ axe Devtools や ESLint など）をできれば区別させたいが 容易ではない 22
23. axe-core を見てみる axe-core (https://github.com/dequelabs/axe-core)を GitHub からクローンしてき て、 Codebase Answers に投げかける 23
24. リクエスト内容とその結果 24
26. 自動チェックまわりの理解が深まり、自動チェックと 手動チェックの境界を見極めるのに役立ちそう 26
27. まとめ 生成 AI はあくまで作業を楽にするアシストにすぎないが、適切にアプローチする ことでアクセシビリティに対しても役立つと感じる 手動チェックを置き換えるというより、手動チェックの敷居を下げることができ るイメージ 基本的には理解を深めるための壁打ち相手であって、一次情報での確認は怠らな いように気をつける 27
28. 今後の展望 Cursor(生成 AI) × アクセシビリティのノウハウを蓄積していき、横展開していく Docs が特に優秀なので、独自ガイドラインを作成し、それを学習させ、セル フレビューがアクセシビリティ改善にどのくらいインパクトあるのか気にな る 現在進行で作成しているガイドラインやチェックリストにも Cursor 観点を適用し ていく 28
29. 参考文献 サクッと始める AI コードエディタ【 Cursor / VS Code / ChatGPT】 https://zenn.dev/umi_mori/books/ai-code-editor-cursor/ ARIA Authoring Practices Guide (APG) Patterns https://www.w3.org/WAI/ARIA/apg/patterns/ 29
30. ご清聴ありがとうございました 30