Mobile-first solution with CSS and JavaScript

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi,

  I think this is pretty good! A slider will never be fully accessible but there are things we can do to help it:

  • make sure next and previous buttons have a type of button, an aria label and appropriate rel attribute
  • make sure buttons have clearly visible focus states

  I think your js is fine. The only change I would make is with your selectors. Its best practice to separate concerns between style classes and js classes, and be really explicit with selectors. So for each selector, I would add a class in the html just for targeting that element in js, like js-slider-next. When working in a team, that makes it really clear to other developers what that class is doing, and theres no risk of a styling change breaking the javascript.

  I hope that makes sense.

  1

  ---

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @grace-snow hey, just a question. In that adding class for targeting, ughm, is it okay to make custom data tags for it? Like data-toggler=next? instead of classes or id's?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @pikamart it is, it that's a pattern you want to establish in a code base. It's just a team choice really

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @grace-snow oh hahaha then i'm on the right path, before i'm confused to what the purpose of them but I used them in some js but having question of whether it is right using it. This really cleared it^

  0

  

  Leandro•120

  @LeandroRicoPosted over 3 years ago

  @grace-snow Hi Grace!

  I'll keep these tips in mind for future projects. Didn't even know that about js classes, excellent tip.

  Thanks for your feedback :)

  0