social media dashboard with dark mode with SASS and Javascript

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  It's really important to use accessible patterns and interactive elements for things that trigger interactive behaviour. You can't put event listeners on divs and other non interactive elements. Toggles like this should always be done with radio inputs. Or as this one only has one visible label you could use a checkbox as long as the checked state equals dark mode.

  I hope that helps

  Marked as helpful

  1

  ---

  

  selehadin cyber•90

  @selehadin-cyberPosted over 2 years ago

  @grace-snow Hi yes it did help significantly since i am now learning a lot about accessibility. i had actually thought of using a checkbox and implementing the dark mode using only css. but then i wanted to learn how to do it with javascript. and when i decided to use a div as a toggle i did know at that time that it would have implications on accessibility. so if i understood you correctly, accessibility devices read the label of the checkbox or radio? also today i learned element IDs must be unique .will my html issues go away if i replace the repeated IDs with repeated classes?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @selehadin-cyber yes you should never use IDs for styling.

  A toggle cannot be fully accessible with css only, you'd still use js. Look up modern-css.dev there are lots of useful tutorials and resources on there

  Marked as helpful

  1

  

  selehadin cyber•90

  @selehadin-cyberPosted over 2 years ago

  @grace-snow i appreciate the feedback. thanks again. will be checking the resource out

  0