Add a label to Hamburger Toggle and Close Icon

[dirkmiddeldorf]

Hello!

Has somebody found a way to add a label “Menu” (and “Close”) zu Hamburger Toggle/Close Icon in the Nav Menu element to improve accessibility?

Thanks!
Dirk

[bret]

Try adding a pseudo element, :before or :after

[dirkmiddeldorf]

Thanks for the hint Bret! I am not very savvy with CSS but learning

[aslotta]

Hey @bret,

while a pseudo element works visually it does not help in terms of accessibility though: How is CSS pseudo content treated by screen readers? | Accessible Web

Best,

André

[dirkmiddeldorf]

Interesting!

Bricks adds "aria-label=“Open the mobile menu” by default to the toggle, so the Menu text is not important here for screen readers, but I guess it still confuses the screen readers, right?

[dirkmiddeldorf]

Ok I tested it, VoiceOver actually is confused by the code and reads, I think it’s the page title over and over again. Is there an accessible solution?

[bret]

I assumed you were only looking for decorative since the toggles already supports the use of an aria label.

[dirkmiddeldorf]

Indeed I did, and it works nice, but the screenreader goes crazy when I do it with pseudo elements.

[dirkmiddeldorf]

I solved this with the Bricks Extras Toggle.