If you're looking for specific support for various things, I suggest this site: https://caniuse.com/
As others have said as well, even if caniuse or the w3c says something is well-supported, always double check your analytics. It doesn't matter how cool an animation is if 90% of your audience is on a machine that can't see it.
As for this topic... I had to find out...
From what I've read, and what's implied in what I've read, the label tag would STILL be read by the screen reader, from what people were saying... The for attr essentially just allows them to click on the lbl to activate the input field that the label belongs to....
BUT if you're still determined to go with that route, I guess you could always do something like:
#nav-checkbox {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}Rather than:
#nav-checkbox{
display:none;
}Essentially from the user's perspective, provided they're not using a screen reader, they're exactly the same. Although the screen reader topic may not play ball with the display hidden implementation. 
Pure genius! 
Still worth me having a look, I mean the more you know aye? 
Thank you for pointing that out, I genuinely didn't know that! 
That's the perfect logic to have in my opinion, useless having a feature that wouldn't be used or viewed by your target audience.
Oh god please no. Don't do this. Browsers these days have become smarter, but that technique used to have some serious issues, rendering some browsers useless while rendering the page because it essentially made the page > 10000px wide.
display: none should be enough to hide it from screenreaders, but the label should be untouched (as you just wrote as well), I'd need to dig into that though.
/edit: also, see this section in the html5boilerplate: Helper Classes
You can see that when you use the network tab in Chrome Dev tools. You have the network graph, but it also shows when something is rendered and when the renderer is waiting for something. It will wait while downloading CSS, but it will continue while downloading an image.
Using fixed heights and widths for images and also iframes makes rendering faster (if you want to know about rendering speed just search for Paul Irish, you'll find countless videos), because the page can be rendered with those in mind, then just repainting that specific part once it finished loading.
It's also the reason why moving an element with top: x; left: y; is worse then using transform: translate(x, y);. When translating an element it stays in the same place in the flow of the page, it just moves a "second layer" that actually shows the content. When using top and left however it changes the flow of the page and so the whole thing needs to re-render. Also translating can be GPU-accelerated, whereas top and left eats CPU cycles (hint: battery life).
It's a really interesting thing if you care for speed
I personally wouldn't, end of, I'm not a fan of the 'checkbox hack' period, so I doubt I'd bother messing around with that technique anyway! 
...
Good pro tip right there... In that case, looks like I'd best edit some of my HTML for some websites... Thankfully I've done it out of habit with most pages.
I'm gonna have to look this dear Paul up, clearly, he sounds like a wise man from what you're telling me.
Another exquisite point, that'll be something I'll have to keep in mind, clearly... I don't tend to use top/bottom/left/right unless I REALLY need to for some reason or another, normally I'll always find a way around using them....
Finally, I'd just like to say thank you @mihawk90, you've provided me with a lot of useful advice today! ... Clearly a lot to think about and a lot of things to look into...
If you find another way of doing a completely non-JS navigation (with nested submenus) let me know I don't like it that much either, but it was the only solution I could find/think of 
He's a developer advocate on the chrome team with a quite extensive background for webdev in general, so he kinda has to know what he's talking about
It's the same with any kind of animation by the way. (Most) CSS Animations can be offloaded to the GPU, whereas JS based animations (even just changes in color) are all CPU based. That's a big part of why CSS3 is kinda awesome, it implements a lot of stuff that was previously in javascript only.
Off the top of my head, I sadly can't think of an alternative non-JS method, sadly, I mean I could attempt to look more into it, I'm sure I wrote a MASSIVE CSS file before that didn't need JS, but also didn't use a checkbox, but like I said, the CSS file was pretty chunky, considering that's all it did... Don't quote me on this, I think I managed that before, I can't swear down!
Tocuhé good sir, touché...
Again, this is news to me, but I actually find it easier to create a fairly fancy animation with CSS3 than jQuery/JS, but that's mostly because when I started out, all I knew was HTML & CSS. It took me awhile to get the logical thinking required for programming, so for a while JS just confused the living crap out of me, if I'm honest.... Thankfully it didn't take too long for me to develop the ability to process Boolean logic!
CSS3 animations are really easy to understand yeah. You just set points in time where attribute X should have value Y and the rest is done for you. But a few years back there was basically no support for animations, even though it was specced already.
Also there are still some edgecases where values can't be animated (for example visibility: hidden can't - depending on case you can use opacity: 0; though - , a lot of stuff that has no digit-value really). Then again, JavaScript has its quirks as well. For example it's just not possible to save hsl-values in style attributes. Even though HSL values animate perfectly fine in CSS sheets, when you put them in a style attribute via JS they are always converted to rgb, and there seems to be no way around that. Just stuff being weird ÂŻ\_(ă)_/ÂŻ
After this chat and seeing what I can do when I put my mind to it, I have 0 doubt that I will be developing a beautiful front end based website. I mean the only backend functionality I can see me using is <?php include_once('someFileName.something')?> ... May implement a little search feature too, it still wouldn't be anything mind blowing in terms of the backend functionality... I may not even bother, I guess I'll wait and see!
/edit: I made a typo...
Depends on the search, but if you're only searching on that page, might as well use javascript Or the Browsers search feature.
Finally at home, here's the UE4 demo (23:40 if it's not timestamped correctly):
I was considering that to be perfectly honest, then just pass in div's and hide/show them according to what the results are.
I guess that is a possibility, but I was thinking about dynamically inputting data!
Funny fact, I managed to find some Russian website and it has a feature that I've been wondering how to do for a while, simply make a deep/long text shadow effect, and it's a lot more simplistic to do than what I would've thought.
Well I mean Youtube is switching to Polymer, which uses things like Web Components so I'd say for the most part it's good to start using HTML5 and CSS3 technologies.
I'm gonna be honest, I'm at the point where I just think that if someone's using an outdated browser, then that's their issue, not mine. Maybe that's not the best attitude to have, and even though I'm starting to feel that way, I will still make some effort to make a website work with older browsers, but it's not gonna be my number 1 concern, it may just be one of my last concerns.
I think I'll just leave it to be one of the last things that I do when developing a website/webpage, just make sure that the majority of the functionality works first, and THEN be concerned about any cross browser/outdated browser bugs/issues.
Talking about outdated browsers, I've found one website that doesn't even support IE 10, but the message is actually quite amusing.
I have serious temptation to just copy this guy's idea here..
really just use postcss and you're save for the most part without hardly any effort. Even autoprefixer alone does it for most stuff.
I like subtle messages like the one HTML5BP provides more. Like... show the page, even if it's broken, and a message that it wouldn't be broken if they'd update.
Depends on the audience of course.
Alos, I never used it but I heard a lot of good stuff about Yeoman as well. I build my gruntfile myself, but maybe one day I'll try that too...
For my personal projects, I like using initializr, just makes the initial stage easier, and the url rewriting is already to go in the .htaccess file. Not that any of it is hard to do yourself, but it does save a little bit of time in my opinion.
yeah initializr is basically HTML5BP with Bootstrap and jQuery
