News for hackers. Stuff that matters.
Re:Accessible hamburger buttons without JavaScript by at-fates-hands on Friday January 27, 2023 @11:36AM (#34548021)
I'm an accessibility engineer and hamburger menus on mobile are almost always completely inaccessible. A majority of the time they need to be fixed in order to accommodate visually impaired users or users who depend on VoiceOver or other screen reading technologies. Its practically a default issue at this point.
Re:Accessible hamburger buttons without JavaScript by mixmastamyk on Friday January 27, 2023 @12:14PM (#34548636)
What is the preferred design?
Re:Accessible hamburger buttons without JavaScript by at-fates-hands on Friday January 27, 2023 @01:23PM (#34549709)
I don't think the org that I work for has really found it.

Enlarging the menu so its easier to find with screen reader tools like TalkBack and VoiceOver has been somewhat effective. However, if you have split menu's, login, search and other features, you start running into complex design issues with where to put all of those and whether you want to stuff them all in the mobile menu, outside the menu or a combination of the two. When you start putting features like search and login into the mobile menu, that also creates more accessibility issues as well.

Designing for accessibility can get really complex, really fast and I'm not sure there's really a solid design pattern yet that addresses all of the issues we're seeing now.

I know that's not a great answer, but it just highlights the complexity of designing for accessibility.

Re:Accessible hamburger buttons without JavaScript by deltarholamda on Friday January 27, 2023 @01:45PM (#34550001)
I prefer an actual menu. Not one of the deeply nesting, expands on rollover sorts of menus (about half of them disappear if you mis-mouse out), but just a handful of clickable text buttons or whatever that hit the major navigation points.

BigCorps Inc. don't like these, because each menu choice has 3 departments and 14 sub-departments that mate-guard their particular menu area, so designers just give up on mobile and hide it all behind the hamburger icon.

It's absolutely daft. Your Web site should be an extra employee, never-tiring, always at work, facilitating the customer or visitor's needs. It's really weird, but depressingly predictable.

Re:Accessible hamburger buttons without JavaScript by layer8 on Friday January 27, 2023 @02:03PM (#34550219)
Look at the top of this very page. That design works quite well.
Re:Accessible hamburger buttons without JavaScript by micahdeath on Friday January 27, 2023 @09:14PM (#34554415)
Simplify the navigation. Do you really need a "Start Menu" on a web page? (Sorry, I think Hamburger menus are start menus.)
Re:Accessible hamburger buttons without JavaScript by patriciaaa on Friday February 03, 2023 @03:14PM (#34647106)
A good brief https://arounda.agency/blog/design-brief-example-how-it-shou... should have a number of key sections that will help you outline the project from beginning to end. Some of these include:
Re:Accessible hamburger buttons without JavaScript by frereubu on Friday January 27, 2023 @12:54PM (#34549323)
Is this improved with the use of attributes like aria-controls and aria-expanded, or is there a deeper issue?
Re:Accessible hamburger buttons without JavaScript by at-fates-hands on Friday January 27, 2023 @01:13PM (#34549581)
Yes, using aria attributes does help, but most of the older sites we're trying to make accessible don't have these. Most of the time its a simple coding fix to add these though.

The other issue is the placement of the menu in the upper right or left hand corner is nearly impossible to find with TalkBack or VoiceOver controls. Sometimes even with aria attributes, you really have to search with your finger to find the menu and interact with it.

Re:Accessible hamburger buttons without JavaScript by frereubu on Friday January 27, 2023 @01:34PM (#34549843)
Thanks for that. We take care to build with aria attributes, but the search for the menu icon is something I hadn't considered. Is top right / left corner not enough of a convention for a menu hamburger that it's difficult to find, or is is more about the size of that button?
Re:Accessible hamburger buttons without JavaScript by at-fates-hands on Friday January 27, 2023 @02:52PM (#34550881)
Its mostly about the size.

When you use VoiceOver for example, an easy test is dragging your finger down the middle of the screen, you should be able to access the majority of the content - when the menu is tucked too far up in the corner, or too small, it gets obscured by the logo, CTA or anything else that's in the area and gets bypassed by VoiceOver.

Making it large enough to find by simply dragging your finger down the middle of the screen is a good enough test to determine if its big enough, too small or located somewhere it would be skipped by those screen reader tools.

Hope that helps.

Re:Accessible hamburger buttons without JavaScript by frereubu on Friday January 27, 2023 @03:48PM (#34551652)
Yes, thanks, that's really helpful.