Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

「うちのサイト、目の不自由な人や高齢のお客さまはちゃんと使えているのかな」。ふとそう感じたことはありませんか。とはいえ、専門の業者に頼むと数十万円。社内にエンジニアもいない。そんな状態で止まっている会社さんは本当に多いです。

この記事では、AIコードエディタ「Cursor(カーサー)」を使って、サイトのアクセシビリティの問題をAIに見つけさせ、コードを直すところまでの具体的なやり方を解説します。専門知識がなくても大丈夫です。「何から手をつければいいか」「どこまでAIに任せて、どこは人がやるべきか」が読み終わるころにはハッキリします。

結論。アクセシビリティ対応で押さえるべきは「この3つ」だけ

Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

最初に答えからお伝えします。中小企業がアクセシビリティ対応で本当にやるべきことは、たった3つに絞れます。難しい規格の暗記は不要です。

そもそもアクセシビリティとは、かんたんに言うと「目が見えにくい人、耳が聞こえにくい人、マウスが使えず キーボードだけで操作する人など、いろんな状態の人がサイトを問題なく使えること」です。お店でいえば、入口にスロープをつけたり、案内表示を大きくしたりするのと同じ考え方ですね。

ポイント1。AIは「修正担当」ではなく「優秀な検査員」と考える

ここが一番大事なところです。2026年時点の専門家の共通見解は、AIはアクセシビリティの専門知識の代わりにはならないということ。 AIが得意なのは、問題を一気に洗い出すこと、似たミスをまとめて見つけること、直す順番に優先度をつけることです。最終的に「この直し方で本当にお客さまが使いやすくなるか」を判断するのは人間の役目になります。

ポイント2。「ソースコードを直す」ツールを選ぶ

世の中には、サイトに1行タグを貼るだけでアクセシビリティ対応が完了するとうたう「オーバーレイ」と呼ばれるツールもあります。ですが、これは見た目の上に後付けのフタをかぶせるだけで、元のコードは直りません。海外では、こうしたツールを入れていた企業が「対応したと言いながら実際は使えなかった」として訴えられる事例が相次いでいます。 だからこそ、Cursorのように元のコード自体をきちんと直すアプローチが安全なんです。

ポイント3。設計の段階から考える「あとで困らない」発想

今あるサイトを直すのはもちろん大事ですが、これから作るページは最初からアクセシビリティを意識して作る。これを「アクセシビリティ・バイ・デザイン」と呼びます。後付けのリフォームより、最初から段差のない家を建てるほうが安くて確実、というのと同じ理屈です。Cursorは新規ページを作るときの相棒としても使えます。サイトの細かな修正全般についてはCursorを「最強のWeb更新アシスタント」にする方法でも詳しく紹介しています。

Cursorでアクセシビリティを直す。具体的な5ステップ

Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

それでは実際の進め方です。コードが読めなくても、AIに正しく指示を出せれば作業は進みます。ここでは画面のボタン名ではなく「何を、どの順番でやるか」というプロセスでお伝えします。細かい操作は変わりやすいので、最新の手順は公式ヘルプを参照してください。

ステップ1。サイトのファイルをCursorで開く

まずは自社サイトのHTMLファイル(ページの設計図にあたるファイル)をCursorで開きます。WordPressをお使いなら、テーマのファイルやテンプレートが対象です。いきなり本番サイトをいじるのは禁物。必ずコピーを取ってから作業しましょう。

ステップ2。AIに「健康診断」をお願いする

CursorのチャットにAIへの指示を打ち込みます。たとえばこんな具合です。

  • 指示例:「このページをWCAG 2.2 AAの基準でチェックして、アクセシビリティの問題点を、深刻な順にリスト化してください」

WCAG(ダブリューシーエージー)2.2 AAというのは、世界的に使われているアクセシビリティの合格ライン、つまり「ここまでできていれば及第点」という目安です。2026年時点では、この2.2 AAが実務上の標準になりつつあります。 AIはこの基準に照らして、足りない部分を一覧にしてくれます。

