Hi
I recommend improving the html on this. There are a few foundational issues with this
- All those star images need to have empty alt values. These are decorative and there is already writing to communicate the 5 star ratings. Additionally, it is very frustrating for screenreader users when the same alt text is read out again and again
- Similarly, these should not be wrapped in figure elements. There is no point using figure at all unless you need two lots of content and one of them is a figcaption
- Alt text descriptions shouldn’t ever include words like “image” or “picture. The tag is already an image. If it’s an image of a named person, their name alone is fine as alt text
- Headings must go in order, never skipping levels and only be used for appropriate content. Eg verified purchaser is not appropriate as a heading, it’s just a paragraph
- Optional, this one. Consider using a blockquote for the testimonials
- I’m not sure you understand fully how to use sections. They act just like divs most of the time (unless labelled basically), so there is no need to use so many. Think of them as always needing a h2 heading. If you wanted to use section to wrap the 3 testimonial boxes as well as the individual boxes, really it should have an sr-only h2 like “testimonials” and then each box could keep its h3 as they belong to the section above. All this section stuff is not actually problem - like I said they are acting exactly as divs atm - it is more to advise that it is fine to use divs for layout you don’t have to use section for everything
One other tiny thing. Well done on use of BEM. I’m glad you’re finding it helpful. Note you are not using it fully though. You can do modifiers like card 1 2 etc with a double hyphen. So use of a modifier class would be something like button button--secondary
Marked as helpful
@vikramvi
Posted
@grace-snow Thanks a ton for valuable inputs.
-
Can you please recommend any resource to improve HTML wrt SEO and Accessibility ?
-
Can you please point me to any of your projects from FM where I can refer to more learning wrt these review comments ?
Thanks again for your time, I will fix these and resubmit.
Regards, Vikram
@vikramvi you never need to resubmit. You can push up new code to the repo whenever you like
@vikramvi
Posted
@grace-snow can you please share some sample repos which I can refer to; for improving HTML and CSS code quality ?
@vikramvi
Posted
adding references from slack communication for benefit of others
- https://moderncss.dev/topics/
- https://every-layout.dev/rudiments/boxes/
- https://www.htmhell.dev/
- https://adrianroselli.com/tag/accessibility
- https://jensimmons.com/
- https://rachelandrew.co.uk/css/
- https://www.sarasoueidan.com/blog/
@EngineerHamziey
Posted
@vikramvi
Hello Vikram Ingleshwar, Here is a way you can learn more from people like @grace-snow, @vanzasetia and other bosses around here
-
Go to their profile and go to their solutions read the comments on it visit their code on GitHub and read through.
-
Go to their profile visit their comments, and read their comments on other people's code. Trust me, you will learn alot from that 😊.
-
Also anytime you finish a project ask questions and also read other people's code of the same project. It will help alot.
-
Always experiment what people recommend as correction, change values around, read the write up/ blog post they recommend on a particular topic.
I hope this was helpful ☺️
@vikramvi
Posted
@EngineerHamziey Thanks a ton for your valuable inputs, I will follow these as well.
