Design comparison
SolutionDesign
Solution retrospective
Im slowly improving. Any feedback would be much appreciated.
Community feedback
- @Eric-FerolePosted almost 3 years ago
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 - @grace-snowPosted almost 3 years ago
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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord