E-mail List Archives
Thread: Making this type of navigation accessible
Number of posts in this thread: 6 (In chronological order)
From: L Snider
Date: Fri, Apr 10 2015 11:29AM
Subject: Making this type of navigation accessible
No previous message | Next message →
Hi Everyone,
I was looking at a navigation structure on this page:
http://demo.accesstomemory.org/chelmsford-womens-institute-2
I think most people call this navigation structure, a treeview.
It creates the list 'dynamically' so you don't see everything at once. The
structure may be problematic with screen readers, on mobile in
particular...They can't get to the levels below the file level (ie: Plants
is okay, but nothing under that shows), and they may not be able to get to
the levels that are 'hidden' (one presses the little icon with the ...) .
Any ideas on how to make this more accessible?
I believe this is one way to do it?
http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
I have not worked with this nav style before, so any advice or
recommendations would be hugely appreciated!
Cheers
Lisa
From: _mallory
Date: Sat, Apr 11 2015 1:24AM
Subject: Re: Making this type of navigation accessible
← Previous message | Next message →
As a note, the only way I can even get my focus into the page is to
try to right-click or hold-button-mouse-click a focusable on the page
so I can tab further. I have not discovered how to otherwise get past
the header on that page, with the radio buttons.
_mallory
On Fri, Apr 10, 2015 at 12:29:01PM -0500, L Snider wrote:
> Hi Everyone,
>
> I was looking at a navigation structure on this page:
> http://demo.accesstomemory.org/chelmsford-womens-institute-2
>
> I think most people call this navigation structure, a treeview.
>
> It creates the list 'dynamically' so you don't see everything at once. The
> structure may be problematic with screen readers, on mobile in
> particular...They can't get to the levels below the file level (ie: Plants
> is okay, but nothing under that shows), and they may not be able to get to
> the levels that are 'hidden' (one presses the little icon with the ...) .
>
> Any ideas on how to make this more accessible?
>
> I believe this is one way to do it?
> http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
>
> I have not worked with this nav style before, so any advice or
> recommendations would be hugely appreciated!
>
> Cheers
>
> Lisa
> > > >
From: Ryan E. Benson
Date: Sat, Apr 11 2015 11:41AM
Subject: Re: Making this type of navigation accessible
← Previous message | Next message →
I have the same experience. I get stuck in the search box, I cannot even
access the radio buttons
--
Ryan E. Benson
On Sat, Apr 11, 2015 at 3:24 AM, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> As a note, the only way I can even get my focus into the page is to
> try to right-click or hold-button-mouse-click a focusable on the page
> so I can tab further. I have not discovered how to otherwise get past
> the header on that page, with the radio buttons.
>
> _mallory
>
> On Fri, Apr 10, 2015 at 12:29:01PM -0500, L Snider wrote:
> > Hi Everyone,
> >
> > I was looking at a navigation structure on this page:
> > http://demo.accesstomemory.org/chelmsford-womens-institute-2
> >
> > I think most people call this navigation structure, a treeview.
> >
> > It creates the list 'dynamically' so you don't see everything at once.
> The
> > structure may be problematic with screen readers, on mobile in
> > particular...They can't get to the levels below the file level (ie:
> Plants
> > is okay, but nothing under that shows), and they may not be able to get
> to
> > the levels that are 'hidden' (one presses the little icon with the ...) .
> >
> > Any ideas on how to make this more accessible?
> >
> > I believe this is one way to do it?
> >
> http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
> >
> > I have not worked with this nav style before, so any advice or
> > recommendations would be hugely appreciated!
> >
> > Cheers
> >
> > Lisa
> > > > > > > > > > > > >
From: L Snider
Date: Mon, Apr 13 2015 6:33AM
Subject: Re: Making this type of navigation accessible
← Previous message | Next message →
Hi Ryan and _mallory,
Argh! Thanks for trying. I found the same with my testing this weekend. I
will have to figure out how to show you this example, without that top
piece getting in the way.
Cheers
Lisa
On Sat, Apr 11, 2015 at 12:41 PM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >
wrote:
> I have the same experience. I get stuck in the search box, I cannot even
> access the radio buttons
>
> --
> Ryan E. Benson
>
> On Sat, Apr 11, 2015 at 3:24 AM, _mallory < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > As a note, the only way I can even get my focus into the page is to
> > try to right-click or hold-button-mouse-click a focusable on the page
> > so I can tab further. I have not discovered how to otherwise get past
> > the header on that page, with the radio buttons.
> >
> > _mallory
> >
> > On Fri, Apr 10, 2015 at 12:29:01PM -0500, L Snider wrote:
> > > Hi Everyone,
> > >
> > > I was looking at a navigation structure on this page:
> > > http://demo.accesstomemory.org/chelmsford-womens-institute-2
> > >
> > > I think most people call this navigation structure, a treeview.
> > >
> > > It creates the list 'dynamically' so you don't see everything at once.
> > The
> > > structure may be problematic with screen readers, on mobile in
> > > particular...They can't get to the levels below the file level (ie:
> > Plants
> > > is okay, but nothing under that shows), and they may not be able to get
> > to
> > > the levels that are 'hidden' (one presses the little icon with the
> ...) .
> > >
> > > Any ideas on how to make this more accessible?
> > >
> > > I believe this is one way to do it?
> > >
> >
> http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
> > >
> > > I have not worked with this nav style before, so any advice or
> > > recommendations would be hugely appreciated!
> > >
> > > Cheers
> > >
> > > Lisa
> > > > > > > > > > > > > > > > > > > > > >
> > > > >
From: _mallory
Date: Mon, Apr 13 2015 11:12AM
Subject: Re: Making this type of navigation accessible
← Previous message | Next message →
I understand that that top is not actually part of the page, but part
of the hosting... whenever the page gets moved to its proper home
that bit ought to go away on its own.
As for advice, I believe there is now a working aria-ised tree example
over at... I think it was open ajax alliance. They use little plusses
and minusses but you can keep the arrows just fine.
http://www.oaa-accessibility.org/example/41/
One problem they have here, besides a possible issue with VoiceOver,
is that mouse users seem to need to double-click? Which made me think
at first that the mouse didnd't work at all at first. And on the other
hand, most of our clients double-click on many things (but not anchors
or X close buttons) and only user-testing would show if they tried
single or double-clicking here.
Bryan has something on the whatsock site, and it's single-clicked:
http://whatsock.com/modules/aria_tree_from_xml_module/demo.htm
If Javascript is not the strong suit, you could do it backwards:
start with something like jQuery's Bonsai, then add in any missing
keyboard focus and uses, aria-states, etc. I've done similar with
plugins that were more complicated than anything I could write from
scratch.
_mallory
On Mon, Apr 13, 2015 at 07:33:01AM -0500, L Snider wrote:
> Hi Ryan and _mallory,
>
> Argh! Thanks for trying. I found the same with my testing this weekend. I
> will have to figure out how to show you this example, without that top
> piece getting in the way.
>
> Cheers
>
> Lisa
From: L Snider
Date: Tue, Apr 14 2015 6:11AM
Subject: Re: Making this type of navigation accessible
← Previous message | No next message
Hi _mallory,
Thanks so much, that was very helpful. Appreciate it!
Cheers
Lisa
On Mon, Apr 13, 2015 at 12:12 PM, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> I understand that that top is not actually part of the page, but part
> of the hosting... whenever the page gets moved to its proper home
> that bit ought to go away on its own.
>
> As for advice, I believe there is now a working aria-ised tree example
> over at... I think it was open ajax alliance. They use little plusses
> and minusses but you can keep the arrows just fine.
>
> http://www.oaa-accessibility.org/example/41/
>
> One problem they have here, besides a possible issue with VoiceOver,
> is that mouse users seem to need to double-click? Which made me think
> at first that the mouse didnd't work at all at first. And on the other
> hand, most of our clients double-click on many things (but not anchors
> or X close buttons) and only user-testing would show if they tried
> single or double-clicking here.
>
> Bryan has something on the whatsock site, and it's single-clicked:
> http://whatsock.com/modules/aria_tree_from_xml_module/demo.htm
>
> If Javascript is not the strong suit, you could do it backwards:
> start with something like jQuery's Bonsai, then add in any missing
> keyboard focus and uses, aria-states, etc. I've done similar with
> plugins that were more complicated than anything I could write from
> scratch.
>
> _mallory
> On Mon, Apr 13, 2015 at 07:33:01AM -0500, L Snider wrote:
> > Hi Ryan and _mallory,
> >
> > Argh! Thanks for trying. I found the same with my testing this weekend. I
> > will have to figure out how to show you this example, without that top
> > piece getting in the way.
> >
> > Cheers
> >
> > Lisa
> > > > >