0xabdulkhalid
commented
11 months ago Hey there @agamjotsingh18 👋🏻
Please make sure to assign this issue to me to make the work done, Thank You!
Open 0xabdulkhalid opened 11 months ago
0xabdulkhalid
commented
11 months ago Hey there @agamjotsingh18 👋🏻
Please make sure to assign this issue to me to make the work done, Thank You!
agamjotsingh18
commented
11 months ago Sure @0xabdulkhalid
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, andname.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-labeladded for inputs, But accessibility devices relay on reallabelelements with associatedinputelements ⚠️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, andnameattributes 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
forattribute in the label elements to link them to their corresponding input fields using uniqueidattributes. This linkage enables screen readers to convey the association between labels and form fields.Implement
sr-onlyStyling: To ensure that the labels are only visible to screen readers and not visually displayed to sighted users, apply the appropriatesr-onlystyle 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.