Intro component with sign up form solution

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  LABELS 🔖:

  • input elements are having a label with sr-only class, but we don't want to add individual label for every input element, Actually there's an native attribute named aria-label

  ---

  • A aria-label is used to create a caption for a form control. The aria-label can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute

  ---

  • Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

  ---

  • Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields, So here using aria-label="{values}" attributes for input is enough to be accessible

  ---

  • Example:

  <input type="text" aria-label="First Name" placeholder="First Name" id="first-name" name="first-name" class="registration-form__input">
  

  ---

  • Now you can remove those label elements with sr-only classes, using aria-label makes the code clean also

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  1

  ---

  

  Jordan Herrera Vera•490

  @jordanhevePosted over 1 year ago

  thanks this was very helpful to improve my code @0xAbdulKhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @jordanheve Glad you found it helpful ! 🤠

  0