Category Archive WordPress

アクセシビリティは機能ではなく運用能力、その理由と実践法

今、多くの開発現場ではAIアシスタントがUIを高速生成している。しかし、その裏で「Pay Now」ボタンが単なる<div>タグにクリックハンドラを付けただけの状態でリリースされ、スクリーンリーダーを使うユーザーが購入を完了できないという問題が頻発している。これは単なるバグではない。コードの速度と製品の使いやすさの間に横たわる構造的なギャップであり、AI時代のエンジニアリングが直面する決定的な課題だ。

Smashing Magazineの記事では、アクセシビリティをコンプライアンスのチェックリストやプロジェクト終盤の監査で扱うのではなく、セキュリティや信頼性と同じ「運用能力（Operational Capability）」として位置付けるべきだと主張している。本稿ではその考え方と具体的な実践パターンを紹介する。

監査依存の罠とその限界

長い間、アクセシビリティ対策の主流は「外部企業に依頼し、200件の指摘リストを受け取り、その一部を修正して報告書を提出する」という一過性の監査モデルだった。監査そのものは営業資料や調達要件として必要であり、VPAT（Voluntary Product Accessibility Template）やACR（Accessibility Conformance Report）の提出が求められる場面は確かに存在する。だが、このアプローチには根本的な弱点がある。

監査はスプリント計画中の設計判断を助けてくれない。プルリクエスト前に問題を検知できない。デプロイ頻度が上がるほど監査結果はすぐに陳腐化する。ある時点のスナップショットでしかないからだ。半年後に数十回のリリースを重ね、ナビゲーションが刷新された製品に対して、過去の監査報告書はもはや実態を反映しない。コンプライアンスは「到達する状態」ではなく「維持し続ける状態」であり、製品が複雑になるほどその維持は困難になる。

上図のように、アクセシビリティをプロジェクトの最終段階でスポット的に対処するのではなく、開発フロー全体に組み込む継続的な運用モデルが求められる。

WebAIMが毎年100万ページをスキャンする「WebAIM Million」レポートの2026年版では、検出可能なWCAG違反のあるページが95.9%、平均エラー数は56.1件に上った。ページ要素数は前年比で20%以上増加しており、AI支援開発や「Vibe Coding」の普及が拍車をかけていると見られる。要素が増えれば増えるほどアクセシビリティ違反の発生箇所も増える。アクセシビリティの負債は技術的負債と同じ振る舞いをし、放置すれば将来の修正コストを複利的に膨らませていく。

AIがもたらすアクセシビリティの新たな課題

AIによるコード生成が一般化したことで、アクセシビリティの問題は単に「残り続ける」だけでなく「倍増する」フェーズに入った。その背景には、短期的な生産性を優先する開発スタイルがある。

Andrej Karpathyが2025年2月に提唱した「Vibe Coding」は、意図を伝えるだけでモデルがコードを生成し、差分を精読せずに受け入れる働き方だ。もともとは週末の趣味プロジェクト向けだったが、Y Combinatorの2025年冬バッチではスタートアップの25%がコードベースの95%以上をAI生成と報告している。この速度重視の流れは、アクセシビリティの質を根本から脅かす。

AIモデルが非セマンティックなコードを生成しやすいのには理由がある。GitHub上の多くのReactコードは「divのスープ」と呼ばれる構造で書かれており、モデルはそれを学習する。人間のレビューも視覚的な見た目を評価しがちで、セマンティクスよりも見た目を重視するフィードバックループが回る。さらに、<div onClick>の方が<button aria-expanded="true">よりトークン数が少なく、制約がない限りモデルは安価な経路を選ぶ。つまり、AI生成UIはデフォルトでアクセシブルではない。

Frontend Mastersのブログ記事によれば、ある開発者が複数のAIツールでReactコンポーネントを生成した実験では、29行のサイドバーに10のアクセシビリティ違反が見つかった。ランドマークなし、見出しなし、リスト構造なし、クリックハンドラのみでボタン未使用、aria-expandedなし、キーボード操作不可、ラベルのないアイコン。スクリーンリーダーが読むアクセシビリティツリーは平坦で構造化されていないテキストの羅列だった。開発者は「同じピクセルだが、片方はドア、もう片方はドアの絵」と表現している。

