First off, very nice work. I really like the CSS only approach you took. My only concern was as you pointed out at the end that your example is not semantic. As a result, using the wrong element can trigger the wrong browse mode in assistive tech which can be a bit confusing. But in this case, using the checkbox as a toggle might be ok. I need to do some more digging.
Aside from that, I tested your example using NVDA with Firefox and Chrome. Things worked great when I wasn't using my screen reader. However, I found that when using my screen reader and the hamburger menu was in focus, the checkbox was not clickable (Chrome). I also noticed that when in focus, NVDA didn't announce the purpose of the element(chrome and Firefox). So I took a look at the code to see what was going on and I found a few things that fixed the issues in both Chrome and Firefox.
Removing the height, width and appearance from .nav__trigger-input allowed for the checkbox to be clicked via the keyboard when the hamburger menu was in focus(Chrome). And by placing the aria-label on the input element, when in focus, NVDA announced, "open the navigation. not checked" (Chrome). Placing an aria-labeledby="trigger" and changing the for="trigger" on the label to id="trigger" allowed for the aria-label to be correctly announced by NVDA in both Chrome and Firefox.
Thank you!!! This is exactly what I was looking for. We might have to add border: none and background: none because for some weird reason checkboxes are really hard to make invisible in all browsers. I’m going to add this code en reference you in a bit!
I made an update. I noticed the explicit label while associated with the labeled by was not triggering the mouse click. So I tied the label to the input using hamburger as the id and for. Also added cursor: pointer; to .nav__trigger-finger.
< nav class="nav">
< input
class="nav_trigger-input"
type="checkbox" id="hamburger"
aria-label="click to open the navigation"
aria-labelledby="trigger"
/>
< label class="nav_trigger-finger" id="trigger" for="hamburger">
< span>
Hmmm I can actually use the keyboard to open the navigation in chrome, using tab and space to open. You also shouldn't use the same ID twice as they should be unique so Im going to call it something different. Still thanks for your help!
Hahaha looks great, I think the problem is that not the entire hamburger is clickable, I usually just use a svg to animate between states, but that seemed a bit too complicated for this article.
Great work!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Cyd,
First off, very nice work. I really like the CSS only approach you took. My only concern was as you pointed out at the end that your example is not semantic. As a result, using the wrong element can trigger the wrong browse mode in assistive tech which can be a bit confusing. But in this case, using the checkbox as a toggle might be ok. I need to do some more digging.
Aside from that, I tested your example using NVDA with Firefox and Chrome. Things worked great when I wasn't using my screen reader. However, I found that when using my screen reader and the hamburger menu was in focus, the checkbox was not clickable (Chrome). I also noticed that when in focus, NVDA didn't announce the purpose of the element(chrome and Firefox). So I took a look at the code to see what was going on and I found a few things that fixed the issues in both Chrome and Firefox.
Removing the height, width and appearance from .nav__trigger-input allowed for the checkbox to be clicked via the keyboard when the hamburger menu was in focus(Chrome). And by placing the aria-label on the input element, when in focus, NVDA announced, "open the navigation. not checked" (Chrome). Placing an aria-labeledby="trigger" and changing the for="trigger" on the label to id="trigger" allowed for the aria-label to be correctly announced by NVDA in both Chrome and Firefox.
.nav_trigger-input,
.nav_submenu-trigger-input {
opacity: 0;
position: fixed;
}
< input
class="nav_trigger-input"
type="checkbox"
id="trigger"
aria-label="click to open the navigation"
aria-labelledby="trigger"
/>
< label class="nav_trigger-finger" id="trigger">
I hope my suggestion helps.
Again, great work!!
Thank you!!! This is exactly what I was looking for. We might have to add
border: noneandbackground: nonebecause for some weird reason checkboxes are really hard to make invisible in all browsers. I’m going to add this code en reference you in a bit!No prob :)
I made an update. I noticed the explicit label while associated with the labeled by was not triggering the mouse click. So I tied the label to the input using hamburger as the id and for. Also added cursor: pointer; to .nav__trigger-finger.
< nav class="nav">
< input
class="nav_trigger-input"
type="checkbox"
id="hamburger"
aria-label="click to open the navigation"
aria-labelledby="trigger"
/>
< label class="nav_trigger-finger" id="trigger" for="hamburger">
< span>
Hmmm I can actually use the keyboard to open the navigation in chrome, using tab and space to open. You also shouldn't use the same ID twice as they should be unique so Im going to call it something different. Still thanks for your help!
Yeah, I noticed that too! facepalm
I made a codepen with the updates
codepen.io/xirclebox/pen/jOEGyvv?e...
Hahaha looks great, I think the problem is that not the entire hamburger is clickable, I usually just use a svg to animate between states, but that seemed a bit too complicated for this article.
Great work!