Form

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 2 years ago

  Hey, nice work on this one. The layout for the desktop is fine but it could use more width since it is small right now. Resizing the site, it works fine but the layout at 1000px below until mobile state, the layout doesn't respond well making each content of the main squished and at 600px to 800px, you will noticed that the text on the left are now being overlapped by the form. The mobile state looks great though.

  Here are some suggestions for the site:

  • You don't use a height on the body tag. I'm supposing that you want the body to take the full height right, instead of using height, use min-height so that whenever the content of the site gets bigger, the body will rescale to that size because min-height lets the element expand unlike height that gives a fixed size.
  • Instead of using width for each child of main, you can just use padding and maybe add a max-width on the body tag so that it will prevent the layout to just always take full width of the user's screen. Just make sure to add margin: 0 auto for it to be centered.
  • Replacing each section tag into just using div. Using section is not really informative at all as landmark because it doesn't give extra information about it when traversing using an assistive tech, unless you give an aria-labelledby to it pointing to an heading's id. div is much better to wrap contents.
  • Whenever you use an input tag, adding a label pointing to it will be great so that even if the user uses a different languages, text content on the site can change if they want to translate the text and values used in attributes like the placeholder or maybe an aria-label are not translatable. Adding the label on this with an sr-only class will be great.
  • For the submit-button, instead of using input, use button type="submit" to be more explicit.

  SUBMITTING A WRONG FORM

  • If such input is invalid, adding an aria-invalid to that input would be really great so that when the user traverses on it, they will be notified that the input is wrong.
  • The error messages for each should have an id. I would change the div into just using p tag since it is a text content. Each error messages should have an id to which will be referenced by the input using the aria-describedBy attribute. This way, the user will know what kind of error that they had made because of the error message. Each id should be distinct like id="firstName-error".
  • Lastly, to further improve the error-handling, you could add an element that uses aria-live inside the form. The text will vary according to the form's submission, it could either be something like form has been submitted, thank you or it could be form submission invalid, please check your first name, last name... inputs.

  Here is a sample block that uses the attributes to add each error:

  if ( input is invalid ) {
     input.setAttribute("aria-invalid", "true");
     input.setAttribute("aria-describedBy", id of the error message");
  } else {
     input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  }
  

  Here is a sample form submission of what I said. It is a simple accessible form that I created, the aria-live is implemented there as well. Let me know if you have questions about it^^

  • Lastly, addressing the responsiveness issue of the site. Try to check out the dimension that I said earlier and try to fix the responsiveness.

  Still, great work on this one.

  Marked as helpful

  0

  ---

  

  Facundo•100

  @FacualemandiPosted over 2 years ago

  @pikapikamart I have read your help carefully, honestly it has solved MANY doubts regarding the width, height and types of labels, it has even named labels that I did not know, I will learn about these labels and put them into practice, thank you very much for your help.

  • I also did not understand why when I changed language some parts of the page were modified.

  I used the <section> tag, because I understood that the <div> tag is only used if necessary, otherwise, if there is any tag that can replace the <div> tag, it should be used, and I thought that the <section> tag was perfect to replace the <div> tag, I already did another project with <section> tags and it would be a problem to change them, but for my next project I will take it into account and I will inform myself more about it, Again, thank you very much!

  1