Lighthouse と axe で頻出するアクセシビリティエラー（代替テキスト・色コントラスト・ボタン名前・フォームラベル）の意味と修正方法を解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #代替テキスト・alt ピックアップ
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目（色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重）の検査スクリプトとコマンド例を提示。自動検査の限界（説明文の内容評価、ボタン間隔）についても述べる。
PDF作成時の画像代替テキストレビュー手順を解説したもの。AIで下書きした代替テキストを人がレビューする際、画像の目的・周辺文脈・PDF形式後の状態を確認するプロセスを示す。
ページ公開前のアクセシビリティレビューで、実装チェックではなく人が測定したカラーコントラストペアを記録し、代替テキスト出典とキーボード動線の確認が無い場合は公開を止める判定プロセスを解説。
画像のalt属性を適切に設定する方法とAI生成ツール活用による効率化を解説。スクリーンリーダー利用者向けアクセシビリティ、SEO、AI検索精度向上の観点から重要性を説明し、装飾画像と情報画像の区別や冗長表現の避け方などのルールを紹介。AI生成は完全自動化ではなく人間による文脈確認が必須と指摘。
スクリーンリーダーユーザーや検索エンジン、低速接続ユーザーのための代替テキスト（alt属性）の書き方。何を含めるべきか、何を避けるべきかを具体例で示している。
そのほかの #カラーコントラスト ピックアップ
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目（色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重）の検査スクリプトとコマンド例を提示。自動検査の限界（説明文の内容評価、ボタン間隔）についても述べる。
WCAG 2.1のコントラスト比判定を相対輝度から計算し、5つの基準（AA/AAA通常文字/大文字、UI要素）に対応するTypeScriptの実装方法を解説。背景色に応じた合格色の自動提案アルゴリズムも含む。
WCAG 2.1のコントラスト比判定アルゴリズムを実装する方法を解説。相対輝度の計算、複数の達成基準の同時判定、不合格時の色の自動提案を扱う。
色覚の多様性とカラーコントラスト。WCAG AA基準に沿った実装例と、テストの手法を示す。
ページ公開前のアクセシビリティレビューで、実装チェックではなく人が測定したカラーコントラストペアを記録し、代替テキスト出典とキーボード動線の確認が無い場合は公開を止める判定プロセスを解説。
そのほかの #フォーム ピックアップ
メール検証フォームの実装で、状態管理で各段階を明確にし、aria-invalid で無効状態を示し、CSS で空間を予約することで、フォーカス移動とレイアウトシフトを避け、アクセシビリティと UX の両立を実現する。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
CAPTCHA の代わりにハニーポットを使って、スクリーンリーダー利用者に負担をかけずにスパムボットを検出する実装方法。フロントエンドとサーバー側の検証を解説。
React でメールフォームを実装する際に、フォーカス管理とアクセシビリティを両立させる方法。フォーム状態（読み込み中、成功、エラー）の変化を WAI-ARIA で通知しながら、キーボード操作とスクリーンリーダーに対応。エラー時のフォーカス復帰の実装方法を解説。
VIN入力フォームのアクセシビリティ実装について。ラベル、エラーメッセージの表示、live regionsによるスクリーンリーダー対応、フォーカス管理の具体的なコードパターンを解説している。
メールアドレス入力フィールドの目的を明示する方法について。type属性は形式を、autocomplete属性は具体的な目的を示すことで、フィールドの見た目と実際の機能の一貫性を保つ実装パターンを解説している。
そのほかの #Lighthouse ピックアップ
1,200ページを超える静的 Next.js サイトのアクセシビリティ・SEO 検査を 2 段に分け、HTML だけで判定できる項目は全ページで、描画が必要な項目は Lighthouse で種類ごとに 1 ページだけ測定する手法。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。
Lighthouse がアクセシビリティ 100 点でも見落とす項目を、手動チェックで検出。装飾的なアイコンの aria-hidden 設定、ランドマークの配置と aria-labelledby による命名、HTML の妥当性など、実装例を交えて解説。
Lighthouseで最も頻出するアクセシビリティ失敗4つ（色コントラスト・代替テキスト・リンク名・フォームラベル）の原因と最小限の修正方法をWCAG 2.2に対応させて解説している。
Lighthouse の accessibility score が実際に何を測り、何を測らないか。100点でも manual testing が必要。自動テストの限界と manual checks が必要な10項目の解説。
そのほかの #axe ピックアップ
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目（色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重）の検査スクリプトとコマンド例を提示。自動検査の限界（説明文の内容評価、ボタン間隔）についても述べる。
外部ツール（HubSpot等）の埋め込み機能によるアクセシビリティエラーについて、自社で対応できる範囲と提供元への依頼の境界を実例から整理。
Angularアプリのaxeスキャンで検出した違反を、DOM選択子ではなく修正対象のコンポーネント名に帰属させるツールの開発事例。
WCAG 2.2 達成基準を自動評価するツール（axe-core ベース）を、異なるステークホルダー向けに4つのレポート形式で提供する研究。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
axe が フォーカス状態を評価できないという限界を認識し、その補完実装方法と、flaky テストの見分け方を、Next.js の実プロダクトコード上で解説。Ring 不透明度修飾子などの Tailwind ユーティリティは静的検査を素通りするため、getComputedStyle と canvas でコントラストの実効値を計測する実装も示している。