This switch is not accessible, and not usable with keyboard navigation. You should really consider reading up on how to make custom components like these accessible before sharing wrong information.
And I would add to this: styling based on an ID is not considered good practice, nor is using an ID like "on" or "off" in a component that will be reused. According to spec, ID should be unique on the whole page.
✦ Independent web developer/designer/blogger
✦ Lead Framer Developer at Framerly
✦ Framer Expert & Partner | Advocate at 10x Designers
✦ Hire me on Contra👇
Sure, I recognize that it's just a demo and there may be some merit in just getting things out there for people to see. That said, it's a demo targeted toward a fairly beginner level audience. These subtle behaviors are often not addressed in anything new programmers will learn, and I feel that it's a disservice to allow poor programming habits to show up in an example meant for teaching people. Arguably, you should never be okay with poor practices in any code you write, if they could be easily avoidable; but this problem is even worse when you have an audience that may have never seen any of the techniques and will learn bad habits while trying to understand everything going on in the example.
Short version: it being a demo is precisely the reason you should follow best practices.
Exactly — this may not be a full-fledged application, but if a new dev comes here, reads this, recreates this toggle with non-unique IDs, and reuse a bunch of that component on their page/app, they will end up with multiple non-unique IDs on their page. Its a bad practice, and a poor example for new developers.
✦ Independent web developer/designer/blogger
✦ Lead Framer Developer at Framerly
✦ Framer Expert & Partner | Advocate at 10x Designers
✦ Hire me on Contra👇
Hi Pascal! You're right accessibility is highly important! But as you can see, this article is just focussed on "how to make a custom component". It's just about coding the component, adding other things like accessibility can surely be done. This was just to get a demo or a quick-start. :)
Also, thanks for adding the resources, they will definitely help!
Making it not accessible is not how you make a component. Youve just excluded a lot of people from being able to use the component, and even worse, youve taught a bunch of other people the wrong way to make a component.
If its not accessible, its not finished. “Adding” accessibility is not a bonus; its a requirement
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.
This switch is not accessible, and not usable with keyboard navigation. You should really consider reading up on how to make custom components like these accessible before sharing wrong information.
Here are some good resources:
w3.org/TR/wai-aria-1.1/#switch
scottaohara.github.io/aria-switch-...
erikkroes.nl/blog/accessible-html-...
And I would add to this: styling based on an ID is not considered good practice, nor is using an ID like "on" or "off" in a component that will be reused. According to spec, ID should be unique on the whole page.
Hey Jordan, I agree, but this is not a full-fledged application. It's just a demo of how to start writing a custom component.
Also, please provide some external resources to back off your statements, this would help others to understand more.
Sure, I recognize that it's just a demo and there may be some merit in just getting things out there for people to see. That said, it's a demo targeted toward a fairly beginner level audience. These subtle behaviors are often not addressed in anything new programmers will learn, and I feel that it's a disservice to allow poor programming habits to show up in an example meant for teaching people. Arguably, you should never be okay with poor practices in any code you write, if they could be easily avoidable; but this problem is even worse when you have an audience that may have never seen any of the techniques and will learn bad habits while trying to understand everything going on in the example.
Short version: it being a demo is precisely the reason you should follow best practices.
Edit: first sentence in this doc developer.mozilla.org/en-US/docs/W...
Exactly — this may not be a full-fledged application, but if a new dev comes here, reads this, recreates this toggle with non-unique IDs, and reuse a bunch of that component on their page/app, they will end up with multiple non-unique IDs on their page. Its a bad practice, and a poor example for new developers.
Hi Pascal! You're right accessibility is highly important! But as you can see, this article is just focussed on "how to make a custom component". It's just about coding the component, adding other things like accessibility can surely be done. This was just to get a demo or a quick-start. :)
Also, thanks for adding the resources, they will definitely help!
Making it not accessible is not how you make a component. Youve just excluded a lot of people from being able to use the component, and even worse, youve taught a bunch of other people the wrong way to make a component.
If its not accessible, its not finished. “Adding” accessibility is not a bonus; its a requirement