Design comparison
Solution retrospective
Build this sign-up form using html, scss and vanilla Javascript.
Instead of using a submit input, I've used a button input. Is this an issue when submitting a form in a real life application?
Also, when using a screen reader the only element from the right side of the screen that is read is the "Terms and Conditions" paragraph.
Why does this happen and how could I solve it?
Community feedback
- @tbensheimerPosted over 2 years ago
Hello and congrats on completing this project! It looks great! I wanted to mention a few things.
To answer your question about the button. I don't think it is an issue since I have also used a button for form submissions. For my example, I used <button type="submit"...> to use a button to submit forms.
Another thing I wanted to mention is <form action=' '> must not be empty since it causes html issues. Instead of leaving it empty, use the '/' to fill the action since that won't do anything when the form is submitted.
When using <label for....> to label inputs, make sure the for="..." matches the ID of the input. For example <label for="sub"> <input id="sub" > would be considered good coding practice.
Finally, the last thing I wanted to mention is for your terms and service html structure, you can get rid of the <p> and </p> elements since it's not allowed inside the <sub> element. One alternative is to get rid of the <sub> element and leave the <p> element as is.
I am still currently learning more about screenreaders and how to improve its accessibility so I am not quite sure why the screenreader is only reading the terms and conditions paragraph. I do wish you best of luck on how to solve that issue!
Marked as helpful1@AngAndaPosted over 2 years agoThank your for such a detailed answer! I've learned quite a few new things from it which I will try to add to my code.
As for the screen reader issue, it seems to have been my fault for not using the software properly.
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