✅Web制作チェックリスト

Web制作時に確認する項目をまとめたチェックリストです。

HTML

  • OGタグは適切なタイプ（website/article）を設定し、絶対パスで記述する
  • headタグ内の実装漏れに注意（meta、OG、canonical等）
  • 見出しタグ（h1-h6）を階層構造に従って適切に実装する
  • imgタグにwidth・height属性を付与してレイアウトシフトを防ぐ
  • ファーストビューの画像にはloading=“lazy”を付けない
  • すべてのimgタグに適切なalt属性を付ける（alt属性自体を省略してしまうと、ファイル名が読み上げられてしまい、ユーザーに適切な情報を伝えることができなくなってしまうため気を付ける）
  • パスの記述方法を統一する（相対パス/ルートパスの混在を避ける）
  • 順序のあるリスト（ランキング等）は<ol>要素を使用する
  • パンくずリストは構造化データマークアップを実装する

CSS

  • transitionプロパティは特定のプロパティに限定する（allを避ける）
  • テキストの折り返し・段落ち表示を各ブレークポイントで確認する
  • レスポンシブ対応のスタイルを各デバイスサイズで検証する
  • iPhone X系のランドスケープモードでのセーフエリア（ノッチ対応）を確認する

JavaScript

  • 変数宣言はvarではなくconst・letを使用する
  • グローバルナビのフォーカストラップを双方向（Tab・Shift+Tab）で実装する
  • コンソールエラーが出ていないことを確認する
  • 電話番号リンクはデバイス判定してPC時はリンクを無効化する
    • pointer-eventsではなくJSでhref属性を動的に制御する？

グローバルナビゲーションの実装を正しく実装する

  • メニューボタン、アコーディオンボタンなどはbutton要素である。
  • メニューの開閉状態がスクリーンリーダーに伝わる。
  • メニュー展開時に背景がスクロールしないように固定する。
  • 各要素にフォーカスがあたり、キーボードで操作が可能。
  • メニューが閉じている状態ではメニュー項目にフォーカスが当たらないようにする。
  • アコーディオンメニューがある場合、メニューが閉じている状態でアコーディオンメニューの中身にフォーカスが当たらないようにする。
  • エスケープキーでメニューを閉じられるようにする。
  • メニューを閉じた際にメニューボタンにフォーカスが戻るようにする。
  • キーボード操作時、メニューの最後の項目までいったらメニューボタンもしくはメニューの先頭にフォーカスが戻るようにする。
引用：【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】 - techlab/baigie

表示・UI

  • すべてのクリッカブル要素にホバーエフェクトを実装する
  • クリッカブル要素のホバー・クリック可能範囲を十分に確保する
  • テキストの折り返し表示を各ブレークポイントで確認する
  • タブレットサイズを含むすべての画面幅で表示崩れがないか確認する
  • 想定外の操作（連続クリック、スクロール中の操作等）でも正常に動作するか確認する
  • 横スクロールが発生しないことを確認する
  • テキストリンクには視認性のためアンダーラインを表示する
  • UI要素を適切な視覚的順序で配置する（例：ハンバーガーメニューはロゴより下）
  • WebP画像は元画像と品質・ファイルサイズを比較してから採用する（場合によってはJPEG/PNGの方が適切なケースもある）

アクセシビリティ

  • 画像には可能な限り適切なalt属性を設定する
  • 装飾的なスペースを含むテキスト（「日　時」等）はスクリーンリーダーで適切に読み上げられないため、aria-labelで代替テキストを提供するか、CSSで調整する
  • 疑似要素で表示する重要なテキストはaria-labelで代替テキストを提供する
  • 使用するライブラリ（Splide等）は日本語ローカライズを設定する
  • カスタムUIコンポーネント（タブ等）には適切なARIA属性を付与する（role、aria-selected、aria-controls、aria-expanded等）
  • すべてのインタラクティブ要素がキーボード操作可能であることを確認する
  • スクリーンリーダーで優先的に読み上げたい要素はHTML上で上部に配置する
  • axe DevToolsでの検証を実施する
  • 外部リンクアイコンは疑似要素ではなくSVGタグで実装し、aria-labelで説明を追加する
  • モーダル等のフォーカストラップは逆方向（Shift+Tab）でも機能することを確認する
  • 自動再生アニメーションには一時停止ボタンを提供する
  • リンクの無効化はhref属性の削除で実装する（tabindex=“-1”やpointer-events: noneより楽に実装できる）

ブラウザ拡大

パンくずリスト

  • <ol>要素を使用する
  • nav要素にaria-label=“パンくずリスト”等を指定する
  • 現在ページにaria-current=“page”を指定する
  • 現在ページの親要素にaria-label=“現在地”等を指定する

パフォーマンス・セキュリティ

  • CSS・JavaScriptファイルを圧縮（minify）・難読化して本番公開する
  • メールアドレス・電話番号はJavaScriptで難読化してスパム対策を行う