Responsive user signup form using HTML, CSS and JavaScript.
Design comparison
Solution retrospective
Hello friends 👋🏽,
Great to announce that I have just completed yet another challenge, and I am happy with my solution. Client-side validation using JavaScript can be tricky sometimes, and it feels good I was able to come up with something for this one.
I learnt about the title
attribute for form inputs, which I have not used before. This attribute helps provide some extra information about the element.
I will welcome any suggestions from the community on improving my solution.
Thank you 🙏🏽 .
Community feedback
- @grace-snowPosted over 1 year ago
I've just noticed you've used the 62.5% rem font size hack. It's worth reading this post about why I think that's a very bad idea
That probably explains the strange font size and zoom behaviour I'm seeing on mobile too
Marked as helpful0@stephenikuomolaPosted over 1 year agoI will look at the blog post, but this strange font size and zoom behaviour you speak of I do not experience it in my browser. Could it be due to my browser settings which I use currently?
Thank you, Grace, for looking at my work and the blog post you sent to help me make the corrections.
0 - @grace-snowPosted over 1 year ago
Hi
This looks pretty good! There are still some important points to learn
- Never add in extra content like this just for screenreader users
<p class="sr-only">Fill out your information and access free trial.</p>
- Aria labels on form elements must be succinct and must begin with the name of the input. It should be "First name" not "Enter your first name". This is extremely important. For example some voice users would be unable to activate these inputs at the moment because "First name" would not activate the input as they expect. Overall you must not try so hard when attempting accessible code - keep it simple and don't over complicate otherwise you end up making it accidentally inaccessible!
- Also note that aria-label does not consistently translate. So it may be better to use an Sr-only label element on the inputs instead.
- The title attribute is not good to use on inputs. You are giving additional information there that would be inaccessible to some users. If its important info it has to be present in an element on the page and linked to its input with aria-desciribedby
- To programmatically link error messages to their inputs, give the error message container a unique ID and use aria-desciribedby on the input pointing to that ID
- You must NEVER have click listeners on non-interactive elements. That password reveal toggle must be a labelled button and must communicate state with aria- pressed. The position of that button seems incorrect too - I'll add a screenshot to discord so you can see what I'm seeing
- This isn't a very accessible design, but you can improve it slightly by adding a unique ID to the terms and aria-desciribedby on the submit Button pointing to that ID. This will make sure the terms acceptance is read out to AT users along with the submit Button
Marked as helpful0@stephenikuomolaPosted over 1 year agoThanks, Grace, for these suggestions.
You have just introduced me to a new attribute,
aria-pressed
, something I never knew about before. I will implement these critical points of yours.0 - Never add in extra content like this just for screenreader users
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