1,200ページを超える静的 Next.js サイトのアクセシビリティ・SEO 検査を 2 段に分け、HTML だけで判定できる項目は全ページで、描画が必要な項目は Lighthouse で種類ごとに 1 ページだけ測定する手法。
#Lighthouse
「Lighthouse」に関するアクセシビリティ関連情報を自動収集して掲載しています。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。
Lighthouse がアクセシビリティ 100 点でも見落とす項目を、手動チェックで検出。装飾的なアイコンの aria-hidden 設定、ランドマークの配置と aria-labelledby による命名、HTML の妥当性など、実装例を交えて解説。
Lighthouse と axe で頻出するアクセシビリティエラー(代替テキスト・色コントラスト・ボタン名前・フォームラベル)の意味と修正方法を解説する。
Lighthouseで最も頻出するアクセシビリティ失敗4つ(色コントラスト・代替テキスト・リンク名・フォームラベル)の原因と最小限の修正方法をWCAG 2.2に対応させて解説している。
Lighthouse の accessibility score が実際に何を測り、何を測らないか。100点でも manual testing が必要。自動テストの限界と manual checks が必要な10項目の解説。
3つのアクセシビリティテストツール(axe・Lighthouse・WAVE)を公式資料から比較。機能、対応標準、無料範囲、自動検査の限界を8軸で整理し、ツール選択の判断基準を示す。
ウェブページ品質の自動監査ツール Lighthouse の概要と使い方。DevTools、CLI、拡張機能など複数の実行方法を説明。
AI エージェントが Web と対話するための準備度を Lighthouse で評価。WebMCP 統合とアクセシビリティツリーの重要性、具体的な改善策を解説。
Lighthouse スコア低下の原因となる 6 つの問題と改善方法。画像最適化、フォント読み込み最適化、サードパーティスクリプトの遅延読み込み等を解説。
Lighthouse と ChatGPT を組み合わせ、はてなブログのアクセシビリティ問題を特定・改善する過程を記録。視覚障害のある著者が VoiceOver でテストし、Webアクセシビリティの実践的な改善手法を紹介する。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
Lighthouseアクセシビリティスコアが高くても実際のアクセシビリティツリーの品質を保証しないことを説明し、マネーページの監査方法とCI統合のチェックリストを示す。
Lighthouse 100点が実アクセシビリティを保証しない理由を4層で解説。axe-coreの部分実行制限、EUの同意バナー干渉、モバイル固有課題、手動検証の必須性を指摘。
自動テストツール(axe、Lightouseなど)が検出できないアクセシビリティの問題を指摘。キーボード操作・スクリーンリーダー・ARIAの手動検証の必要性と、自動テストと手動テストを組み合わせたアプローチを提唱している。
Web 制作現場でアクセシビリティの重要性をどう説明するか。『使いづらい』と『使えない』の違い、感じ方の多様性、WCAG などの基準が必要な理由を、フロントエンドエンジニアの視点から丁寧に考察。
Chrome DevToolsに統合されたアクセシビリティ機能を活用してWCAGに準拠したWebの検証を行う手法。
Core Web Vitalsダッシュボードに表示されやすいアクセシビリティ修正。フォーカス表示、キーボード応答性、モーダルの位置固定に注目し、計測可能な改善の優先度付けを実例で解説。
axe-coreやLighthouseなどの自動スキャナツールでは検出できないアクセシビリティ上の問題や限界について解説する。
アクセシビリティテストツールA11yInspectの実装テスト。自動スキャン、手動検査、カラーコントラスト解析など複数の機能が従来の複数ツールを統合できるかを、実際のプラットフォームで検証。
5つのWebページからアクセシビリティ改善のバックログを作成する方法を紹介。自動化ツールと手作業レビューを組み合わせた、実践的な監査アプローチを説明する。
WCAG 2.2 SC 2.5.8が定める最小ターゲットサイズ(24×24ピクセル)の要件について、Lighthouseの判定との乖離を実測で検証する技術記事。
ホームページの画像に設定するalt属性(代替テキスト)の重要性を解説。SEO対策とアクセシビリティ向上の両面から、alt属性の正しい設定方法を紹介する。
累積レイアウトシフト(CLS)はパフォーマンス指標でありながら、スクリーンリーダーユーザーに混乱をもたらす。CLSを修正する方法と重要性を解説
Lighthouseを用いてアクセシビリティスコアを55から100に改善した実例を報告した記事。6件のWCAG違反修正の具体的プロセスを解説し、自動ツールが検出できないキーボードトラップなどの課題も指摘している。
Lighthouseなどの自動監査ツールが報告するアクセシビリティスコアの限界を指摘。ツール判定と実際の使いやすさの乖離や誤検出について論じる記事。
Lighthouse 監査で満点達成するための手法を、AnalogJS ブログの事例を通じて解説。Web アクセシビリティテストの実践的な改善方法を紹介。
Automatyzacja EAA w CI/CD: Jak wdrożyć testy dostępności w małym budżecie przed czerwcem 2025?
CI/CDパイプラインにアクセシビリティテストを統合し、限定予算で自動化を実現する方法。テストツールの選択・運用・2025年6月までのロードマップを解説する。
Lighthouseスコアやチェックリストでは見落とされやすい認知アクセシビリティの重要性を解説する。ユーザーの認知負荷の差が実際の使いやすさに大きく影響することを示す。
自動化ツールに依存せず、セマンティックHTML・キーボード操作・フォーカス設計による総合的なアクセシビリティアプローチを解説。人間による検証の重要性を強調する。
Lighthouse等の自動アクセシビリティ監査ツールが図表や複雑なUIコンポーネントを正確に評価できない理由を解説。キーボード操作の制限など実際のアクセシビリティの問題を事例で示す。
自動テストツールaxe-coreとLighthouseの検出精度を比較。50ウェブサイトでの実測結果から、各ツールの得意分野と限界を明らかにする比較研究。
axe-coreはオープンソースのアクセシビリティ監査エンジン。Deque・Lighthouse・Microsoft等で採用されている。チェック対象・非対象項目と制限事項を解説。
WCAG基準で定めるカラーコントラスト要件と、Lighthouseなどの監査ツールで検出される失敗パターンを解説。
アクセシビリティテストにはスキャナー以上の方法が必要。自動テストツールは30〜50%程度しか検出できず、手動テストの重要性を解説。
自動スキャナーツール(axe・WAVE・Lighthouse等)が検出できないアクセシビリティチェック項目を示し、AccessGuardがいかに対応しているかを解説する。
Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
Lighthouseが100点でも、キーボード操作やスクリーンリーダー利用時に実際には使いづらい可能性があり、自動テストだけでなく実際のユーザーテストが必要。
欧州アクセシビリティ法(EAA)コンプライアンスを軸に、Axe DevTools、WAVE、Lighthouse 3つのアクセシビリティテスティングツールの特性と選択基準を比較する動画。
ウェブアクセシビリティの自動評価ツールとモデル。DOM構造と視覚要素を分析し、既存ツール(axe、Lighthouse等)との比較でその有効性を検証した研究。
Webサイトのアクセシビリティを自動評価するツール(axe、Lighthouse等)の有効性を比較分析。各ツールの問題検出精度と改善提案の質を実証的に検証した学術論文。