Skip to content

Pillar 1 of 4

Accessibility that doesn't hide behind a green checkmark

We run the same axe-core engine that powers Deque's commercial tooling — and we tell you the truth about what automated testing can and can't find.

Why automated scanning is necessary but not sufficient

Accessibility lawsuits in the US increased every year from 2018 to 2024. The vast majority cited issues that an automated scanner would have caught: missing alt text, contrast failures, form labels, broken focus order. Catching those issues early — and continuously — is non-negotiable. But here's the part most vendors won't tell you: axe-core, the engine behind every credible automated accessibility scanner including ours, catches roughly 50–60% of WCAG issues. The rest require a human. We surface that limit clearly. If a vendor claims 100% coverage or an AAA badge from automated testing alone, walk away.

How findings reach your team

Every violation comes with the rule ID, severity, the offending DOM node's outerHTML, the CSS selector, and a short failure summary that tells your engineer what to change. We link to Deque's rule documentation so the developer doesn't have to context-switch. Findings are stored as JSON. You can export them, diff them between scans, or pipe them into a future GitHub Action that fails the build on regressions.

Score interpretation

Each violation is weighted by axe-core impact: critical = 10, serious = 5, moderate = 2, minor = 1. We subtract the total from 100 for the per-page score, floored at zero. A score of 90+ usually means a small handful of minor issues. 70–89 means a real backlog. Below 70 means the page has structural problems and needs a focused remediation pass.

指摘の例

serious

フォーム要素にはラベルが必要です

/signin のログインフォームに、紐づく<label>がなく aria-label もないメール入力があります。スクリーンリーダーは文脈なしに「編集テキスト」と読み上げ、プレースホルダーに頼る認知障害のあるユーザーは入力中に手がかりを失ってしまいます。

<input type="email" placeholder="Email" class="form-input" />

Fix: <label for="email">Email</label> を追加するか、aria-label="Email" を設定してください。
serious

色のコントラストが不十分です

/pricing の本文テキストは #9CA3AF を #FFFFFF 上に使用しており、2.84:1 の比率です。WCAG 2.1 AA では本文コピーに 4.5:1 が必要です。視力が弱い方、古いディスプレイ、日差しの反射がある環境では読みづらく、場合によってはテキストがまったく見えないこともあります。

Element     : <p class="text-slate-400">Most popular plan</p>
Foreground  : #9CA3AF
Background  : #FFFFFF
Ratio       : 2.84:1 (need 4.5:1)
Fix         : #6B7280 に暗くする(5.85:1)か、18.66px以上で700+のフォントウェイト(大きなテキストのルール)にしてください。
moderate

見出し階層が1段飛んでいます

/blog/post-template のページは <h1> から直接 <h3> に飛び、<h2> がスキップされています。スクリーンリーダーは見出しレベルを通じてページ構造を提示し、Hキーで移動するユーザーにはギャップが混乱を招きます。検索エンジンのクロールも階層を使ってセクションの関連性を評価します。

ページ概要:
  H1: 記事タイトル
    H3: セクション見出し        ← 飛ばされたH2
      H4: サブセクション

Fix: <h3> を <h2> に変更するか、H3 が本当にサブセクションである場合は <h3> を囲む <h2> を挿入してください。

60秒でサイトをスキャン

無料クレジット25。クレジットカード不要。気になるページの実際の指摘が手に入ります。