ステップ3。よくある問題を直してもらう

AIが見つける典型的な問題は、だいたい次のようなものです。これらを一つずつ「直して」とお願いしていきます。

問題の例何が困るのか
画像に説明文(代替テキスト)がない目が見えない人が使う読み上げソフトが、画像の内容を伝えられない
ボタンが「ボタン」として作られていないキーボード操作の人が押せない、読み上げソフトが認識できない
入力欄に項目名(ラベル)がない「ここに何を入れる欄か」が読み上げで分からない
文字と背景の色が近すぎる色の見え方が違う人や高齢の人が読みづらい

たとえば代替テキストなら「すべての画像に、内容が伝わる代替テキストを追加して」と指示します。ただしAIが付けた説明文は必ず自分で確認してください。AIは画像の「意味」までは分からないので、的外れな説明になることがあります。

ステップ4。一気にではなく「少しずつ」直す

100個の問題を一度に「全部直して」と頼むと、AIが混乱して別の場所を壊すことがあります。「画像の説明文だけ」「次は色のコントラストだけ」と、テーマを区切って進めるのがコツです。

ステップ5。直したら必ず自分の目と手で確認する

直したあとは、実際にマウスを使わずキーボードのTabキーだけでページを操作してみてください。すべてのボタンやリンクにたどり着けて、押せるか。これだけでも多くの問題に気づけます。色の見やすさは無料ツールでも確認できます。同じくCursorで診断する発想はClaude CodeでWebサイトのSEO診断をする方法とも共通しているので、あわせて読むと理解が深まります。

取り組むとどう変わるか。成果のイメージ

Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

アクセシビリティ対応は「やさしさ」のためだけではありません。実は、会社にとって具体的なメリットがいくつもあります。

  • お客さまの取りこぼしが減る:日本では高齢化が進み、見えにくい・操作しづらいと感じる人は年々増えています。使いやすいサイトは、それだけ多くの人に届きます。
  • 検索にも強くなる:画像の説明文や正しいコードの整理は、Googleがサイトを理解する助けにもなります。アクセシビリティとSEOは多くの部分で重なります。
  • 企業の信頼が上がる:「誰にでも配慮している会社」という姿勢は、BtoBの取引でも評価につながります。大企業や自治体との取引では、アクセシビリティが条件になることもあります。
  • コストが大きく下がる:専門業者に外注すると1ページあたり数万円かかる作業も、Cursorを使えば人の確認時間だけで進められます。海外の事例では、AIの活用でプロジェクトあたり時間の短縮が期待できるとされています。

うまくいっている企業に共通するのは、「一度やって終わり」にしない点です。月に一度AIで全ページを点検する、といった習慣にしている会社ほど、品質を保てています。AppleなどもAIを活用したアクセシビリティ機能の強化を続けており、こうした流れはApple Intelligenceのアクセシビリティ関連の解説記事からもうかがえます。生成AIが社会のインフラになりつつある背景はI継続的に取り上げられています。

よくある失敗と、その防ぎ方

Cursorで「アクセシビリティ」を自動補正。視覚障害のある人にも届くサイトへAIでコードを直す手順

現場でやりがちな失敗を、先に知っておきましょう。これを避けるだけで、ぐっと安全に進められます。

失敗1。AI任せにして、かえって問題を増やす

意外に思うかもしれませんが、CursorやGitHub CopilotといったAIは、アクセシビリティに問題のあるコードを生み出すこともあります。 学習元のデータに、もともと正しくないコードが多く混じっているからです。だからこそ、AIに「アクセシビリティを意識して書いて」と毎回はっきり伝えることが大切です。

AIの出力は「完成品」ではなく「下書き」です。必ず人がチェックする前提で使ってください。チェックなしで本番に出すのが最大の失敗です。

失敗2。オーバーレイツールに頼ってしまう

