Testimonials responsive page using CSS Grid
Design comparison
Community feedback
- @KrzysztofLeczyckiPosted over 2 years ago
Hey,
if you only want to practise styling features such as grid, flex, positioning etc., I think that you don't have to worry about accessibility too much. However, when you build a project which simulates a web page or a web app, you should follow good practices, including accessibility. Have in mind that your products can be used by people with eyesight issues.
I am still a beginner in the accessibility field, but I am trying to improve my knowledge in each project.
You could try using semantic HTML tags. For example, wrap your quotes in
<article>
. I am not sure if using<header>
in each quote is good practice.I hope I helped a bit. Best wishes. :D
1@subhajitroycodePosted over 2 years ago@KrzysztofLeczycki Thanks I appreciate that... I am gonna fix this and gonna look out for it in the future.
0 - @subhajitroycodePosted over 2 years ago
I don't understand the accessibility issues should I be worried about that??
0@thedoodlebakeryPosted over 2 years ago@subhajitroycode For the accessibility messages, they are best practices to use when coding.
It is a best practice to use h1, h2, h3 and so on as use you navigate through the page. If code jump immediately to h2 or h3, without declaring h1 heading, a page will receive the level one heading error.
Also, the banner landmark error is happening because the page header (<header> tag) has been used more than once without a sectioning tag. You may need to add some section tags. Since header tags usually define the header information for the most adjacent ancestor or parent. These are just suggestions.
This solution looks really great.
1@subhajitroycodePosted over 2 years ago@thedoodlebakery Thank you very much I appreciate that.
1
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