Hey @vanzasetia - really lovely job on this one š - you code is really well structured and a pleasure to read. If I was to make some very small suggestions, it would be to also add some comments in your CSS - perhaps separating out the blocks?
The only, debatable, error I could find is that the label in your email input form comes after the input itself. Ideally, it should come before it it - I think.
The other more clear issue, is that the error states disappear when the input looses focus. Even if the invalid value remains. If you don't want to use JS, I think this could be fixed by targeting the visibility of the div sibling of the input:invalid element using the ~ selector - but I've not tried this.
With regard your questions:
-
I think a
h3is better here. It makes it easier for people who navigate the page by headings to access that part of the page quickly. -
Personally, I think this is the best approach, it is more performant to inline svgs, and good to do this when possible.
-
I think it looks great - I love the outline styles.
-
" transition between each breakpoint?" Sorry, I'm not really sure what you mean here?
-
Not tried, but the use of aria labels throughout looks really good to me.
Some possible areas to think about for your next challenge - you could use custom properties in your css - this makes it much easier to change colours later on.
You could add some custom JS to the form input to validate the email address. The inbuilt validation is better than nothing but it is possible to build much nicer. This is a nice library that I have used sometimes: https://github.com/cferdinandi/bouncer
This was honestly one of the nicest projects I've looked at for ages. I love the focus on accessibility, using CSS over JS, and attention to detail. I'll be checking out your other work for ideas on how I can improve right now...
Cheers Dave
Marked as helpful
@vanzasetia
Posted
@dwhenson Thank you for all your feedbacks and kind words. It really makes my day š.
For the CSS Comments, I will try to add those block comments to separate each section. I already looked at your Planets Site - Eleventy, nunjunks, SCSS and ES6 modules solution and your CSS looks good and more structured with those block comments.
For the label, in this case it's much easier to style the form this way. I already checked on MDN about label tag, there's no rules about label positioning. Can you explain why do you think it is an error? Also, if you have any articles about it, please let me know!
I will try to fix the :invalid issue as soon as possible.
What do I mean by transition between each breakpoint is simply, when the page start to hit the breakpoints, let say 1024px, is there anything broken?
I have tried CSS Custom Properties, but CSS Variables can't work together with Sass function, like lighten() or darken(). It has to be a Sass variables. That's why I only used Sass variables.
That's it! Have a great day!
@vanzasetia - I want to have another go at the planets site. I've improved things a bit already but not pushed up the solution - more work is needed though!
Regarding, the labels, I also liked putting them after, I was basing my comment on this article: https://css-tricks.com/html-inputs-and-labels-a-love-story/#best-practices-for-a-healthy-relationship
But I just tried your page with a screen reader and it seems fine so I'm not sure that's really correct. This a11y stuff is so hard!
Sorry, I hadn't thought you might be using SASS variables - I'm pretty new to SCSS and haven't used them much my self.
Cheers š
I forgot to add if you like the CSS comment/structure in the planets app it is based on this approach, which I've found to be really helpful: https://piccalil.li/blog/cube-css/
@vanzasetia
Posted
@dwhenson Thanks for and for checking it on screen reader and the resources, especially on the CSS Tricks about label.
I agree with you, š accessibility is hard to master.
That's it! Good luck with your project!
