XerBlade / xerblade-com

code repo and bug tracker for https://www.xerblade.com
GNU General Public License v3.0
0 stars 0 forks source link

Sidenav Mobile Toggle does not play nicely with assistive technologies. #1

Open XerBlade opened 4 years ago

XerBlade commented 4 years ago

The nonstandard implementation being used for the side navigation menu toggle button on mobile breaks with assistive technologies, which can't figure out what to do with it.

XerBlade commented 4 years ago

I used a really unorthodox implementation for the toggle button in order to get a working toggle without JavaScript (for people with lower-end devices on poor network conditions) without having the foresight to think about accessibility. Rather than a button, it uses a checkbox with the checkbox itself hidden and the label set to look like a button. This is not an uncommon method of styling custom checkboxes, but it wreaks havoc on assistive technologies and should really be retired. Using it as a button only compounds the issue. There is no clean way of fixing it without copious use of JavaScript, which would defeat the whole purpose of using this unorthodox setup.

I already have a replacement toggle implementation in mind. It should be coming down the line.