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
| 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
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-colspan. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-colspan.
