Accessible hamburger buttons without JavaScript

Re:Accessible hamburger buttons without JavaScript by myfonj on Friday January 27, 2023 @10:29AM (#34547083)

> The main menu? Which is behind the same ≡ button on most pages on the internet?

This triple dash thingy (≡) is in this case "identical to" Unicode character, so this is what you'd most probably hear from the screen reader. Other pages (mis)use similar characters, for example "Trigram for heaven". Not very helpful.

Truly accessible active elements must communicate their function through meaningful text, not cryptic astral Unicode from exotic blocks.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by jameshart on Friday January 27, 2023 @10:30AM (#34547095)

To be fair the OP hides the trigram from screen readers and provides them with the ‘open menu’ label.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by myfonj on Friday January 27, 2023 @10:38AM (#34547198)

No, they did not, they present both "accessible hidden link" and "inaccessible visible label", at least I see no `aria-hidden="true"` in the code [1] on the label right now, I see just:

    <label for="menustate">
      <span class="open">≡</span>
      <span class="close">×</span>
    </label>

(Fact that wording of the link in the article pointing to the codepen is "this codepen" is also … not right.)

[1] https://codepen.io/enyo/pen/yLqjrOR

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by jameshart on Friday January 27, 2023 @10:56AM (#34547439)

You're right - I guess I assumed they'd added that in the full codepen.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by enyo on Friday January 27, 2023 @11:00AM (#34547491)

Oh you’re right, I forgot to add this in the article + codepen. (It’s how the button on the site itself is implemented and I forgot to integrate it)

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by enyo on Friday January 27, 2023 @11:33AM (#34547965)

The use of this symbol in the article is a placeholder. Obviously nobody would actually use this on their website...

[ Parent | on HN ]