Design comparison
Solution retrospective
First time with very basic Javascript interactions. Let me know if that is the right approach and what I could've done better.
Community feedback
- @grace-snowPosted almost 2 years ago
I can't read the button as it has white text instead of dark
- The form input must have a label
- The form input should not have a title attribute
- you need to use a form
- the error message element should have a unique ID; and an aria-desciribedby on the input pointing to that ID
- the logos are meaningful images so should have alt. I would also give that section a visually hidden heading
- remove the br from the heading. Instead you can use the span as a style target to make it display block
- a logo is extremely important content! It cannot have empty alt. Additionally, you can't have a heading landmark with no content inside - another signal that logo needs alt
- if you're going to put a background image inside a picture element outside of landmarks like this, I would wrap it in a div set to role presentation. I think that would solve the warning in your accessibility report
0@grace-snowPosted almost 2 years agoI recommend
- extract the validation check into a separate function
- move the email pattern inside that function
- run that validation on blur of the input
- once the html uses a form you can run the validation on submit too; and make sure you preventDefault()
- use const not let on this, you are not updating anything so don't need to use let
0@Leo-LCPosted almost 2 years ago@grace-snow thanks for all your constructive feedback, as always.
Here is where I stand after going through all of it
- The form input should have a label -> Is it ok to make it
visually-hidden
to match the design ? - The error message element should have a unique ID; and an
aria-desciribedby
on the input pointing to that ID -> After some research on this subject, I'm not sure to undestand fully and if I did it right. - Run that validation
onblur
of the input -> Is this better practice thanoninput
or just a styling choice ? - Not gonna lie, I have no idea how to run the
preventDefault()
. I can see why it's important, but I don't know where to add it. Thanks again for taking the time
0 - @Leo-LCPosted almost 2 years ago
I used a div around my email input and submit button is this supposed to be wrapped in a form ? (I’m just about to look for documentation on forms). And yeah, let me know about anything I handled wrong, best practices I would’ve missed so I can refactor this on the spot. I’m pretty sure I didn’t use the best approach regarding what’s used as the main image on the page :lever_les_yeux_au_ciel: Thanks again everyone and happy coding !
0
Please log in to post a comment
Log in with GitHubJoin 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