HTML
品質管理
アクセシビリティ、パフォーマンス、SEOを含むHTML品質管理チェックリスト
HTML の品質管理は、現場の実態や運用を踏まえつつ、最低限のチェックを確実に行ってください。
必須チェック
- alt 属性の有無:画像には必ず
alt属性を付与すること。 - 画像の幅 / 高さまたはレイアウト予約(CLS 対策)
- 見出し階層:h1〜h6 を論理的な順序で使用すること。
- ラベル付与:フォーム要素・ボタンに明確なラベル/テキストを付与すること。
- キーボード操作:主要操作がキーボードで行えること(Tab / Enter / Space など)。
アクセシビリティ
- WCAG 2.2 の 4 原則(知覚可能・操作可能・理解可能・堅牢性)を基準として、可能な範囲でマシンリーダブルなマークアップを用いること。
技術品質
- パフォーマンス:LCP、FCP、TBT 等の指標(Core Web Vitals)を意識し、画像の遅延読み込み、スクリプトの遅延/分割、キャッシュ制御を実施すること。
- セキュリティ:HTTPS を必須とし、CSP・SRI 等の基本対策および入力検証を行うこと。
- SEO(メタ情報):title、meta description、見出し構造、必要に応じて構造化データを実装すること。
- レスポンシブ & 画像最適化:ビューポート設定、主要ブレークポイントでの確認、
srcset/pictureと適切なフォーマット(WebP/AVIF 等)を検討すること。 - 互換性/フォールバック:新機能は Can I use で検証し、必要に応じてポリフィルや代替実装を用意すること。