When It is not possible to construct the tabular content by using HTML <table> tag for any reason then they are called as custom tables. On the similar lines, when we cannot use the HTML <table> tag then it is obvious that descendants of the HTML table cannot be used. When I say descendants then what does it mean with respect to the HTML <table> tag. The descendants of HTML <table> tag could be <td>, <th> <tr>, <tbody>, <tfooter>, <thead> and so on.. in other words, authors cannot use all the mentioned descendants unless HTML <table> tag is being used to construct the tabular content. Each descendant conveys some or other semantical information to the assistive technology users. Let me talk more about <t> descendant. <td> tag conveys the semantical information to the assistive technology users that it is a cell. Unfortunately, custom tables are constructed with <div> and <span> tags. Divs and spans do not convey the any semantical information to the assistive technology users and this is a problem.
In order to address this problem, aria 1.1 introduced table and cell roles. To provide the semantics to the custom table, author must provide Table role to the entire container. Similarly, to provide the cell semantics in the custom table, author must provide cell role. Cell role is related to gridcell and It is equivalent of HTML <td>. All the context that I made about the tables is related to the static tables but not related to interactive tables. To be very clear and precise, cell role must be used only for static tables that are having table role.
Author notes
- Authors MUST ensure elements with role cell are contained in, or owned by, an element with the role row.
Code snippet
<div id=”foo” role=”table” aria-colcount=”8″>
<div role=”row”>
<span id=”test” role=”cell” aria-colindex=”4″ >test cell</span>
</div>
</div>
References