WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Andrews, David B (DEED)
Date: Jul 15, 2019 9:01AM

I think the headings method works well. As a screen reader user, I tend to use the h key in JAWS for headings, instead of specific heading levels. It is quick, and accounts for your situation well -- with both level 2 and level 3 headings.

Dave



David Andrews | Chief Technology Officer
Minnesota Department of Employment and Economic Development
State Services for the Blind
2200 University Ave West, Suite 240, St. Paul MN 55114
Direct: 651-539-2294
Web | Twitter | Facebook



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jonathan H
Sent: Monday, July 15, 2019 8:39 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Search result table navigation - how to handle sporadic sub-level information?

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://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffind.talking-news.info%2Ffind%2Fresults2%2Frotherham%2Flist&amp;data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&amp;sdata=sPvkczLVvOD9%2BZVTKLX56w4saCxe2hvBCaG3v2sJ8O0%3D&amp;reserved=0

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://gcc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffind.talking-news.info%2Ffind%2Fresults2%2Frotherham%2Fheadings&amp;data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&amp;sdata=6d2NhmoouaHHWGs0iY23XzEPWkCz%2BAILM5u0GnjbRuQ%3D&amp;reserved=0

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
https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwave.webaim.org%2F&amp;data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&amp;sdata=Dj3zjHuxhwZa4JOJgjDAAputzHWHhLKaDfitxUn%2FhBo%3D&amp;reserved=0 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!)