feat: improve contact form accessibility using semantic labels 🪄✨

[0xabdulkhaliq]

Description

• The current Contact Us form on the Code Set Go project's website lacks proper label elements and their association with input elements using for, id, and name.

• This omission negatively impacts the form's accessibility for users with disabilities, hindering their ability to navigate and interact with the form effectively.

• There's already aria-label added for inputs, But accessibility devices relay on real label elements with associated input elements ⚠️

Accessibility Concerns

• Missing Label Elements: The absence of label elements associated with input fields makes it challenging for screen readers to provide meaningful context to users with visual impairments. Users may struggle to understand the purpose of each form field without clear labels.

• Lack of Association: The for, id, and name attributes play a crucial role in linking label elements to their respective input fields. Without this linkage, screen readers cannot convey the relationship between labels and form elements, leading to a less intuitive and frustrating user experience.

Recommended Action

• To improve the accessibility of the Contact Us form, the following steps should be taken:

  • Add Label Elements: Include descriptive label elements for each input field in the Contact Us form. Labels should be concise and clearly explain the purpose of each form field.

  • Associate Labels and Inputs: Use the for attribute in the label elements to link them to their corresponding input fields using unique id attributes. This linkage enables screen readers to convey the association between labels and form fields.

  • Implement sr-only Styling: To ensure that the labels are only visible to screen readers and not visually displayed to sighted users, apply the appropriate sr-only style rules to hide the labels. This approach maintains a clean visual appearance while enhancing accessibility for users relying on screen readers.

  • By addressing these accessibility concerns and making the Contact Us form more inclusive, the Code Set Go project's website will become more user-friendly and welcoming to all users, regardless of their abilities or assistive technologies.

[0xabdulkhaliq]

Hey there @agamjotsingh18 👋🏻

Please make sure to assign this issue to me to make the work done, Thank You!

[agamjotsingh18]

Sure @0xabdulkhalid