ChatGPT時代のウェブアクセシビリティ 〜AIはどこまで頼れるのか？

https://www.youtube.com/live/XpygDEyjmmM

Napkinで生成

https://gyazo.com/398488055b3da122469e78622d9e8be1

逆から順にやる

シフトレフト

https://gyazo.com/3b030175649e4f439ea2cc041c2f59c1

検証フェーズ

axe DevToolsをAIでみる

エンジンであるaxe-coreは色んな場所で使われている

Lighthouseのアクセシビリティも使われている

背景画像を敷いた結果のコントラストを見てくれる

https://gyazo.com/052170a48b1aa4d183a6d8c9c9fff165

Intelligent Guided Tests

手動チェックの手順化＋AIサポート

https://gyazo.com/b086fd93b7dedb48f62293b51ec62bdf

https://gyazo.com/6feef9f32d9faf46b883d1b4e84382e6

axeのポリシーが「誤検知ゼロ」と「人間中心アプローチ＝人間の判断を優先する」ため、手間がかかる

制作編: 生成AIでチェック

Cursorでa11yチェック

割と見てくれる

表示の仕方があまりにも変な場合も指摘してくれる

地球の欠け具合で貸出しやすさがあったりとか

https://gyazo.com/74fcd2ccc430d5db471babbf415c5a29

発見率は良いが、誤検知や安定しない

https://gyazo.com/a179b843208b8f40009da491ca9a1e86

https://gyazo.com/fd63d360552c7faeeac6bf26d07b4394

実装フェーズ: 生成AIで改善できるか？

解決するまで繰り返すとかなり強引な改変がされる。存在しない文章が追加されることもある

https://gyazo.com/4613cd42af5ffba369198dc2d162f2d4

https://gyazo.com/d30939cc2895a211af580d653a0318aa

https://gyazo.com/af5565aa89db20c659540761291174df

間違ったコードを学習してしまって、間違ったものが出力される

https://gyazo.com/30bcc2705d9d61830411ddf61089edf5

https://gyazo.com/b5a367cca87856965d408154d6c67978

実装フェーズ: figmaを元に生成AIでコード出力してみる

figma MCPを使うとCursorにfigmaファイルを読み込める

html2designでFigmaを作った

勝手にレスポンシブをした

微妙に小技を受かってくる

画像は謎なものを使われてしまう

https://gyazo.com/2fc8d4e283510895790283ff49c008b3

markuplintを入れておくと、lintの結果も踏まえて修正される

実装フェーズ: figmaを元に専用ツールでコード出力してみる

Builder.ioを使う

https://gyazo.com/fa3d3a7669c7b8d7c1bdb0fa22b3587a

ページを一気にやると壊れやすいため、コンポーネント単位でやると良さそう

制作編: デザインフェーズ

Starkでfigmaチェック

https://gyazo.com/c8fe0303f65d0dae6af9e32465761ece

https://gyazo.com/5d19c913d573da9f696ab79d3b458cfc

https://gyazo.com/3bf5068c4ab9cfd9e76ac47fa3a1addb

閲覧側でのAI

アクセシビリティオーバーレイ

https://gyazo.com/e732ef70969c81808139fb5404f79f17

高い自動操作ビリティ

ChatGPT Operator

Microsoft Playwright MCP

https://gyazo.com/ec9c5b9db1fe4c164da3ecc0386b754d

まとめ

https://gyazo.com/94045a1149a86e3dee16a2f9f99717ed

https://gyazo.com/9bd9e1d273a04853319be63b994d2100