<article lang="ja">
  <h1>dlっぽい表は本当にdlでいいのか？</h1>

  <p>スクリーンリーダー（Windows NVDA + Chrome）で読み上げて検証します。</p>

  <h2>エントリーNo.1 dl, dt, dd</h2>
  <dl>
    <div class="item">
      <dt>図鑑ナンバー</dt>
      <dd>0143</dd>
    </div>
    <div class="item">
      <dt>タイプ</dt>
      <dd>ノーマル</dd>
    </div>
    <div class="item">
      <dt>説明文</dt>
      <dd>
        1にちに たべものを 400キロ たべないと きが すまない。たべおわると
        ねむってしまう。
      </dd>
    </div>
  </dl>

  <h3>読み上げ結果</h3>
  <pre>
    リスト  6項目  図鑑ナンバー
    0143
    タイプ
    ノーマル
    説明文
    1にちに たべものを 400キロ たべないと きが すまない。たべおわると ねむってしまう。
    リストの外
</pre
  >
  <p>3行あることを伝えたいのに、「6項目」と読まれてしまう。</p>
  <p>また、見出しかどうかもわからない。</p>

  <h2>エントリーNo.2 ul, li</h2>
  <ul>
    <li class="item">
      <h3>図鑑ナンバー</h3>
      <p>0143</p>
    </li>
    <li class="item">
      <h3>タイプ</h3>
      <p>ノーマル</p>
    </li>
    <li class="item">
      <h3>説明文</h3>
      <p>
        1にちに たべものを 400キロ たべないと きが すまない。たべおわると
        ねむってしまう。
      </p>
    </li>
  </ul>

  <h3>読み上げ結果</h3>
  <pre>
    リスト  3項目  見出し    レベル3  図鑑ナンバー
    0143
    見出し    レベル3  タイプ
    ノーマル
    見出し    レベル3  説明文
    1にちに たべものを 400キロ たべないと きが すまない。たべおわると ねむってしまう。
    リストの外
    </pre
  >
  <p>「リスト 3項目」と伝わっている。</p>
  <p>また、h3要素を使用したことで、見出し部分が伝わっている</p>

  <h2>エントリーNo.3 table</h2>
  <table title="カビゴンの情報">
    <tbody>
      <tr class="item">
        <th scope="row">図鑑ナンバー</th>
        <td>0143</td>
      </tr>
      <tr class="item">
        <th scope="row">タイプ</th>
        <td>ノーマル</td>
      </tr>
      <tr class="item">
        <th scope="row">説明文</th>
        <td>
          1にちに たべものを 400キロ たべないと きが すまない。たべおわると
          ねむってしまう。
        </td>
      </tr>
    </tbody>
  </table>

  <h3>読み上げ結果</h3>
  <pre>
    テーブル  3行2列のテーブル  カビゴンの情報
    1行  1列  図鑑ナンバー
    2列  0143
    2行  1列  タイプ
    2列  ノーマル
    3行  1列  説明文
    2列  1にちに たべものを 400キロ たべないと きが すまない。たべおわると ねむってしまう。
    テーブルの外
</pre
  >
  <p>「3行2列」と伝わっている。</p>
  <p>
    また、見出しであるとは読まれないものの、列番号が読まれるので、1列目が見出しだとわかる。
  </p>

  <p>
    また、テーブルは、（Excelを操作するようなイメージで）上下左右に移動することができる。セル移動の場合、対応する見出しセルの内容が合わせて読まれる。
  </p>

  <pre>
    1行  1列  図鑑ナンバー
    2列  0143
    タイプ  2行  ノーマル
    説明文  3行  1にちに たべものを 400キロ たべないと きが すまない。たべおわると ねむってしまう。
    </pre
  >

  <p>
    引用元:
    <a
      href="https://wiki.xn--rckteqa2e.com/wiki/%E3%82%AB%E3%83%93%E3%82%B4%E3%83%B3"
      >カビゴン - ポケモンWiki</a
    >
  </p>
</article>

.item {
  display: grid;
  column-gap: 1rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  @media (min-width: 32em) {
    grid-template-columns: 20% 1fr;  
  }
  &:nth-child(odd) {
    background-color: #eee;
  }
  &:not(:first-child) {
    border-top: none;
  }
  
  * {
    margin: 0;
    text-align: left;
    font-size: 1rem;
    &:first-child {
      font-weight: bold;
    }
  }
}

ul {
  padding: 0;
}

table {
  width: 100%;
}