Using element instead of to get clickable rows

Question

I want to create clickable rows in an html table. Each row should be a link leading to a different page. I can of course add onclick handler, but that will create kind of a crappy UI - poor accessibility, no keyboard navigation, no right/middle click...

I found a better way to do it. Instead of using normal table element, force divs to act as different table tags through css display rules. And for rows, use a-s, with appropriate href attribute.

Here's what I mean:

  .table {
    display: table;
    border-collapse: collapse;
    font-family: sans-serif;
    width: 100%;
  }
  .thead {
    display: table-header-group;
  }
  .tbody {
    display: table-row-group;
  }
  .td, .th {
    display: table-cell;
    padding: 5px 10px;
    text-align: center;
  }
  .tr {
    display: table-row;
  }
  .thead > .tr {
    background: #ccc;
    color: #555;
  }
  a.tr {
    text-decoration: none;
    color: black;
  }
  a.tr:hover {
    background: #eee;
    cursor: pointer;
  }

  <div class="table">
    <div class="thead">
      <div class="tr">
        <div class="th">ID</div>
        <div class="th">Name</div>
      </div>
    </div>
    <div class="tbody">
      <a class="tr" href="524.html">
        <div class="td">524</div>
        <div class="td">John Smith</div>
      </a>
      <a class="tr" href="331.html">
        <div class="td">331</div>
        <div class="td">Miles Corner</div>
      </a>
    </div>
  </div>

Note how rows are clickable, you can tab through them and there is a nice tooltip showing link you will go to. Much better than onclick.

If I use a framework like React, I don't even have to replace all elements with div-s. I can just add <a> tags instead of <tr>s and it will work.

My question is, what's the catch? What am I missing? Is there some accessibility, browser compatibility, or other reason not to do this?

There is https://codereview.stackexchange.com/ for this kind of questions, just an FYI, I don't see any real question regarding solving some problem in your code here. — ikiK, Apr 09 '21 at 23:41
There are a lot of catches! For example I can't navigate between cells using arrow keys in a screen reader as this isn't a table. Also no column headers or row headers exist so it would be very confusing if you had more than two "columns" (in an actual table you would hear "row 2, ID 524, Name John Smith".) You may find [this answer I gave](https://stackoverflow.com/a/64789744/2702894) covers some of the points of clickable rows and then if you have other questions then let me know and I can expand them into an answer. As it stands the only advice I can give is "please don't do this!" — GrahamTheDev, Apr 10 '21 at 00:01
@GrahamRitchie thanks, that's a very good answer you linked to. — panta82, Apr 11 '21 at 17:16

score 1 · Accepted Answer · answered Apr 11 '21 at 12:09

There are some catches, and I would suggest another UI pattern that is more accessible and more versatile:

Use the cells with the primary key (or the most important information for the user), to place an <a> around it's text. In your case, this would probably be the Name-column.

<td><a href="…">John Simth</a></td>

This not only solves your issue with accessibility, but also with other design considerations that we typically have in tables.

For accessibility, no table structure is exposed in your solution. This could be fixed by means of aria-role, but it's not recommended and support might vary. This structure is important to navigate inside the table, usually by means of arrow keys (grid navigation)
Relations between table data TD and table headers TH are not marked up. This might not be critical in your example, as names are obvious, but with more data it becomes very important
Any element that is interactive, like links, needs to be focusable. By means of the tab key you can navigate to it and then activate it with Space or Enter
This focus needs to be visually obvious (you could add a .tr:focus class and style your row differently)
If you add checkboxes to your table rows, these need to be focusable, too. So by providing a classic link, you'll be compatible.
A classical table row does not provide an affordance that would make the user intuitively click on it. A link does and is widely understood

Ok, that makes sense. As you suggested, I think I'll have one of the cells contain a link for screen reader users, and make table rows clickable to achieve the same action for the rest. Thanks. — panta82, Apr 11 '21 at 17:18

Using element instead of to get clickable rows

1 Answers1