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
Rails アプリ地図考 Flush Cut
makicamel
1
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Software Architecture
hschwentner
6
2.1k
Open source software: how to live long and go far
gaelvaroquaux
0
620
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
WebDriver BiDiとは何なのか
yotahada3
1
140
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
A Philosophy of Restraint
colly
203
16k
Building Adaptive Systems
keathley
40
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How to Ace a Technical Interview
jacobian
276
23k
4 Signs Your Business is Dying
shpigford
182
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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