WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Mega menus - Headings or no heading?

for

Number of posts in this thread: 5 (In chronological order)

From: Jordan Wilson
Date: Tue, Oct 17 2017 12:23PM
Subject: Mega menus - Headings or no heading?
No previous message | Next message →

Quick inquiry about Navigation buttons that open a mega menu.

For example, 3 buttons each of which opens a large section of navigation options.

Should they be headings or not? (assuming everything else is correct from an a11y standpoint)

Headings introduce the content that follows, but technically a menu is introducing navigation and not content. I have looked around at some popular accessible sites and it seems to be 50/50. Some folks make the button an H1, some an H2 (even though its above the main H1 in the DOM) and some do not make it a heading at all.

Opinions wanted.

Also, an extra credit question:
If the mega menu itself has headings inside it, does that change your opinion at all?

Thanks,
Jordan

From: Birkir R. Gunnarsson
Date: Tue, Oct 17 2017 2:20PM
Subject: Re: Mega menus - Headings or no heading?
← Previous message | Next message →

Jordan
For the bonus question.
If you are using the whole menu/menuitem roles, you can't have
headings inside the menu (the menuitem role overrides any semantic
inside it).
As for the first question, I would just mak it a utton. The user
basically is not able to see the menu except when it is open, so the
page is almost nev;er in a state where a heading is particularly
useful.
There is no harm in putting it in a heading, but there is also limited benefit.


On 10/17/17, Jordan Wilson < = EMAIL ADDRESS REMOVED = > wrote:
> Quick inquiry about Navigation buttons that open a mega menu.
>
> For example, 3 buttons each of which opens a large section of navigation
> options.
>
> Should they be headings or not? (assuming everything else is correct from an
> a11y standpoint)
>
> Headings introduce the content that follows, but technically a menu is
> introducing navigation and not content. I have looked around at some popular
> accessible sites and it seems to be 50/50. Some folks make the button an H1,
> some an H2 (even though its above the main H1 in the DOM) and some do not
> make it a heading at all.
>
> Opinions wanted.
>
> Also, an extra credit question:
> If the mega menu itself has headings inside it, does that change your
> opinion at all?
>
> Thanks,
> Jordan
>
> > > > >


--
Work hard. Have fun. Make history.

From: Maxability
Date: Thu, Oct 19 2017 2:45AM
Subject: Re: Mega menus - Headings or no heading?
← Previous message | Next message →

Jordan,

I assume you want to provide headings within the menu to differentiate sections within the mega menu. I think the menu and menuitem roles already provide that differentiation.
Thanks & Regards
Rakesh

From: Bryan Garaventa
Date: Thu, Oct 19 2017 1:14PM
Subject: Re: Mega menus - Headings or no heading?
← Previous message | Next message →

"I have looked around at some popular accessible sites"

Can you point out which ones you are referencing? Thanks.

Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

From: Bourne, Sarah (MASSIT)
Date: Fri, Oct 20 2017 10:40AM
Subject: Re: Mega menus - Headings or no heading?
← Previous message | No next message

When Mass.Gov first used mega-menus (before ARIA menu or tab patterns could be used) we used headings within the drop-downs. But user testing found that they did not really help anybody, and that some AT/browser combinations included them all in the headings list even when "hidden", which was a terrible experience. Plain old nested lists turned out to be more than adequate.

We also provided separate pages for the mega-menu content, as a fall-back and for user preference. Headings were useful there, because it was the main content, so we kept those.

Very old test data to be sure, but it may still be valid. But the big lesson will always be valid: there's no substitute for user testing.

sb
Sarah E. Bourne
Director of IT Accessibility
Executive Office of Technology Services and Security (EOTSS)
1 Ashburton Place, 8th Floor, Boston, MA 02108
Office: (617) 626-4502
= EMAIL ADDRESS REMOVED = | www.mass.gov/eotss