WebAIM - Web Accessibility In Mind

E-mail List Archives

Search result table navigation - how to handle sporadic sub-level information?

for

From: Jonathan H
Date: Jul 15, 2019 7:39AM

I spent a large portion of the weekend trying to wrap my head around
how to present information where, in some case, there is sub-level
information.
In most cases, each organisation has one publication, but some have
more. I need to show the basic details, but without clutter.
I quickly gave up with tables - fine if everything has a sub-result,
but it was horrible with this data!

Then I moved on to using a list layout with sub-level li items.
https://find.talking-news.info/find/results2/rotherham/list

I forget where I originally saw this idea, but it was a navigation
hazard, so I'm trying with using heading level navigation, with the h2
and h3 css styled to be inline.
This second offering finds much more favours with testers, but I am
unsure how screenreader users, using h2 to skip to the next result,
would know whether it had child items with h3.
As it is, each result is an h2, UNLESS the result is a parent
organisation, in which case, the child results are then h3.
This is a demo of this second method.
https://find.talking-news.info/find/results2/rotherham/headings

So, lists, headings, or something entirely different?

The links above are "live dev", I've got a small group of "normal VI
end users" (ie: non techy experts) giving me feedback, and I'm
tweaking as I go.
Therefore, it might have changed by Tuesday! Don't use the search box,
as that'll return results from the current (old) page.

At the time of typing, both tests are passing the
http://wave.webaim.org/ and w3 validators.

I'm using PureCSS for responsive grids. I really am trying to keep it
simple, but I think both methods above collapse nicely on mobile
viewports (at least, they do on my Android!)