E-mail List Archives
Thread: Search result table navigation - how to handle sporadic sub-level information?
Number of posts in this thread: 4 (In chronological order)
From: Jonathan H
Date: Mon, Jul 15 2019 7:39AM
Subject: Search result table navigation - how to handle sporadic sub-level information?
No previous message | Next message →
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!)
From: Andrews, David B (DEED)
Date: Mon, Jul 15 2019 9:01AM
Subject: Re: Search result table navigation - how to handle sporadic sub-level information?
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Jonathan H
Sent: Monday, July 15, 2019 8:39 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=sPvkczLVvOD9%2BZVTKLX56w4saCxe2hvBCaG3v2sJ8O0%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=6d2NhmoouaHHWGs0iY23XzEPWkCz%2BAILM5u0GnjbRuQ%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=Dj3zjHuxhwZa4JOJgjDAAputzHWHhLKaDfitxUn%2FhBo%3D&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!)
From: Jim Allan
Date: Mon, Jul 15 2019 9:08AM
Subject: Re: Search result table navigation - how to handle sporadic sub-level information?
← Previous message | Next message →
to clarify a bit (perhaps its the monday and not enough coffee)
moving with the 'h' key - moves from heading to heading in source code
order and announces each heading level.
screenreaders have the ability to jump to next specified heading level at
any time or move between only a specific heading levels (read only H2s)
I agree with David. Heading should meet your need, and be operable and
understandable to screen reader users. an explanatory sentence at the top
might be helpful, also.
Jim
On Mon, Jul 15, 2019 at 10:01 AM Andrews, David B (DEED) <
= EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED = ] On
> Behalf Of Jonathan H
> Sent: Monday, July 15, 2019 8:39 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=sPvkczLVvOD9%2BZVTKLX56w4saCxe2hvBCaG3v2sJ8O0%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=6d2NhmoouaHHWGs0iY23XzEPWkCz%2BAILM5u0GnjbRuQ%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=Dj3zjHuxhwZa4JOJgjDAAputzHWHhLKaDfitxUn%2FhBo%3D&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!)
> > > https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=drd5y9MWUs4iMgEwbVjOyF%2BbEWEZi42QE8nwUQUHW%2BM%3D&reserved=0
> List archives at
> https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=uDuZoBdqm7IDF46GAKGLWYuSKdi8IIdKxBcx%2B8lyC4U%3D&reserved=0
> > > > > >
--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Jonathan H
Date: Mon, Jul 15 2019 1:42PM
Subject: Re: Search result table navigation - how to handle sporadic sub-level information?
← Previous message | No next message
Thank you, Jim and David. More feedback confirms the preference for
headings, so I've inserted a bit of screenreader-only guidance.
I originally put "has publications listed under heading level three" but
then it got confusing as it said " under heading level three level 2".
A little bit of tidying up, and then I'll let it settle for a day or two
and see what other feedback comes in.
Thanks again!
Jonathan
On Mon, 15 Jul 2019 at 16:07, Jim Allan < = EMAIL ADDRESS REMOVED = > wrote:
> to clarify a bit (perhaps its the monday and not enough coffee)
> moving with the 'h' key - moves from heading to heading in source code
> order and announces each heading level.
> screenreaders have the ability to jump to next specified heading level at
> any time or move between only a specific heading levels (read only H2s)
> I agree with David. Heading should meet your need, and be operable and
> understandable to screen reader users. an explanatory sentence at the top
> might be helpful, also.
>
> Jim
>
> On Mon, Jul 15, 2019 at 10:01 AM Andrews, David B (DEED) <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > 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 ADDRESS REMOVED = ] On
> > Behalf Of Jonathan H
> > Sent: Monday, July 15, 2019 8:39 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=sPvkczLVvOD9%2BZVTKLX56w4saCxe2hvBCaG3v2sJ8O0%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=6d2NhmoouaHHWGs0iY23XzEPWkCz%2BAILM5u0GnjbRuQ%3D&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&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=Dj3zjHuxhwZa4JOJgjDAAputzHWHhLKaDfitxUn%2FhBo%3D&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!)
> > > > > >
> https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=drd5y9MWUs4iMgEwbVjOyF%2BbEWEZi42QE8nwUQUHW%2BM%3D&reserved=0
> > List archives at
> >
> https://gcc01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data=02%7C01%7Cdavid.b.andrews%40state.mn.us%7C1152d3ab368b459af5fa08d70929e8eb%7Ceb14b04624c445198f26b89c2159828c%7C0%7C0%7C636987947916386542&sdata=uDuZoBdqm7IDF46GAKGLWYuSKdi8IIdKxBcx%2B8lyC4U%3D&reserved=0
> > > > > > > > > > > >
>
>
> --
> Jim Allan, Accessibility Coordinator
> Texas School for the Blind and Visually Impaired
> 1100 W. 45th St., Austin, Texas 78756
> voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
> > > > >