Accessible hamburger buttons without JavaScript

Post by myfonj » Fri, Jan 27, 2023, 4:29 PM UTC

mariusor wrote: post #56

shakna wrote: post #40

Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies. The details element. Menu Home Thing You may want to add a tiny bit of CSS, like adding a border, and setting the cursor to a pointer, for your sighted users: details { padding: 0.5em; border-style: solid; border-width: 1px; border-radius: 0.25em; cursor: pointer; }

You should still wrap the list in a element to give the browser the context about what the menu represents.

Post by at-fates-hands » Fri, Jan 27, 2023, 4:32 PM UTC

irrational wrote: post #36

unsupp0rted wrote: post #18

Earlier quoted context omitted.

Every time I think something is obvious and ubiquitously understood someone on my client's team looks directly at it and insists it doesn't exist, or if it exists then it doesn't do anything, or if it does something then what it does isn't the thing they thought it would do.

I remember a business manager having zero idea that clicking the logo at the top of a webpage would often take you to the home page. I had assumed this was ubiquitously understood, but clearly not.

Post by at-fates-hands » Fri, Jan 27, 2023, 4:36 PM UTC

atestu wrote: post #60

detritus wrote: post #12

> "Over the last few decades hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that every user immediately knows what they are when seen in the top left or right corner, which makes them a good user interface element choice." "Last Few Decades"? Eh? A decade.. perhaps? "Every User Immediately"? This is not at all my experience. Perhaps with younger u…

I agree. Hamburger buttons were popularized with smartphones so they are still relatively new. Here's a good breakdown on why they suck https://www.nngroup.com/articles/hamburger-menus/ tl;dr "Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases."

Post by mixmastamyk » Fri, Jan 27, 2023, 5:12 PM UTC

reaperducer wrote: post #66

Domenic_S wrote: post #57

Earlier quoted context omitted.

It's a fun little meme, but it's not all that accurate. Something like half of mothers report latching or other nipple-baby interface problems in some studies [0]. What's more, suckling is a hardwired reflex , not something that's intuited , so the quote also misunderstands the nature of intuition. FWIW I also used to use that quote, until I had a child and saw firsthand [well, second-hand as it was my wife doing the…

Because not every baby figures it out the first time does not mean it is not intuitive for the other babies that do figure it out immediately. It's become more of a meme to be needlessly contrarian, and ignore the fact that billions of babies actually do know this interface intuitively.

Post by mixmastamyk » Fri, Jan 27, 2023, 5:14 PM UTC

at-fates-hands wrote: post #65

atestu wrote: post #60

Earlier quoted context omitted.

I agree. Hamburger buttons were popularized with smartphones so they are still relatively new. Here's a good breakdown on why they suck https://www.nngroup.com/articles/hamburger-menus/ tl;dr "Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases."

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.