Yes, the same can be achieved in pure CSS by using the checkbox hack, which mimics the click event. But, according to expert Devs, it would be wise to refrain from using this method, as it can cause accessibility issues.
Hi buddy. It wasn't an article that I came across, but several tweets suggesting that a CSS checkbox hack is most likely to cause an issue when it comes to accessibility. But, here's a Quora link I found, which may help. quora.com/Is-the-CSS-checkbox-hack...
The question in the above link has 2 answers. Make sure to go through both of them. This will give you a better understanding of 2 different perspectives.
A couple of years ago, I did use this technique, but later stopped doing so. Let me know if the above link helped.
Thanks. I read those answers on Quora. I didn't get a point about "accessibility issues". I wrote the menu sandwich in pure CSS. And I can't understand why they saying that using JS is much better then write pretty few rows of css. What I think that when you use JS your web browser need to download libraries to work with JS right ? And One class can contain a lot of code. So if we allocate memory for one var which is one Class with all methods and use only one method it's mean that we need much more space to use for that variable instead of writing few rows of css. Maybe I'm wrong I'm not a specialist in this area. But menu written in JS seems to work slower than CSS.
Here is my menu: codepen.io/jenuaz-the-lessful/pen/...
Can you explain more specific the issue with access issues?
Perfectly valid points. But, what if some of our website visitors use screen reader. Of course, screen readers are most likely to ignore elements that have been given a display of none. But, again not 100 % sure about that. Also, tabbing between elements using a keyboard should also be considered as one of the preferred methods of navigating on a webpage.
One good reason to use the checkbox hack would be for users who have disabled JavaScript in the browser.
What do you think is it possible to write the same without JS? :)
Yes, the same can be achieved in pure CSS by using the checkbox hack, which mimics the click event. But, according to expert Devs, it would be wise to refrain from using this method, as it can cause accessibility issues.
Can you give me a reference to that expert article ? I will be appreciated!
Hi buddy. It wasn't an article that I came across, but several tweets suggesting that a CSS checkbox hack is most likely to cause an issue when it comes to accessibility. But, here's a Quora link I found, which may help.
quora.com/Is-the-CSS-checkbox-hack...
The question in the above link has 2 answers. Make sure to go through both of them. This will give you a better understanding of 2 different perspectives.
A couple of years ago, I did use this technique, but later stopped doing so. Let me know if the above link helped.
Thanks. I read those answers on Quora. I didn't get a point about "accessibility issues". I wrote the menu sandwich in pure CSS. And I can't understand why they saying that using JS is much better then write pretty few rows of css. What I think that when you use JS your web browser need to download libraries to work with JS right ? And One class can contain a lot of code. So if we allocate memory for one var which is one Class with all methods and use only one method it's mean that we need much more space to use for that variable instead of writing few rows of css. Maybe I'm wrong I'm not a specialist in this area. But menu written in JS seems to work slower than CSS.
Here is my menu:
codepen.io/jenuaz-the-lessful/pen/...
Can you explain more specific the issue with access issues?
Perfectly valid points. But, what if some of our website visitors use screen reader. Of course, screen readers are most likely to ignore elements that have been given a display of
none. But, again not 100 % sure about that. Also, tabbing between elements using a keyboard should also be considered as one of the preferred methods of navigating on a webpage.One good reason to use the checkbox hack would be for users who have disabled JavaScript in the browser.
Thanks a lot for your explanation ! Very helpful ! I even didn't think about this cases: screen reader, and tabbing between elements using a keyboard.
Glad it helped. Have an awesome day ahead.
U2 :) ! Hope you will continue to write articles like this one :)