Password generator

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 3 months ago

  Hi there, congrats on completing the challenge!
  I just finished it as well; it was a tough one.

  I noticed a few things in your challenge that you may want to check to improve your solution.

  • There is a problem with focusable elements, making it tricky to use for keyboard-only users. You added a display: none on your checkbox. With that, we cannot reach these checkboxes using a keyboard as they become non-focusable.

    Instead, you can use appearance: none and custom style them as you want. You will keep the native behavior of the element. Checkboxes have a :checked state that you can use to style with the custom SVG.

  • You also removed the outline on the range slider. It's not possible to notice when this element is in focus.

  • For better accessibility, instead of adding large padding to your body to size your content, I recommend you use a max-width on your main_card and center the content in the body with Flexbox. You'll need to remove the width: 100vw, which is unnecessary and can cause issues. This is important to let users who need to zoom in on the page have a good experience too.

  I hope you find something useful in my comments. Let me know if you have any questions.

  Happy coding!

  Marked as helpful

  1