Accessible contact form using aria attributes

Please log in to post a comment
Log in with GitHubCommunity feedback
- @adeysh
Hi there! Your solution looks exactly like the design. Great implementation!
Here's my feeback for UI and code:
-
The first name and last name field is accepting numbers as input. You could add constraints there.
-
Since you have hover effects for border on every field. I see that it is not there on the radio buttons. You could add for them as well. And on the consent checkbox too.
-
On checking the checkbox since it becomes active. I get an outline which looks unnecessary. You could remove that.
-
There is no padding on the form for mobile screen sizes.
-
On the email address field, if after putting an invalid email address i remove it and submit the form. It doesn't change the error message to 'This field is required' since the field is now empty.
-
The HTML markup looks great.
-
I am not sure why but I can use autocomplete in the text form fields even though you have used
autocomplete="off"
on the inputs. -
I would suggest you to use
required
attribute instead ofaria-required="true"
since all the fields in the form are standard fields so it would be helpful for screen readers as well. -
Also I think since all the fields are already 'required' fields. you need to refactor the if/else statements for validating them.
-
You would not need these:
let isValid = isRequired ? isValidEmail : isEmpty ? true : isValidEmail;
let isValid = isRequired ? isValidText : isEmpty ? true : isValidText;
let isValid = isRequired ? checkBox.checked : true;
andlet isValid = isRequired ? checkedCount !== 2 : true;
- here instead of using the checkbox unchecked count. you could simply check for a checked checkbox using
let isAnyChecked = Array.from(radioInput).some(el => el.checked); let isValid = isRequired ? isAnyChecked : true;
That's all I could provide as feedback. Amazing work here that you have done! best of luck 😇🤞
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord