OPAC's search results use of nested tables create page navigation issues for screen reader users

Bug #1467645 reported by Yamil
26
This bug affects 5 people
Affects Status Importance Assigned to Milestone
Evergreen
Confirmed
Undecided
Unassigned

Bug Description

A faculty member that uses a screen reader to browse our catalog alerted me that the use of nested tables in the OPAC search results cause navigation problems for him. As well as other users of screen readers. I suspect that this issue has existed since we switched to TPAC from JSPAC, but that is only a guess.

After executing a search in the OPAC the URL changes to the URL "/eg/opac/results." In the displayed results page, each item displayed belongs to a cell of an HTML table. Then inside each result item's cell, there is another table with the HTML title of "Record Holdings Summary." This nested table summary holdings content can be quite hard for patrons using screen readers to access. The difficulty arises in being able to navigate inside or escape out of this inner holdings summary table. This is because it becomes extremely hard for the screen reader software figure out if you, for example, want to navigate to the next table row in the inner table or the outer table. So navigation inside the inner table can be really dificult.

The problem gets much worse when the OPAC is displaying the "Show More Details" version of the holdings summary nested table. In that version of the results page, you end up with additional columns and rows inside the nested table, and the additional rows and column make it even harder for screener eager using patrons to navigate successfully.

When working with this faculty member, we tested the EG catalog using JAWS and the OS X's Voiceover to replicate the navigation bug.

My basic understanding of accessibility best practices tells me that we might either want to switch the inner holdings table to use div's instead of tables. Alternatively we can switch the main outer table to use div's instead of a table, and we could keep using a table for the inner holdings summery information. In theory we may want to consider abandoning the use of tables in the results sections altogether. Though the information typically displayed in the summary holdings is the usual textbook use of HTML tables.

I wonder what others think? Can others replicate the issue?

Thanks.

Yamil (ysuarez)
tags: added: accessibility
Revision history for this message
Jane Sandberg (sandbergja) wrote :

I agree that we should move away from tables, or at least make it clearer that these tables are layout tables, not data tables. This would consist, at the very least, of removing the <thead> elements that are currently present. This article is a very good read about the accessibility implications of layout vs. data tables: https://webaim.org/techniques/tables/

I think that our colleagues in the Blacklight Community have a pretty good solution to this in their search pages, btw. They use divs, and for key/value metadata pairs in the individual search results, they use defined lists: http://libfind.linnbenton.edu/?search_field=all_fields&q=cat&show_articles=false

Revision history for this message
Jane Sandberg (sandbergja) wrote :

Related bug in the Web staff client: https://bugs.launchpad.net/evergreen/+bug/1615781

Revision history for this message
Jane Sandberg (sandbergja) wrote :

Here's a relevant presentation that advocates *for* tables as an accessible solution for results pages: http://bit.ly/2mflxWc

Revision history for this message
Yamil (ysuarez) wrote :

Jane, I am having trouble reading the presentation on my end, so I don't know what the presentation is advocating yet.

For the record my main concerns in writing this bug was not that HTML tables are bad for accessibility. My concern was that EG currently uses around 2-4 nested tables in the results UI, and the visually impaired professor told me this was a terrible practice.

Again, I will we what I can do to access the presentation in another way so I can learn from it, but out of caution wanted to make my point more clear in case it wasn't before.

Revision history for this message
Jane Sandberg (sandbergja) wrote :

Agreed about the nested tables. The example in the presentation has -- in my understanding -- a non-nested table with only 4 <td> fields for each search result. I'll ask the presenter to see if I can learn more about her solution.

tags: added: opac
Changed in evergreen:
status: New → Confirmed
Revision history for this message
Jane Sandberg (sandbergja) wrote :

A note that even with the bootstrap OPAC, the search results page still contains nested tables when you "show more details".

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Since the holdings summary needs to remain a table, the solution here is to use CSS grid layout instead of the outer table: https://wiki.evergreen-ils.org/doku.php?id=newdevs:grid

To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.