Responsive user signup form using HTML, CSS and JavaScript.

Community feedback

• 

  T

  Grace•31,270

  @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 helpful

  0

  ---

  

  Stephen Ikuomola•570

  @stephenikuomolaPosted over 1 year ago

  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•31,270

  @grace-snowPosted over 1 year ago

  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

  ---

  

  Stephen Ikuomola•570

  @stephenikuomolaPosted over 1 year ago

  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