Skip to content
Submitted over 1 year ago

Product-preview-card-component

DesignsByRyanReid•20
@DesignsByRyanReid
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few Rules to consider to clear all accessibility and Html Validation report

    1. LANDMARK 🚀

    -The main landmark should be a top-level landmark.

    -When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark.

    -If a page includes more than one main landmark, each should have a unique label.

    -To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

    -Note these Elements don't skip semantic elements : <aside> ,<article> , <main>, <header> ,<section><footer>, <form> etc.... non- semantic elements : <div> , <span>

    -For an easy way to clear the Accessibility and Html Validation reports using nonsemantic elements Ex :

    <body>
<div class="container" role="main">
/html code goes here: 📃
</div>
</body>

    OR

    using semantic elements

    Ex :

    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    2. img

    • It is best practice to use alt attribute.
    • The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

    -Ex

    <img src="image_name.jpg" alt="image_name" >

    I hope you find this helpful. Above all, the solution you submitted is great !👍

    Happy coding😄

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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