How to make tables accessible

Question

The main issue is that if some cells are NOT clickable and others are, then it will be a poor user experience if user tries to click on the cell and nothing happens.

I need some help in writing labels for screen reader. The issue we have is that not all elements within the table are clickable, so how does this work? How can it be made user friendly if user thinks that one item is clickable and then it's not, unless we create a label for every cell?

Answer 1

To explain this simply, I think you need to distinguish the elements that are interactive i.e. clickable from the one's that are just plain text. That can be done by giving different colors to clickable vs non-clickable elements, or underlining the clickable one.

As I see in your shared screenshot, all the elements look alike and are blue, ofcourse in this case it will be difficult to distinguish elements and this confusion will impact the UX. Better stick to basic standard in this case, this isn't a big problem and can be sorted out quite easily.

See how in this picture you can easily distinguish elements between the clickable and non-clickable ones.

Answer 2

If some of the table cells expect input

How this can be done has been documented in the W3C's WAI-ARIA Authoring Practices 1.1, more specifically in the chapter describing the grid role, which you apply to the table element. That chapter has associated examples for data grids.

I suggest that you take a closer look at Example 2: Sortable Data Grid With Editable Cells and its source code. This table contains both editable and non-editable cells. If you navigate the example table, you will see that you can use both the tab keys to move between keyboard-focusable elements and the arrow keys to move between rows and cells (which is different from what you expect in non-interactive tables). In the source code, you will notice that the editable cells contain both a span element and either a button or an input element.

Obviously, the code also relies on JavaScript. Tip: if you go to the data grid examples for the current draft of WAI-ARIA Authoring Practices 1.2, you will find links to code on CodePen, e.g. for the second example, so you can play around with the code on that site.

If the table only contains links

There is no need for labels; ordinary table markup is sufficient and no WAI-ARIA attributes are necessary.