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

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

自己紹介 sayn0 エン・ジャパン株式会社 23 卒フロントエンドエンジニア X:@sayn0de 2

生成 AI × コーディングは結構浸透しつつある 3

アクセシビリティ観点にも使えるのでは 4

アクセシビリティについていざ取り組んでいこうと思うと、結構大変 5

特に、アクセシビリティチェックが大変チェックリストを作成するのが大変社内でアクセシビリティチェックが仕組み化されていない（アクセシビリティ知識に個人差がある）自動チェックと手動チェックの境界がはっきりしない 6

理想はアクセシビリティチェックの手動チェックを少しでも減らしていきたい 7

Cursor というエディタがアクセシビリティに対してどのように役立つのかを見ていく 8

Cursor とは AI 支援機能を搭載したコードエディタのこと Visual Studio Code を複製して作られた
9

Cursor × アクセシビリティ Cursor 今回は Cursor の機能のうち、アクセシビリティに対して特に有効的に利用できそうだと思った機能を 2 つ取り上げる
Docs Codebase Answers アクセシビリティ今回は以下の 2 つを取り上げるコードレビュー（セルフレビューも含む）ライブラリを把握する 10

Cursor の各機能を簡単に紹介します！ 11

Cursor の Docs についてサードパーティライブラリのドキュメントを AI に読み込ませる機能 12

Cursor の Codebase Answers についてコードベース全体に関する質問を AI に投げかけることができる機能 13

コードレビュー（セルフレビューも含む）作成したコンポーネントがアクセシブルかどうかをチェックする 14

簡易的なパンくずコンポーネントをチェック ARIA Authoring Practices Guide (APG) Patterns を Docs に読み込ませてこちらをベ
ースにセルフレビューさせる 15

リクエスト内容 16

リクエスト結果 18

結構よくできている 20

ライブラリを把握する axe-core って内部的に何をチェックしているのか 21

個人的には手動チェックと自動チェック（ axe Devtools や ESLint など）をできれば区別させたいが容易ではない 22

axe-core を見てみる axe-core (https://github.com/dequelabs/axe-core)を GitHub からクローンしてきて、 Codebase Answers に投げかける
23

リクエスト内容とその結果 24

自動チェックまわりの理解が深まり、自動チェックと手動チェックの境界を見極めるのに役立ちそう 26

まとめ生成 AI はあくまで作業を楽にするアシストにすぎないが、適切にアプローチすることでアクセシビリティに対しても役立つと感じる手動チェックを置き換えるというより、手動チェックの敷居を下げることができるイメージ基本的には理解を深めるための壁打ち相手であって、一次情報での確認は怠らないように気をつける 27

今後の展望 Cursor(生成 AI) × アクセシビリティのノウハウを蓄積していき、横展開していく Docs が特に優秀なので、独自ガイドラインを作成し、それを学習させ、セルフレビューがアクセシビリティ改善にどのくらいインパクトあるのか気になる現在進行で作成しているガイドラインやチェックリストにも
Cursor 観点を適用していく 28

参考文献サクッと始める 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

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

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

sayn0

More Decks by sayn0

Other Decks in Programming

Featured

Transcript