アクセシブル名のないボタン
インタラクティブ要素はDOMに存在しますが、スクリーンリーダーに明確なアクション名が伝わりません。
button.product-card__favoriteWCAG AAウェブサイトアクセシビリティチェック
分かりにくいボタン、ラベルのない入力欄、読みにくい文字など、サイトの利用を妨げる問題を見つけます。自動アクセシビリティ検査で問題の説明を確認できます。
チェック結果
そのままチームのタスクになるレポート
レポートは、ブラウザーの要素ツリーであるDOM内の対象要素を、セレクターとHTML断片で示します。該当するコンポーネントを見つけて修正したら、キーボードとスクリーンリーダーでの動作を再テストしてください。
違反合格要確認WCAGタグ
accessibility-report3件の問題 · 42件のルール合格
フォームフィールドがラベルに接続されていない
ユーザーにはラベルが見えますが、ラベルとinputの技術的な関連付けが欠けています。
#checkout-emailテキストコントラストがWCAG AAを下回っている
ボタンの状態は視覚的に弱く、暗いインターフェース背景に対して見えにくくなる可能性があります。
.promo-banner .btn-secondary影響を確認
重大および深刻な問題から始めて、最も目立つアクセス障壁を素早く取り除きましょう。
セレクターを共有
開発者に正確な対象、HTMLフラグメント、違反の簡単な理由を送信します。
リリースを再確認
修正後にチェックを再実行し、どの違反がレポートから消えたかを確認します。
チェック内容
セマンティクス、ARIA、フォーム、コントラストを1回のアクセシビリティチェックで
自動のWebアクセシビリティ検査では、描画されたインターフェースから検出可能な問題を調べます。指摘はWCAGのルールに関連しますが、検査に通過してもWCAG AAへの完全な適合を認証するものではありません。
ページ構造
ドキュメントタイトル、ページ言語、見出し階層、ランドマーク領域、リスト、画像の代替テキストをチェックします。
開発者向けの詳細
- h1-h6とランドマーク
- 代替テキストと非表示SVG
- lang、title、基本セマンティクス
ARIAとアクセシブル名
ARIA属性は、コントロールの役割、状態、関係を支援技術に伝えます。誤った関係や明確な名前のないコントロールを確認します。ARIAを追加するだけで操作がアクセシブルになるわけではありません。
開発者向けの詳細
- button、link、inputの名前
- role/state/propertyの問題
- combobox、dialog、menuパターン
フォーム、エラー、コントラスト
ラベル、必須および無効状態、ヘルパーテキストのリレーション、テキストコントラスト、重要な要素の可読性をチェックします。
開発者向けの詳細
- labelとヘルパーテキスト
- WCAG AAコントラスト比
- エラーとライブメッセージ
FAQ
アクセシビリティチェックに関するよくある質問
WCAG、自動ルール、DOMノード、ARIA、フォーム、コントラスト、修正順序に関する簡潔な回答。
自動チェックで検出できるものは？
レンダリングされたHTMLとスタイルから検出できる問題を発見します：ラベルの欠落、ARIAエラー、無効なロール、コントラストの問題、空のリンクやボタン、altテキスト、ランドマーク構造、およびWCAGルールセットの一部。
ウェブサイトにとってWCAG AAとはどういう意味ですか？
WCAG AAは、ほとんどの商用および公共インターフェースにとって実用的なアクセシビリティの目標レベルです。レポートのルールにはWCAGタグが付けられているため、各違反がどの要件に関連しているかを確認できます。
これは手動監査の代わりになりますか？
いいえ。このチェックはDOMとCSSの技術的な違反を十分にカバーしますが、複雑なシナリオ、実際のキーボード操作順序、スクリーンリーダーの動作は別の手動段階で確認する必要があります。
1ページから始められますか？
はい。最初のパスでは通常、ホームページ、リードフォーム、商品カード、チェックアウト、またはアカウントエリアをチェックします。テンプレート化されたサイトでは、各タイプのページを1つずつチェックし、繰り返される違反を比較すると有用です。
エラーが多い場合、最初に何を修正すべきですか？
重大および深刻な問題から始めましょう：アクセシブルな名前のない要素、ラベルのないフィールド、ARIAエラー、不十分なコントラスト、DOMで正しく表現されていないインタラクティブ要素。中程度および軽微な問題は、近くのデザインやレイアウトの変更とまとめることができます。