You have some HTML problems in this that definitely need fixing
- Why is try it free for 7 days a button not a paragraph? What do you think clicking that would do?
- The form is inaccessible as you have no labels! They cannot be empty. You need to learn how to accessibly hide text
- I can see you've tried to programmatically link inputs and errors here but it doesn't look right to me. You should point the aria describedby to a non-hidden element wrapping those messages, and that should have aria live. Eg add a div around each error paragraph, move the ID to that and add the aria-live attribute. This will ensure errors get read out only when relevant
- Use margin (or gap with flex/grid) to create vertical space between the form elements not brs
Marked as helpful
0
Re number 3 as this change would break your javascript - I recommend you update the javascript selectors to use classes and look for them using querySelector
For example
const emailError = document.querySelector('.js- email-error');
Using js- prefixed classes like this is a common practice to separate concerns and improve code readability.
IDs are better left alone for their real purpose - anchoring, and because they play such an important role in making code accessible. I've written a post about all of this if you're interested to read more
Marked as helpful
0
