E-mail List Archives
Thread: Is this Navigation or a Menu? How should it work?
Number of posts in this thread: 10 (In chronological order)
From: Meacham, Steve - FSA, Kansas City, MO
Date: Wed, May 09 2018 7:59AM
Subject: Is this Navigation or a Menu? How should it work?
No previous message | Next message →
Live example of a top-navigation menu: http://usda-fsa.github.io/fsa-style/boilerplate.
The designers of this user interface rely upon default browser keyboard support only, which is TAB, SHIFT-TAB, SPACE, and ENTER. They do not support arrow keys or the escape key, as I would have expected as a keyboard-only user. I recommended following WAI-ARIA Authoring Practices 1.1 for Menus and Menu buttons, but the authors insist that those do not apply, because it is not a menu, but rather that it is "navigation." I don't get it.
First, I was unaware of what they described as an almost religious war about calling this a menu vs calling it navigation. Their claim is that the "navigation" side of this debate is winning or has essentially won.
Second, regardless of what we call it, it utilizes a hierarchy of unordered lists containing links, buttons, and headings. I find it tedious, at best, to use with only a keyboard, and impossible to understand and perceive non-visually using a screen reader. I cannot use JAWS to look at the headings on the page, links on the page, the buttons on the page, the lists on the page, or even the regions on the page, to find the choices available to me. The best I can do is realize that there is a Navigation region, use JAWS to jump to it, then navigate sequentially, item by item, pressing buttons when I find them, which unhide nested lists of more of the same.
Perhaps the worst thing is I have to remember all the steps I took to drill down to a given choice in order to understand it's context, such as what each "Overview" link is for.
But maybe I just have a bad attitude, or my cognitive deficit is due to Multiple Sclerosis, which isn't well-addressed by WCAG, and is just my problem and not a conformance problem. If you're willing and able, please take a look provide me with critical feedback (positive or negative) that I can use with the designers.
Steve Meacham, Digital Accessibility Program Manager
USDA FSA and FPAC +1 (816) 926-1942<tel:+1-816-926-1942>
For program support email = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
Success should not be defined in terms of money, but by helping people to be independent individuals through inclusion.
This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.
From: glen walker
Date: Wed, May 09 2018 8:15AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
I don't know if there's a "war" going on between menus and navigation, but
I agree with your designers in this case. It's essentially a menu of
navigation elements. It's not a menu in the traditional sense like a
desktop app where menus perform some kind of action. In your case, the
menu is taking you to another page so it's performing a navigation instead
of an action on the page.
Tab and Shift+Tab are perfectly valid when I hear the screen reader tell me
I have a list of links.
One thing I would change is not mix links and buttons in the menu. Make
them all links. The items that have a dropdown correctly have
aria-expanded, you should keep that, but change it from a button to a link.
Also, when a link (formerly button) is expanded and shows the submenu, the
Escape key should close the submenu.
They also have a bug that if the submenu is displayed and I tab through the
entire submenu and focus moves back to the main menu, if the next main menu
item is an expandable item, then the submenu (correctly) dismisses. If the
next main menu is not an expandable item, the submenu does *not* dismiss -
that's a bug. For example, expand the "Transaction" menu, tab through the
submenu to "Culpa". The next tab moves to "Reports" and the submenu
disappears. That's correct. Now expand the "Admin" submenu and tab
through "Unilateral". The next tab moves to "Customer" on the main menu
but the submenu does not dismiss.
Glen
On Wed, May 9, 2018 at 7:59 AM, Meacham, Steve - FSA, Kansas City, MO <
= EMAIL ADDRESS REMOVED = > wrote:
> Live example of a top-navigation menu: http://usda-fsa.github.io/fsa-
> style/boilerplate.
>
> The designers of this user interface rely upon default browser keyboard
> support only, which is TAB, SHIFT-TAB, SPACE, and ENTER. They do not
> support arrow keys or the escape key, as I would have expected as a
> keyboard-only user. I recommended following WAI-ARIA Authoring Practices
> 1.1 for Menus and Menu buttons, but the authors insist that those do not
> apply, because it is not a menu, but rather that it is "navigation." I
> don't get it.
>
> First, I was unaware of what they described as an almost religious war
> about calling this a menu vs calling it navigation. Their claim is that
> the "navigation" side of this debate is winning or has essentially won.
>
> Second, regardless of what we call it, it utilizes a hierarchy of
> unordered lists containing links, buttons, and headings. I find it
> tedious, at best, to use with only a keyboard, and impossible to understand
> and perceive non-visually using a screen reader. I cannot use JAWS to look
> at the headings on the page, links on the page, the buttons on the page,
> the lists on the page, or even the regions on the page, to find the choices
> available to me. The best I can do is realize that there is a Navigation
> region, use JAWS to jump to it, then navigate sequentially, item by item,
> pressing buttons when I find them, which unhide nested lists of more of the
> same.
>
> Perhaps the worst thing is I have to remember all the steps I took to
> drill down to a given choice in order to understand it's context, such as
> what each "Overview" link is for.
>
> But maybe I just have a bad attitude, or my cognitive deficit is due to
> Multiple Sclerosis, which isn't well-addressed by WCAG, and is just my
> problem and not a conformance problem. If you're willing and able, please
> take a look provide me with critical feedback (positive or negative) that I
> can use with the designers.
>
> Steve Meacham, Digital Accessibility Program Manager
> USDA FSA and FPAC +1 (816) 926-1942<tel:+1-816-926-1942>
> For program support email = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >
>
> Success should not be defined in terms of money, but by helping people to
> be independent individuals through inclusion.
>
>
>
>
>
> This electronic message contains information generated by the USDA solely
> for the intended recipients. Any unauthorized interception of this message
> or the use or disclosure of the information it contains may violate the law
> and subject the violator to civil or criminal penalties. If you believe you
> have received this message in error, please notify the sender and delete
> the email immediately.
> > > > >
From: Jonathan Cohn
Date: Wed, May 09 2018 8:47AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
very good points here.
Two additional points:
First, it appears on my that there is a Second nav region surrounding the labeled nav region. I didn't look at the code, but I expect a div with role=navigation is enclosing a nav element. If the designers are concerned that older systems won't recognize the nav element that role should be on the nav element.
Secondly, when tabbing around this type of structure using a screen reader (especially if the areas are expanded on focus) it gets very confusing when one has tabbed beyond the last item in the current list as a blind user. Though of course since these are standard lists one can easily use Browse/Vircutal cursor/QuickNav ) to move through / beyond the lists using standard Screen Reader commands so one is not limited to tab / shift tab to navigate around the Navigation region. But there might be an advantage to having an off-screen status like area that gets updated as lists and sub lists are opened and closed.
And in fact I would define this navigation as a navigation area with menus though it is not really a mega-menu or a menubar even though visually in is very close.
A navigation area would not have items that appear / disappear .
Jonathan Cohn
> On May 9, 2018, at 10:15 AM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> I don't know if there's a "war" going on between menus and navigation, but
> I agree with your designers in this case. It's essentially a menu of
> navigation elements. It's not a menu in the traditional sense like a
> desktop app where menus perform some kind of action. In your case, the
> menu is taking you to another page so it's performing a navigation instead
> of an action on the page.
>
> Tab and Shift+Tab are perfectly valid when I hear the screen reader tell me
> I have a list of links.
>
> One thing I would change is not mix links and buttons in the menu. Make
> them all links. The items that have a dropdown correctly have
> aria-expanded, you should keep that, but change it from a button to a link.
>
> Also, when a link (formerly button) is expanded and shows the submenu, the
> Escape key should close the submenu.
>
> They also have a bug that if the submenu is displayed and I tab through the
> entire submenu and focus moves back to the main menu, if the next main menu
> item is an expandable item, then the submenu (correctly) dismisses. If the
> next main menu is not an expandable item, the submenu does *not* dismiss -
> that's a bug. For example, expand the "Transaction" menu, tab through the
> submenu to "Culpa". The next tab moves to "Reports" and the submenu
> disappears. That's correct. Now expand the "Admin" submenu and tab
> through "Unilateral". The next tab moves to "Customer" on the main menu
> but the submenu does not dismiss.
>
> Glen
>
>
> On Wed, May 9, 2018 at 7:59 AM, Meacham, Steve - FSA, Kansas City, MO <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Live example of a top-navigation menu: http://usda-fsa.github.io/fsa-
>> style/boilerplate.
>>
>> The designers of this user interface rely upon default browser keyboard
>> support only, which is TAB, SHIFT-TAB, SPACE, and ENTER. They do not
>> support arrow keys or the escape key, as I would have expected as a
>> keyboard-only user. I recommended following WAI-ARIA Authoring Practices
>> 1.1 for Menus and Menu buttons, but the authors insist that those do not
>> apply, because it is not a menu, but rather that it is "navigation." I
>> don't get it.
>>
>> First, I was unaware of what they described as an almost religious war
>> about calling this a menu vs calling it navigation. Their claim is that
>> the "navigation" side of this debate is winning or has essentially won.
>>
>> Second, regardless of what we call it, it utilizes a hierarchy of
>> unordered lists containing links, buttons, and headings. I find it
>> tedious, at best, to use with only a keyboard, and impossible to understand
>> and perceive non-visually using a screen reader. I cannot use JAWS to look
>> at the headings on the page, links on the page, the buttons on the page,
>> the lists on the page, or even the regions on the page, to find the choices
>> available to me. The best I can do is realize that there is a Navigation
>> region, use JAWS to jump to it, then navigate sequentially, item by item,
>> pressing buttons when I find them, which unhide nested lists of more of the
>> same.
>>
>> Perhaps the worst thing is I have to remember all the steps I took to
>> drill down to a given choice in order to understand it's context, such as
>> what each "Overview" link is for.
>>
>> But maybe I just have a bad attitude, or my cognitive deficit is due to
>> Multiple Sclerosis, which isn't well-addressed by WCAG, and is just my
>> problem and not a conformance problem. If you're willing and able, please
>> take a look provide me with critical feedback (positive or negative) that I
>> can use with the designers.
>>
>> Steve Meacham, Digital Accessibility Program Manager
>> USDA FSA and FPAC +1 (816) 926-1942<tel:+1-816-926-1942>
>> For program support email = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = >
>>
>> Success should not be defined in terms of money, but by helping people to
>> be independent individuals through inclusion.
>>
>>
>>
>>
>>
>> This electronic message contains information generated by the USDA solely
>> for the intended recipients. Any unauthorized interception of this message
>> or the use or disclosure of the information it contains may violate the law
>> and subject the violator to civil or criminal penalties. If you believe you
>> have received this message in error, please notify the sender and delete
>> the email immediately.
>> >> >> >> >>
> > > >
From: glen walker
Date: Wed, May 09 2018 10:46AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
Jonathan, I'm not hearing a second navigation area with either JAWS (on IE
11) or NVDA (on firefox 56 - I don't use Firefox ESR and the latest firefox
doesn't have the fix yet for JAWS).
However, there is an extra label in the code on the <ul>. But since the
<ul> never receives focus, I don't hear the aria-label ("Primary
Navigation"). Is that what you're hearing? What combination AT/browser
are you using?
On Wed, May 9, 2018 at 8:47 AM, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> very good points here.
>
> Two additional points:
> First, it appears on my that there is a Second nav region surrounding the
> labeled nav region. I didn't look at the code, but I expect a div with
> role=navigation is enclosing a nav element. If the designers are concerned
> that older systems won't recognize the nav element that role should be on
> the nav element.
>
From: Jeremy Echols
Date: Wed, May 09 2018 10:48AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
I tend to prefer to use the keyboard, and to me that site navigation is annoying. I'm fairly sure it isn't a failure, though - at least not yet.
I find the "it's navigation" claim absurd, personally, because w3c has an example of a "navigation menubar". Just because it's navigation doesn't mean it can't be presented to the user as a menu. The question is really: what are you aiming to achieve? If you want compliance the easiest way possible, you won't implement a menu. If you want to make the navigation easy to use, figure out what makes it easiest for keyboard users. I am obviously only one data point, but for me, I like dropdowns which show a bunch of options to work with up/down arrow keys, close on ESC, etc.
To Glen's point, a menu can be used to perform actions or change the view in a traditional desktop app - I'm not sure why there's a perception that menus don't take you to a different place or show you different information. In the desktop world, hyperlinking to other "documents" is far less common, but a menu can certainly take you from one view to another, or change what you look at. In Firefox, in fact, the History menu allows you to do exactly that.
From: Jeremy Echols
Date: Wed, May 09 2018 10:51AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
Why would you push for links over buttons? It seems like buttons are about changing state while links are about changing what you're looking at: http://w3c.github.io/aria-practices/#button and http://w3c.github.io/aria-practices/#link. Maybe I'm misreading this, but that's been my approach generally.
From: glen walker
Date: Wed, May 09 2018 11:01AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
Good question, Jeremy. I would do it mainly for consistency. Having a
menu toggle between links and buttons in the same menu is cognitively
distracting.
On Wed, May 9, 2018 at 10:51 AM, Jeremy Echols < = EMAIL ADDRESS REMOVED = > wrote:
> Why would you push for links over buttons? It seems like buttons are
> about changing state while links are about changing what you're looking at:
> http://w3c.github.io/aria-practices/#button and http://w3c.github.io/aria-
> practices/#link. Maybe I'm misreading this, but that's been my approach
> generally.
>
>
From: Jeremy Echols
Date: Wed, May 09 2018 11:22AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
Ah, because at the top level they aren't all buttons. The navigation menu I had in mind was one we built where everything at the top was a dropdown.
This is an interesting problem; I'm not sure where I stand anymore. Meh.
From: Jonathan Cohn
Date: Wed, May 09 2018 12:02PM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | Next message →
Thanks my fault at not actually reviewing code. Probably should be that the aria name "Primary" should be assigned to the <nav>
What VoiceOver on Macintosh 10.11 indicates while reading by DOM mode:
navigation 1 item
group primary navigation 6 items
If the UL had ben marked as navigation as I thought, I believe that VoiceOver would have said:
Navigation Primary 6 items
Sorry for the confusion,
Jonathan
I reviewed with VoiceOver on my Macintosh running 10.11 (probably should have checked 10.13 also, but that box is is not where I am). There appears to be a
> On May 9, 2018, at 12:46 PM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> Jonathan, I'm not hearing a second navigation area with either JAWS (on IE
> 11) or NVDA (on firefox 56 - I don't use Firefox ESR and the latest firefox
> doesn't have the fix yet for JAWS).
>
> However, there is an extra label in the code on the <ul>. But since the
> <ul> never receives focus, I don't hear the aria-label ("Primary
> Navigation"). Is that what you're hearing? What combination AT/browser
> are you using?
>
>
> On Wed, May 9, 2018 at 8:47 AM, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
>
>> very good points here.
>>
>> Two additional points:
>> First, it appears on my that there is a Second nav region surrounding the
>> labeled nav region. I didn't look at the code, but I expect a div with
>> role=navigation is enclosing a nav element. If the designers are concerned
>> that older systems won't recognize the nav element that role should be on
>> the nav element.
>>
> > > >
From: lynn.holdsworth
Date: Thu, May 10 2018 7:27AM
Subject: Re: Is this Navigation or a Menu? How should it work?
← Previous message | No next message
Hi Steve,
If this widget has submenus pop up, to me that makes it a menu. From a personal perspective, I prefer that widgets like this behave like their desktop counterparts: only one focusable item at a time, reached by means of the arrow keys, with successive submenus closed by pressing the Esc key.
Cheers.