a11y MCP を作成して登壇までした話

はじめに

今年の5月23日と24日に TSKaigi が開催されました。
そこで登壇できなかったのですが、その後にフリー株式会社さんで開催されたアフタートークに登壇させていただきました。
そこでの内容を記事にしてなかったなぁと思ったので、今回記事にしようかと思います。

登壇に関する資料

発表資料：https://gamma.app/docs/MCP--ibrd92jgmyanm2l
発表の際のアーカイブ：https://www.youtube.com/watch?v=yx5kUww0fpg

Youtube に関してはいつ削除されるかわからないので、発表している一部のスクショを載せておきます。

現場紹介

今回の記事にも Organization として紐づけさせていただいてますが、株式会社うるると言うところで働かせていただいております。
今回の Qiita Tech Festa でもものすごいたくさんの記事が投稿されており、技術にもイケイケな企業だと思っております。
自分のいるチームでは、有志で土日にもくもく会を開いてたりしてます。
働いていてとても楽しい現場です。

発表内容

概要

現在、X を見ていると Claude Code の話題ばっかりですが、その Claude で使用する MCP サーバを作成した話をさせていただきました。
中身は a11y のテストをしてくれるものとなっています。

npm: https://www.npmjs.com/package/a11y-test-mcp?activeTab=readme

lobehub といった MCP のレジストリみたいなところにも提出してるんですが、まだ一覧に出てこず・・・

MCP とは？

こちらは、さすがに説明はいらないと思いましたが、念の為記載しておきます。
MCPサーバーは、AIが外部ツールやデータと連携するための「橋渡し役」となる技術です。
要は AI Chat と外部ツールを繋ぐアダプタみたいなものですね。

技術構成

• a11y test
  • playwright
  • @axe-core/playwright
• base
  • typescript（こちら、発表資料に抜けております）
• MCP
  • @modelcontextprotocol/sdk
• validation
  • zod
• Architecture
  • ↓

入力値

AI Chat の文字列から URL と a11y の指標を取得するようにしました。

• URL（必須）
• a11y 指標（任意）
  • default
    • WCAG 2.0 level A
    • WCAG 2.0 level AA
    • WCAG 2.1 level A
    • WCAG 2.1 level AA

上記の入力値から playwright を用いて a11y のスコア等のテストを実施します。
その結果を文字列にまとめて、AI に返し、分析してもらうといった流れになります。

実際の動き

下記の画像は URL と a11y の指標を渡した際の結果になります。

画像を見てわかる通り、しっかりテストされてますね🙌
上記のテスト結果を踏まえて、どこに問題があるのかを続きの Chat で聞いたのが下記になります。

テスト結果をしっかりまとめる実装にしたので、上記のような結果で返ってくるようになりました。

ハマりポイント

今回、Claude で 作成した MCP サーバを登録して動作確認を行ったのですが、修正をした後に再度動きを確認しようとしたら、古いソースでずっと動き続けると言うことにハマりました・・・
そのため、VSCode の Copilot で追加して、削除してを繰り返す方法でなんとかデバッグをとるようなことをしました。

今であれば、VSCode v1.101 で watch モードがリリースされたので、比較的簡単にデバッグが取れるようになったかと思われます。

まとめ

今回、MCP サーバを作成したもそうですが、何よりも、外部での登壇が初の経験でした。（本当に貴重な機会でした）
次は Vue Fes Japan の LT 枠として応募しており、結果を楽しみに待っています。

MCP サーバや、気になるけど手が出せないようなものは他にもあると思います。
ですが、今の AI の時代、簡単に手が出せるようにもなっているので、AI に大枠を作ってもらう・作ってもらった後に自分で手を入れるみたいな開発手法で、皆さんもぜひいろんな技術に手を出してみていただければと思います！