When using a burger menu
I have the three lines and and transforming c
It’s lovely
However my question is how to label
Them for accessibility
Three menu lines => open closed menu
X => close opened menu
Everybody here is happy to help, but this is not an Umbraco question and can be easily found online. What do you think you need? What do you have now?
Sure I k ow it’s not an umbraco specific question but I was after the wisdom of the umbraco community to it .. I’ve read various contrasting opini ins and that’s why I thought I’d ask it here
I’d consider this a pub question .. ie boat big deal but see what people say
Ah that makes sense 
It’s not that I’m the boss here and decide what you can and cannot ask ofcourse. I think discussions are great, especially if the answer isn’t obvious. I think it would have really helped if your opening post would contain a little more information, like: what did you find, how do you think it should be done, what are the contrasting opinions for example. That makes it easier to discuss.
To me, your initial post seemed like you didn’t want to do much effort and just get an answer here, which was clearly wrong on my part, so apologies. But next time, please put some more effort in your start post, you’ll get much better answers that way
I usually use something like aria-label="toggle navigation" and aria-haspopup for the button itself, since that’s it’s purpose. I then use aria-expanded to notify of state then use aria-controls to direct at the container that’s opening and closing.
I’d love to know if others handle it differently but I believe that’s compliant.
I used this on a college’s site…
When closed:
<a class="mobile-on" id="nav-control" href="#" aria-expanded="true" title="Open/Close Menu"><span>Menu</span><i class="fa fa-bars"></i></a>
When open:
<a class="mobile-on" id="nav-control" href="#" aria-expanded="true" title="Open/Close Menu"><span>Menu</span><i class="fa fa-times"></i></a>
Passed all the accessibility checks with flying colours at the time.
HTH
Sure I normally do leave a bit more because I don’t want have to repeat steps
But I’ll make sure I’m a bit more clear on intentions
.. it’s a bit more technical than for the discord channel but I take on board the details comment
So my follow up @jsandrae and @craig is there are a few ways to skin this cat and yet still remain compliant .
As a back end I dev prion pally wanted to make sure what I had done wasn’t missing an obvious convention
Just a a note :
I use the Roy Walker naming convention from Uk tv show catch phrase
And he said say what you see
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.