WAI-ARIA: aria-colspan (Property)
Description
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-colindex and aria-rowspan.
This attribute is intended for cells and gridcells which are not contained in a native table. When defining the column span of cells or gridcells in a native table, authors SHOULD use the host language’s attribute instead of aria-colspan. If aria-colspan is used on an element for which the host language provides an equivalent attribute, user agents MUST ignore the value of aria-colspan and instead expose the value of the host language’s attribute to assistive technologies.
Authors MUST set the value of aria-colspan to an integer greater than or equal to 1 and less than the value which would cause the cell or gridcell to overlap the next cell or gridcell in the same row.
Browser Compatibility For aria-colspan
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaColSpan | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
aria-colspan Example
HTML Example
Example of spanned cells in a table having missed column
<div role="table" aria-colcount="4">
<div role="row">
<div role="cell" aria-colindex="1" aria-colspan="2">
cell 1
</div>
<div role="cell" aria-colindex="4">
cell 4
</div>
</div>
<div role="row">
<div role="cell" aria-colindex="1" aria-colspan="2">
cell 1
</div>
<div role="cell" aria-colindex="2">
cell 2
</div>
<div role="cell" aria-colindex="4">
cell 4
</div>
</div>
</div>
Characteristics
Used in Roles
Inherits into Roles
Value
- integer
- A numerical value without a fractional component.
Semantic HTML
Use the HTML “colspan” attribute.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td
colspan=”2″>Sum: $180</td>
</tr>
</table>
Reference
- W3C (opens new window)
- MDN Web Docs