Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive user signup form using HTML, CSS and JavaScript.

@stephenikuomola

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

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

T
Grace 29,310

@grace-snow

Posted

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 helpful

0

@stephenikuomola

Posted

I 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
T
Grace 29,310

@grace-snow

Posted

Hi

This looks pretty good! There are still some important points to learn

  1. Never add in extra content like this just for screenreader users <p class="sr-only">Fill out your information and access free trial.</p>
  2. 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!
  3. 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.
  4. 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
  5. 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
  6. 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
  7. 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 helpful

0

@stephenikuomola

Posted

Thanks, 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

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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