aria-colspan

aria-colspan 属性は、table や grid、 treegrid 内のセルまたはグリッドセルがまたがる列の数を定義します。

解説

<table> ネイティブ HTML に含まれていない cell および gridcell を対象としており、aria-colspan 属性の値は、table や grid、 treegrid の各セルにまたがる列の数を定義します。

HTML では、<th> 要素と <td> 要素が colspan 属性を持っています。セマンティック <table> を使用する場合は、設計どおりにネイティブ属性である colspan 属性を使用してください。この ARIA 属性は、ネイティブの表に含まれていないセルとグリッドセルを対象としており、<table> 内のセルで使用された場合、無視されます。

メモ: ARIA の使用に関する第一のルールは、「要素を再利用して ARIA のロールや状態、プロパティを追加してアクセシブルにする代わりに、必要なセマンティクスと動作がすでに組み込まれているネイティブ機能を使用できる場合は、そうする」というものです。可能な場合、セマンティックでない要素を ARIA のロールや属性と一緒に使う代わりに、coslpan 属性を使った <th> や <td> を含む <table> を用いてください。

aria-colspan の値は正の整数である必要があります。セル範囲の既定値または想定値は 1 です。含まれる値によって、セルまたはグリッドセルが同じ行の次のセルまたはグリッドセルと重ならないようにし、セルが含まれるテーブル、グリッド、またはツリーグリッドの外側にセルが広がることがないようにします。

例

以下は、ボウリングトーナメントリーグのスコアスプレッドシートの一部の例です。各ゲームは 10 フレームにまたがり、各フレームには 3 つのスコア (2 つのボールと現在の合計) が含まれます。各ゲームの 10 番目 (最後の) フレームは、誰かが全てストライクを取る場合に備えて 4 つの列にまたがります。

html

<div role="grid" aria-rowcount="27" aria-label="Bowling League Scores">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <!--
            aria-rowspanとaria-colspanは、ヘッダーセルが複数の行や列にまたがるとき、正しいデータセルのヘッダー情報を支援技術に提供します。
          -->

      <span role="columnheader" aria-rowspan="2">Team</span>
      <span role="columnheader" aria-colspan="2">Player</span>
      <span role="columnheader" aria-colspan="31">Game 1 Frames</span>
      <span role="columnheader" aria-colspan="31">Game 2 Frames</span>
      <span role="columnheader" aria-colspan="31">Game 3 Frames</span>
      <span role="columnheader" aria-rowspan="2">Total</span>
    </div>
    <div role="row" aria-rowindex="2">
      <span role="columnheader">Last Name</span>
      <span role="columnheader">First Name</span>
      <span role="columnheader" aria-colspan="3">1</span>
      <span role="columnheader" aria-colspan="3">2</span>
      <span role="columnheader" aria-colspan="3">3</span>
      <span role="columnheader" aria-colspan="3">4</span>
      <span role="columnheader" aria-colspan="3">5</span>
      <span role="columnheader" aria-colspan="3">6</span>
      <span role="columnheader" aria-colspan="3">7</span>
      <span role="columnheader" aria-colspan="3">8</span>
      <span role="columnheader" aria-colspan="3">9</span>
      <span role="columnheader" aria-colspan="4">10</span>
      <span role="columnheader" aria-colspan="3">1</span>
      <span role="columnheader" aria-colspan="3">2</span>
      <span role="columnheader" aria-colspan="3">3</span>
      <span role="columnheader" aria-colspan="3">4</span>
      <span role="columnheader" aria-colspan="3">5</span>
      <span role="columnheader" aria-colspan="3">6</span>
      <span role="columnheader" aria-colspan="3">7</span>
      <span role="columnheader" aria-colspan="3">8</span>
      <span role="columnheader" aria-colspan="3">9</span>
      <span role="columnheader" aria-colspan="4">10</span>
      <span role="columnheader" aria-colspan="3">1</span>
      <span role="columnheader" aria-colspan="3">2</span>
      <span role="columnheader" aria-colspan="3">3</span>
      <span role="columnheader" aria-colspan="3">4</span>
      <span role="columnheader" aria-colspan="3">5</span>
      <span role="columnheader" aria-colspan="3">6</span>
      <span role="columnheader" aria-colspan="3">7</span>
      <span role="columnheader" aria-colspan="3">8</span>
      <span role="columnheader" aria-colspan="3">9</span>
      <span role="columnheader" aria-colspan="4">10</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="10">
      <span role="rowheader" aria-rowspan="3">The Mighty Quokkas</span>
      <span role="cell">Henderson</span>
      <span role="cell">Alice</span>
      <span role="cell">7</span>
      <span role="cell">/</span>
      <span role="cell">20</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">39</span>
      <span role="cell">9</span>
      <span role="cell">-</span>
      <span role="cell">48</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">76</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">96</span>
      <span role="cell">8</span>
      <span role="cell">/</span>
      <span role="cell">113</span>
      <span role="cell">7</span>
      <span role="cell">-</span>
      <span role="cell">120</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">146</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">166</span>
      <span role="cell">6</span>
      <span role="cell">/</span>
      <span role="cell">X</span>
      <span role="cell">186</span>
      <span role="cell">7</span>
      <span role="cell">2</span>
      <span role="cell">9</span>
      <span role="cell">6</span>
      <span role="cell">-</span>
      <span role="cell">15</span>
      <span role="cell" aria-colspan="2">X</span>
      <span role="cell">35</span>
      <span role="cell">7</span>
      <span role="cell">/</span>
      …
    </div>
    <div role="row" aria-rowindex="11">
      <span role="cell">McPherson</span>
      <span role="cell">Leslie</span>
      <span role="cell">9</span>
      <span role="cell">-</span>
      <span role="cell">9</span>
      <span role="cell">8</span>
      <span role="cell">1</span>
      <span role="cell">18</span>
      …
    </div>
  </div>
</div>

もし <table> とセマンティックなテーブル要素を使用していた場合、マークアップはより簡潔になり、デフォルトでアクセシブルになっていたでしょう。

値

<integer>: セルがまたがる列の数を定義する、既定値である 1 以上の整数。この値は、セルが同じ行の次のセルと重なる値よりも小さくする必要があります。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-colspan

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年4月19日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

aria-colspan

解説

例

値

関連インターフェイス

関連付けられたロール

仕様書

関連情報

Help improve MDN