intro-component-with-signup-form

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks really nice, it is responsive and the mobile state looks fine but there is a horizontal scrollbar at the moment because the layout is being hidden.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Avoid using height: 100vh on a large container like the .container tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Adjusting the font-size of the p tag for the hero-section since it is really hard to read by now.
  • The "try it free..." is not really an interactive component, it is just like a banner for the form so using only div with p tag inside would be better.
  • Those ion-icon ( I don't really know this tag ), the error-icon is not really meaningful so hiding it would be better, do not use aria-label to it. Also an img would be nice with alt="" and aria-hidden="true".
  • Your input tag lacks an associated label tag on it. Since there are visible-label, the label would be a screen-reader only label, meaning it would make user of like sr-only class. The text-content should describe what the input needs like the value on the placeholder.
  • Right now, those error are seen visually bot not really connected to the input. A proper approach looks like these:

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

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy

  • Another idea to implement to further improve accessibility is to have an aria-live element that will announce if the form submission is a success or not. Have a look at this simple accessible form snippet that I have . If you have queries about this, just let me know okay^^
  • Your button should have type="submit", always be explicit on what your button should be especially when it is inside a form. Since by default a button inside a form turns to type="submit". So imagine you have a close-button right with no specified type="button", instead of closing the form, it would submit the form.
  • Adding cursor: pointer to the button so that it will feel more natural on desktop layout.\

  Aside from those, great job again on this one.

  Marked as helpful

  1