Testing Accessibility of Table and ARIA role grid

This is a grid example I have taken from GitHub (visiongeist)

This page uses custom-elements (not registered on the document!) with ARIA attributes. Trying to achieve the same level of accessibility as a native table.

Used ARIA roles

Used ARIA attributes

CSS

Most of the table layouting behavior can be achieved by leveraging the display property. However there is no equivalent for colspan and rowspan

Trivial (Example A)

Table

Cell 1-1 Cell 1-2 Cell 1-3
Cell 2-1 Cell 2-2 Cell 2-3
Cell 3-1 Cell 3-2 Cell 3-3

Grid

first column second column third column Cell 2-1 Cell 2-2 Cell 2-3 Cell 3-1 Cell 3-2 Cell 3-3

With head, body, foot (Example B)

Table

Column head 1 Column head 2 Column head 3
Column foot 1 Column foot 2 Column foot 3
Cell 1-1 Cell 1-2 Cell 1-3
Cell 2-1 Cell 2-2 Cell 2-3
Cell 3-1 Cell 3-2 Cell 3-3

Grid

Column head 1 Column head 2 Column head 3 Column foot 1 Column foot 2 Column foot 3 Cell 1-1 Cell 1-2 Cell 1-3 Cell 2-1 Cell 2-2 Cell 2-3 Cell 3-1 Cell 3-2 Cell 3-3

With Caption (Example C)

Table

This is the table's caption
Cell 1-1 Cell 1-2 Cell 1-3
Cell 2-1 Cell 2-2 Cell 2-3
Cell 3-1 Cell 3-2 Cell 3-3

Grid

This is the table's caption Cell 1-1 Cell 1-2 Cell 1-3 Cell 2-1 Cell 2-2 Cell 2-3 Cell 3-1 Cell 3-2 Cell 3-3

Using rowspan and colspan (Example D)

Table

Cell 1-1 Cell 1-3
Cell 2-1 Cell 2-2 Cell 2-3
Cell 3-1 Cell 3-2

Grid

Cell 1-1 Cell 1-3 Cell 2-1 Cell 2-2 Cell 2-3 Cell 3-1 Cell 3-2