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 attributesMost of the table layouting behavior can be achieved by leveraging the display property. However there is no equivalent for colspan and rowspan
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 |
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 |
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 |
Cell 1-1 | Cell 1-3 | |
Cell 2-1 | Cell 2-2 | Cell 2-3 |
Cell 3-1 | Cell 3-2 |