Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Accessible hamburger buttons without JavaScript

pausly.app

Post reply on HN
Print view View original

111–120 of 154 posts

Re: Accessible hamburger buttons without JavaScript

#111

Post by tomcam »

shakna wrote: post #62
enyo wrote: post #59

Earlier quoted context omitted.

Unfortunately there are still plenty of issues with the details element, especially around accessibility. Read more here: https://cloudfour.com/thinks/a-details-element-as-a-burger-m... Hopefully this will change soon. I’ll amend the article when this will be the case.

As someone who actually uses screenreaders and voice control on a daily basis, most of that is not a huge deal. The "a" element has similar accessibility ratings and holes in implementation.

Would you mind contacting me at the email address in my profile? I’m about to release an open source thing and I would like to understand some accessibility issues.

Re: Accessible hamburger buttons without JavaScript

#112

Post by inopinatus »

The goal of a pure CSS hamburger is a noble one that I applaud and share.

However, it's actually okay to introduce JS for the progressive enhancement to accessibility because ARIA is by definition dependent on RIAs.

In regards to the overall construction of these I also rather like the form:valid hack, rather than the checkbox hack depicted, since the former is more general (in particular, the selectors can be ancestors instead of siblings).

Re: Accessible hamburger buttons without JavaScript

#113

Post by hinkley »

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'm pretty sure Hamburgers started becoming common around 2008-9, so that's three decades we've been using them even though it's only 14 years.

But in trying to figure out when they became prominent, I discovered that some dude at Xerox invented them in 1981.

Re: Accessible hamburger buttons without JavaScript

#114

Post by inopinatus »

enyo wrote: post #59
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; }

Unfortunately there are still plenty of issues with the details element, especially around accessibility. Read more here: https://cloudfour.com/thinks/a-details-element-as-a-burger-m... Hopefully this will change soon. I’ll amend the article when this will be the case.

I'd be interested in a similar review of client-specific gaps w.r.t the dialog element (which is even newer to the mainstream, i.e. likely the assistive tech has similar/worse implementation lag).

Re: Accessible hamburger buttons without JavaScript

#116

Post by mLuby »

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; }

Really wish there were a Markdown equivalent for this.

Re: Accessible hamburger buttons without JavaScript

#117

Post by a9h74j »

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.

Jef Raskin: "Intuitive" == familiar.

User never used/discovered it before == not familiar.

Re: Accessible hamburger buttons without JavaScript

#118

Post by ladon86 »

Not sure if you're the author, but I'm having an issue signing up for Pausly. After connecting an auth provider, there's a screen that asks for your name, and it's not possible to check the ToS checkbox.

The error in the console is:

> Cannot destructure property 'supabaseUrl' of 'Re(...)' as it is undefined.

Re: Accessible hamburger buttons without JavaScript

#119

Post by zelphirkalt »

mLuby wrote: post #116
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; }

Really wish there were a Markdown equivalent for this.

There is probably one of hundreds of markdown dialects, that supports it. Besides, markdown supports directly putting HTML into the markdown text, so it kind of supports all of HTML. How it is rendered depends on the tool you use for that, rather than on markdown as a format.

Re: Accessible hamburger buttons without JavaScript

#120

Post by anthk »

mixmastamyk wrote: post #72
detritus wrote: post #25

Earlier quoted context omitted.

I know it was originally invented way back when (in Xerox Parc?), but it did not become 'de facto' on small screens decades ago, that's just a mangling of perspective. I don't recollect ever having seen it on any of the 'small screens' (ie LCDs, etc) I used prior to smartphones.

PDAs and the Nokia phone, mp3 player generation had icons. 90s-2010s

PDA's where niche. No one used hamburger buttons prior to 2007-2010. No. One. Period.
Post reply on HN