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
100
Cursor × アクセシビリティを模索してみた
sayn0
August 31, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
11
3k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
180
Securify_エンジニア採用資料
3shake
0
130
GoのIteratorに詳しくなってしまう
inatonix
1
210
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
270
#TROCCOUG dbt Cloud+TROCCO
troccoug
0
100
What you can do with Ruby on WebAssembly
kateinoigakukun
0
180
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
230
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
310
Prolog入門
qnighy
4
1k
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
480
Featured
See All Featured
Building Adaptive Systems
keathley
36
2.1k
Debugging Ruby Performance
tmm1
72
12k
Atom: Resistance is Futile
akmur
261
25k
Producing Creativity
orderedlist
PRO
340
39k
Agile that works and the tools we love
rasmusluckow
327
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Documentation Writing (for coders)
carmenintech
65
4.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
4 Signs Your Business is Dying
shpigford
179
21k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Why Our Code Smells
bkeepers
PRO
334
56k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
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