WebAIM - Web Accessibility In Mind

E-mail List Archives

search results as tables for screen reader users

for

From: Swift, Daniel P.
Date: Oct 15, 2020 6:02AM

Mark:

Warning – I only read your "tldr". In short, absolutely! I haven't done anything with mark-up on table layout in a while, but I think floating each cell left does exactly that. Here's a really good post from CSS Tricks from 2 years ago: https://css-tricks.com/responsive-data-tables/

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Mark Weiler
Sent: Wednesday, October 14, 2020 12:29 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] search results as tables for screen reader users


tldr; can CSS be applied to a table so table cells are stacked to visually appear as a single columned list?


This observation was made by a very proficient screen reader user. It prompted me to look for an answer.
Search is a common feature of most websites. Many search functions return results as a sequence of sections marked with headings. These headings make it easy to navigate with the screen reader's heading navigation functionality.

However, JAWS has a very handy table navigation feature that would make it easier to navigate the results if they were presented as a table. As a table, the columns of each row could also be aurally scanned very quickly. If it was tagged this way, the results would also reflect the tabular nature of items returned from database queries.
My guess, however, is that presenting results in their natural table form would take a lot of horizontal screen space making it difficult to use for sighted users.

Does anyone know if tabular data be styled with CSS to look like a typical results page? This would allow for table navigation by screen reader users while still be usable for sighted users.

Row 1: Cell 1, Cell 2, Cell 3, Cell 4Row 2: Cell 1, Cell 2, Cell 3, Cell 4

Becomes styled to visually appear as a single column list
Row 1: Cell 1Cell 2Cell 3Cell 4

Row 2: Cell 1Cell 2Cell 3Cell 4