「タグを1行貼るだけ」という手軽なツールに飛びつくのは危険です。前述のとおり、これは根本解決になりません。海外では、こうしたツールを導入していた企業が訴訟されたり、虚偽の宣伝として行政から多額の制裁金を科されたりした例があります。 手軽さに釣られず、コードそのものを直す道を選びましょう。

失敗3。デザインが崩れる・他の機能を壊す

AIは機能の修正は得意でも、サイト全体のデザインの統一感までは気が回りません。修正後にレイアウトが崩れていないか、必ず見た目も確認してください。テーマを区切って少しずつ直す(ステップ4)のは、この崩れを防ぐ意味もあります。

失敗4。費用が思ったより膨らむ

あいまいな指示で何度もやり直しをさせると、AIの利用料が想定外に増えることがあります。指示は具体的に、対象範囲を絞って。これがコストを抑えるコツです。同じ修正を繰り返さないよう、直した内容をメモしておくのも有効です。

よくある質問

コードが全く読めなくても本当にできますか

基本的な作業は可能です。AIに日本語で指示すれば、問題の発見も修正も進みます。ただし最終確認は人が行う必要があるため、不安な場合は最初だけ詳しい人や専門家にチェックしてもらうと安心です。

AIで直せば法律上の対応は完璧になりますか

いいえ、AIだけでは完璧にはなりません。AIはあくまで作業を助ける「支援」です。本当に使いやすいかは、実際に障害のある方のテストや専門家の監査で確かめるのが確実です。AIで土台を作り、仕上げを人が担う形が現実的です。

どのくらいの費用と時間がかかりますか

Cursorは個人向けプランが無料から用意されています(2026年06月07日時点)。 外注すると数十万円かかる作業も、社内でAIを使えば人の確認時間が主なコストになります。1ページなら数時間から取り組めます。

WordPressで作ったサイトでも使えますか

使えます。テーマのファイルやテンプレートをCursorで開いて修正します。ただし直接いじると不具合のリスクがあるので、必ずバックアップを取り、テスト環境で試してから本番に反映してください。

まずは1ページから始めてみましょう

アクセシビリティ対応は、完璧を目指して身構えると一歩も進めません。まずはトップページ1枚を、Cursorで点検することから始めてみてください。サイト改修の発想はCursorでダークモードを実装する方法のように、小さな一歩の積み重ねです。

コレットラボでは、こうしたAIを使った業務のシステム化を、現場目線で一緒に設計するお手伝いをしています。「自社のサイトはどこから手をつければ?」という段階でも構いません。まずは気軽にご相談ください。

30分の無料相談

現状をお聞きし、優先順位を一緒に整理します。

予約する →

Read Next / 次に読む

AIエージェントでホワイトペーパーを「自動更新」する仕組み。古くなった統計データをAIが拾い直し、資料を書き換える方法
AX

AIエージェントでホワイトペーパーを「自動更新」する仕組み。古くなった統計データをAIが拾い直し、資料を書き換える方法

2026.05.27 / 約 7 分

関連記事

AX

AX推進で社内調整をスムーズに進める方法。広報がリードするAI導入の合意形成テクニック

2026.06.05
AX

Claude Codeで「メディアリスト」を爆速整理。バラバラの連絡先をAIが賢く名寄せする仕組み

2026.05.29
AX

AIエージェントでホワイトペーパーを「自動更新」する仕組み。古くなった統計データをAIが拾い直し、資料を書き換える方法

2026.05.27
AX

Vibe Codingで「SNS用バナー生成機」を内製化。文字を入力するだけで自社ロゴ入り画像が出る仕組み

2026.05.23
AX

広報の残業をゼロにするAXロードマップ。属人化業務をAIに継承させる3ステップと具体的な進め方

2026.05.20
AX

AIエージェントによる「プレスリリースの効果分析」:掲載媒体と反響をAIが勝手に集計しレポート化

2026.05.19