Yeah nice to see the struggle we have sometimes, so we are not alone 🙂

@@MrGarfield I’m on jn non &9’ko

👍

As I was watching the video I thought about those things as well, I would also add the fact that those colors don't have a great contrast red on red and green on green. But you really said everything I wanted to say. I am glad more content creators are getting into a11y lately, the industry seriously needs more accessible websites so I appreciate this video a lot.

Thanks for these extra tips! Bumping this so more can see it :)

Thanks, I've combined trhis tutorial with your acccessibhility tips into one. Works superb. I've added CSS variables to make it super easy to customize. sizes, color,s light and dark mode There is one thing that needs mention, in terms of sizes. Using CSS calc() all of the dimensions can be automated. To make it work proper, instead of useding em I had to use rem. Now accessibilty is perfect for my use case.

Just adding to what people said before, I am not trying to repeat what was said, just to add to the justification of some of the proposed solutions and add some reasoning (disclaimer: I am a web-accessibility tester). I like your content, and I dont want to sound overly critical. I am quite happy that devs are starting to pay more attention to a11y, as there are more and more laws compelling us to be more compliant. Yet, I do actually want to highlight more stuff, because digital accessibility needs to be done right to be helpful to the people needing it. If you build custom UI a lot can break and actually make things less accessible. - Zoomfactor and the focus highlight: As was pointed out before: using focus-visible instead of focus is the solution to resolve the flashing focus highlight when clicking the element. Adding to this and explaining why the zoom factor alone is not suficient: "Normal zoom is smaller, it should not be a problem anymore." This is not true. Users with visual impariments often use very high zoom factors, 200% and more. It is a problem, and there is the easy solution with focus-visible. - Color Contrast: Was mentioned by ProGamer before. It is not just "not great contrast", it fails by wcag AA standards: webaim.org/resources/contrastchecker/?fcolor=81E052&bcolor=E0F7D4&api (and it fails for all three, green on green, red on red, and grey over white). Adding to Color: If u use a chrome browser you can emulate the deuteranpopia (r-g-colorblindness) settings: Developer Tools -> Settings -> More Tools -> Rendering -> "Emulate vision deficiencies" -> Deuteranopia, and see the issue with using red and green als indicators. This is actually still okay here. Because the information is conveyed by more than just color alone. By form and by the symbol. It should be conveyed by text as well, I mean a role and a status (checked / unchecked) which indicates to Screen reader users the state and the role of the element. - Adding a role was mentioned before as well. This is important for screen readers. I am not sure about role="switch", it might be enough. I would propose to use aria-checked="false" and role="checkbox" including a function to toogle the status. See: www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html - When building a custom UI all the inherent semantics of HTML5 are lost because HTML5 is not used. These semantics are by default accessible. If you do not use them, you have to painfully recreate the. Considers this when implementing custom UI. I am not saying to not do it. Just be aware. - Before and After are problematic for adding content. They are not accessible if non-decorative content is added. The Checkmark symbol and the Multiplication x are not just decorative. They convey meaning. Browsers and AT (assistive technologies) interact differently with before and after. CSS must be disabled sometimes and meaningful content should then remain visible and in place. MacOS' VoiceOver Screen Reader will read out the content elements (in Firefox, not in Chrome, as another user also pointed out already): "Checked, Multiplication x" or "Checked, Checkmark". This might add confusion.

@@bjoernuhlig the role=switch already adds the on/off state (different from checked/unchecked), which are read by assistive technologies. The other points you mention are important and i think you explained them well! :)

Nicely done bro

@@flow7502 thank you

I experimented with -100%, and it seems to work. Could there be a potential problem that I'm not aware of?

@@bobsonwong9422 percentages always refer to the parent element's own width which may not be wide enough for an "off screen" position. If that parent is also somehow moved to the opposite direction (a right sidebar) then your "starting point" would be off, especially if that parent has a position:relative. vh always refers to the absolute width of the screen so it's value is typically large enough to move things out of the away even if the (relative positioned parent is located at the very right edge of the screen.

@@CirTap Oh yeah! That totally didn't occur to me because I was just adding the toggle to the . Thanks for the insight. :)

I wonder if that selection blinking can be heard in screen readers "selection made!".

@@aram5642 that could be a problem…

Thankyou. I was wondering why did making flex affect the pseudo child. This solves it.

Well said! it felt like 3 minutes, regardless of me watching on 1.75x speed 😂

i was screaming over here loool

I believe you cannot tab into the checkbox if you use display: none so it would be inaccessible

it won't work with screen readers, such as element with zero height and width might be hidden for them

I mean honestly, using fully CSS toggles is not good in general, it's messy and it completely ignores the separation of concerns, it's just a challenge, at least that's how I see it

If you're learning react you DEFINITELY don't need a state management library. I use React for a living and I don't even use a state management library. So far the context API has been more than enough.

@@snoowwe you’re absolutely right, but I have a special use case where I’m making a chess game and I need to update the squares that need updating, but at the same time I need to be able to update all of the squares at once and I have really been struggling to find a good way to achieve both.

This should already all be handled by the input element and label element.