Submitted

Vanilla JS form

P

@Eric-Ferole

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

1

HTML Issues

View Report

Éric Férole’s questions for the community

Im slowly improving. Any feedback would be much appreciated.

Community Feedback

Grace 18,400

@grace-snow

Posted

Hi this is a great start. The solution looks and functions close to the design, just a few important principles to learn still

  • don’t have any text in divs or spans alone when you could use a meaningful element. That “try it free…” text should be a paragraph, or maybe even a heading element
  • inputs always need labelling. That’s essential, even if it’s not visible on the design. Read up on adding accessible visually hidden labels
  • the autocomplete value is incorrect on first name
  • the inputs and error messages need linking together for screenreaders. You do that with aria-describedby on the input pointing to the unique ID of that inputs error element
  • the error elements also need an aria live attribute so they get announced as soon as they appear

In the js a small enhancement could be to move focus to the first input with an error. That’s quite a common task we get when building forms

I hope this was helpful. Good luck

0

P

@Eric-Ferole

Posted

Thank you for taking the time to review my code. I found this about the input labeling. Very interesting https://www.w3.org/WAI/tutorials/forms/labels/ I'll take your advises ! Much appreciated.

0

Give some feedback to @Eric-Ferole about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!