responsive pricing component with toggle using a some JS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi Kellen

  I'm afraid this is inaccessible at the moment. There are two main issues.

  1. No focus-visible styles, so I can't tell where I am when using a keyboard. Focus-visible should be consistent and obvious, often a bold outline style

  2. The toggle doesn't communicate state and is unusable via keyboard/screenreader/voice. 99% of the time toggles like this should be done with radio inputs not checkboxes, because that communicates exactly which option is selected at any time. This design is even more suited to radio inputs than many toggles because it has 2 visible labels already, one for each state. Also, you cannot hide inputs with display none or they become inaccessible. I recommend reading up on how to build an accessible toggle or even accessibly styled radios, or have a look at my solution for an example.

  Here are some more changes and notes I just made in browser. Note the side margin on the cards is only to prevent them hitting screen edges. This could be better acheived by placing the bg-img on body and giving main a little padding. You never want components to touch edges

  .card {
    /* margin: 0 auto; */
    margin: 0 1rem;
  }
  
  .card__wrapper.flex {
    /* align-items: stretch; */
    align-items: center;
  }
  
  .container {
    /* width: clamp(20.4375rem, 90%, 65.625rem); */
    width: clamp(20ch, 90%, 65.625rem);
    note: try clamp on the card__titles. 
    note: Be wary of setting minimum values that are too small on clamps when used for box widths;
  }
  
  .card__btn {
    note: why is this a button element? What would you expect to happen on click?
  }
  
  @media (min-width: 56.25em) {
    .card {
      margin: -0.2rem;
    }
  }
  
  .attribution {
    /* position: absolute; */
  }
  
  .card.bg--secondary:last-of-type {
    z-index: -1;
  }
  
  

  Marked as helpful

  3
• 

  P

  Kellen Ruyle•930

  @rule-kellsPosted over 2 years ago

  Thanks, Grace! Yeah, I had a hard time deciding which to use radio or checkbox. Most of the examples online used checkboxes, although the radio button makes more sense to use. Also thanks, for looking at my code and the notes that you provided this is super helpful, and will apply them to future projects. It's good to have others look at my code, especially since I am self-taught and need feedback to what are the best practices. Again, I very much appreciate it.

  0