Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cursor × アクセシビリティを模索してみた
Search
sayn0
August 31, 2024
Programming
0
160
Cursor × アクセシビリティを模索してみた
sayn0
August 31, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
最近のVS Codeで気になるニュース 2025/01
74th
1
250
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Introduction to kotlinx.rpc
arawn
0
630
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
A Philosophy of Restraint
colly
203
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Building an army of robots
kneath
302
45k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
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
17
リクエスト結果 18
19
結構よくできている 20
ライブラリを把握する axe-core って内部的に何をチェックしているのか 21
個人的には手動チェックと自動チェック( axe Devtools や ESLint など)をできれば区別させたいが 容易ではない 22
axe-core を見てみる axe-core (https://github.com/dequelabs/axe-core)を GitHub からクローンしてき て、 Codebase Answers に投げかける
23
リクエスト内容とその結果 24
25
自動チェックまわりの理解が深まり、自動チェックと 手動チェックの境界を見極めるのに役立ちそう 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