この問題はセキュリティとも根が同じだ。Veracodeの2025年GenAIコードセキュリティレポートでは、AI生成コードの多くがOWASP Top 10に該当する脆弱性を含み、特にクロスサイトスクリプティングの失敗が多発していた。モデルの知能が問題なのではなく、開発者がセキュリティ制約を指定せず、検証を体系的に行わないプロセスに原因がある。セキュリティレビューをスキップするショートカットは、アクセシビリティレビューもスキップする。AIはアクセシビリティ格差を縮めるどころか、その原因を産業化しているといえる。

開発速度とアクセシビリティは両立可能

「制約を課すと開発速度が落ちる」という意見は根強いが、実際には逆の傾向がある。DevOpsの基本原則であるシフトレフト（問題を早期に検出する）をアクセシビリティに適用すると、修正コストが劇的に下がる。

設計レビューでアクセシビリティの問題を指摘するのはコメント1つで済む。同じ問題が本番環境で発覚すれば、調査、マークアップの再構築、修正、テスト作成に数時間を要する。さらに監査で数百件の指摘が後から出てくれば、週単位の計画外作業が発生する。早期段階の自動チェックがこれらの高コストな後始末を防ぐ。アクセシビリティの組み込みが速度を損なうのではなく、予期せぬ手戻りこそが速度を損なうのだ。

このフローを日常的に回すチームは、緊急監査やリメディエーションスプリントといった高コストなサプライズを回避できる。アクセシビリティは速度の敵ではなく、予測可能な開発速度を守るための保険として機能する。

エンタープライズ対応のための実装パターン

アクセシビリティを大規模にスケールさせる組織は、個人のヒーロー的な努力に頼らず「システム」を構築している。その中核にあるのがデザインシステムであり、ここが最もレバレッジの効く出発点だ。

GOV.UK Design Systemは好事例だ。コンポーネントはJAWS、NVDA、VoiceOver、TalkBackなどの支援技術を用いた自動テストと手動テストの両方を経ており、自動化の限界を補うために障害を持つユーザーを交えたユーザーテストも実施している。しかしチームは、デザインシステムを使うだけでサービスが魔法のようにアクセシブルになるわけではないと明言しており、「高い出発点を与えるだけ」という現実的なスタンスをとっている。つまり、アクセシビリティはインフラになるという教訓だ。

次に、この基盤はエンジニアリングワークフロー全体に組み込まれる。具体的には、完了の定義にアクセシビリティ要件を含め、プルリクエストレビューで明示的なチェックを行い、インタラクティブなコントロールにはデフォルトで<button>や<a>といったセマンティック要素を使用する。キーボードナビゲーションとフォーカス管理はオプションの装飾ではなく、標準的なエンジニアリング上の関心事として扱われる。

最終的に、アクセシビリティは自動化によって強制力を持つ。eslint-plugin-jsx-a11yはコミット前に一般的な問題を捕捉し、LevelCIやPa11yといったツールがCI/CDパイプラインで自動テストを実行する。@storybook/addon-a11yはコンポーネント開発中に問題を表面化させる。この段階に至ると、アクセシビリティは個人の記憶や善意に依存せず、プロセスによって担保される。プラットフォームの一部になるのだ。

これらのレイヤーを重ねることで、組織はアクセシビリティを持続可能なプラクティスに変えることができる。

システムでスケールするための実践

このアプローチを実現しているチームには、いくつかの共通する実装パターンがある。

第一に、AIにコードを生成させる前に制約を課すことだ。生成後に修正するのではなく、CursorルールやCopilotインストラクション、リポジトリレベルの標準設定にアクセシビリティ要件を直接埋め込む。セマンティックHTMLを使うよう指示し、ボタンとリンクの使い分け、状態とラベルの適切な公開方法を明示する。モデルは一度きりのプロンプトよりも、永続的な制約に対してはるかに信頼性高く従う。

