アクセシビリティ (a11y)

セマンティック HTML

// セマンティック要素を使用する
<header>       {/* サイトヘッダー */}
<nav>          {/* ナビゲーション */}
<main>         {/* メインコンテンツ - ページごとに1つ */}
<article>      {/* 自己完結したコンテンツ */}
<section>      {/* 見出し付きの主題的なグループ分け */}
<aside>        {/* サイドバーコンテンツ */}
<footer>       {/* サイトフッター */}

// 正しい見出しの階層構造
<h1>ページタイトル</h1>           {/* ページごとに1つ */}
  <h2>セクション</h2>
    <h3>サブセクション</h3>
  <h2>別のセクション</h2>

// ナビゲーション用のリスト
<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">について</a></li>
  </ul>
</nav>

スキップリンク

// components/layout/SkipLink.tsx
ex

...