How to correctly handle table with rows which serves as list opening listed objects by WCAG

Question

I have a list of books displayed as table and javascript code which handles highlight on its rows. When I click some row I can select it, by doubleclick or enter it will open new tab with that book details.

I am wondering how it will be correctly coded by WCAG standards? To be usable by screen readers, e.g. NVDA?

I looked at WCAG standards but I can't find this type of usage.

<table>
<tr>
   <th>Author</th>
   <th>Name</th>
   <th>ISBN</th>
   <th>Year</th>
   <th>Number of Pages</th>
</tr>
<tr>
   <td>John</td>
   <td>How to be awesome</td>
   <td>456987</td>
   <td>1950</td>
   <td>1</td>
</tr>
<tr>
   <td>James</td>
   <td>Two is Two too</td>
   <td>654654</td>
   <td>2010</td>
   <td>520</td>
</tr>
</table>

Right now opening of detail and row focus is handled by JavaScript, user can move through rows using arrows up/down and open detail by Enter.

Should I:

1) add tabIndex to ?

2) add element to row?

3) do not modify table at all and try to edit JS so it can be used by screen reader too?

4) add element to row?

5) anything else?

Answer 1

You should follow the grid pattern as defined in the "WAI-ARIA Authoring Practices 1.1". A grid is a table that you can interact with.

Also note in your code sample, you should have a <th scope="row"> for each row of data. That will help when a screen reader user navigates vertically down a column. It's up to you to decide which cell makes the most sense as a row header. My first choice would be the book name.