第二に、複雑なウィジェットを手作りしないことだ。コンボボックス、メニュー、タブ、モーダルといったUI要素は、アクセシビリティ上の問題が集中するホットスポットになる。Radix UI、React Aria、Headless UIのようなライブラリは、これらの問題の多くをすでに解決している。スケーラブルなアプローチとは、アクセシビリティを毎回一から実装することではなく、十分にテストされたプリミティブからアクセシブルな振る舞いを継承することだ。

第三に、設計から実装へのハンドオフ時にアクセシビリティ要件を明文化することだ。フォーカス順序、ラベル、見出し階層、インタラクションの状態は実装開始前に規定されているべきである。設計成果物にアクセシビリティ要件が欠けていれば、最終製品にも欠ける可能性が高い。「タブ順序はどうするか」「ラベルは何か」「エラー時に何が起きるか」といった簡単なメモが、後の推測作業を大幅に減らす。

これらのパターンはどれも特別なものではない。DevOpsとプラットフォーム思考をアクセシビリティに適用しただけの話だ。

ビジネスインパクトと運用能力としての価値

エンジニアリングリーダーがアクセシビリティを優先する理由は規制だけではない。しかし、規制、調達要件、ユーザー維持、製品品質はすべて同じ方向を指している。

法的圧力は増加の一途にある。米国ではデジタルアクセシビリティ訴訟が年間数千件に上り、大企業に限った話ではない。欧州では欧州アクセシビリティ法が施行され、Eコマース、銀行、発券、通信など幅広い分野に適用される。企業の所在地を問わないため、日本企業でもEU圏向けのサービスには影響が及ぶ。規制当局の目は「あればよいもの」から「必須」へと変わった。

しかし、規制は話の一部に過ぎない。より大きな話は市場機会の喪失だ。世界経済フォーラム（2023年12月）の推計では、世界の13億人の障害者とその友人・家族が持つ購買力は13兆ドルに達し、障害者消費者の年間可処分所得だけでも約8兆ドルに上る。英国のClick-Away Poundレポート2019では、アクセシビリティの低いサイトを離脱し他社で購入するユーザーの損失額が171億ポンドに達し、2016年の117.5億ポンドから約45%増加した。ユーザーはバグ報告をしない。ただ去って競合から買う。

B2Bや政府向けビジネスでは、アクセシビリティがコストではなく堀（Moat）になる。多くの企業がデジタル製品の購入時にVPATやACRなどのアクセシビリティ証明を求めており、Level Accessの第7回年次レポートによると、取引の75%で「ほとんどの場合」証明が必要とされ、常に要求する割合は27%から31%に上昇している。強固なACRは営業サイクルを加速させ、弱いものや不在は商談を停滞または停止させるレッドラインになる。

一歩引いて見れば、より深いパターンが浮かび上がる。アクセシビリティはエンジニアリング成熟度の代理指標だ。セマンティックHTMLを出力し、フォーカスを管理し、状態を正しく公開し、それをCIでテストするチームは、規律の整ったチームである。アクセシブルなコンポーネントを生み出す同じ規律が、保守性が高く、テスト可能で、バグの少ないコンポーネントを生み出す。開発リーダーやプロダクトリーダーにとって、これこそが本当のビジネスケースだ。アクセシビリティへの投資はプラットフォームへの投資であり、機能出荷をより速く、スムーズに、手戻り少なくするための基盤となる。

この記事のポイント

• アクセシビリティは一過性の監査やチェックリストではなく、セキュリティと同様の継続的な運用能力として組み込むべき
• AIによるコード生成が加速するほど、非セマンティックなUIが量産されアクセシビリティ負債が倍増する
• 設計段階からCI/CDまでシフトレフトすることで、手戻りコストを大幅に削減できる
• デザインシステム、完了の定義、自動化ゲートの3層でアクセシビリティはスケールする
• ビジネス面でも、法規制対応や巨大な市場機会の獲得、調達優位性に直結する

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp