@0xabdul
Posted
Hello Developer well congratulations on Completing the Product preview card component
- A Some suggestions for improve your code
- In Html đ :
- LANDMARK đ
- The main landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the main function of an application.
- 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 This Elements are don't sikp
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect.. - non- semantic elements :
<div> , <span> ect ... - for easy way to clear the Accessibility reports using non semantic elements Ex :
<body>
<div class="container" role="main">
//Html code 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>
- I Hope you find the solution and it's useful comment for you your Product preview card component project is great đ Happy Coding Developer
@madosy
Posted
Hi @0xAbdul, thanks for the feedback!
Honestly, my biggest gripe with semantic HTML is knowing which one to mark what in a logical manner since it feels like a guessing game for me.
What landmark/role would you suggest for my div.description, or div.price?
Also, as for the 2 spans in div.price, would I need a landmark for each of them as well? What would be the most logical one in this case?
Would I need to indicate a landmark/role for my button? If so, what should I mark it as?
@0xabdul
Posted
@madosy
<div class="product-container" role="main">
//Your whole html code here
</div> and wrap them
@madosy
Posted
@0xAbdul
I understand the product-container should probably be marked as main. And div.attribution should probably be footer...I think.
What I'm super unsure about are:
- div.description
- div.price
- div.price > span.current
- div.price > span.original
- button (if I need one?)
Thanks for the assistance with sorting through the confusion!
@0xabdul
Posted
@madosy
<body>
<div class="product-container" role="main">
<div class="image"></div>
<div class="details">
<h1 class="name">Gabrielle Essence Eau De Parfum</h1>
<div class="description">
<p>
A floral, solar and voluptuousÂ
interpretation composedÂ
by Olivier Polge,  Perfumer-Creator for theÂ
House of CHANEL.
</p>
 </div>
<div class="price">
<span class="current">$149.99</span>
<span class="original">$169.99</span>
</div>
<button>Add to Cart</button>
</div>
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.Â
 Coded by <a href="https://github.com/madosy/product-preview-card-component">Madosy</a>.
</div>
</div>
</body>
</html>
- For your recommendation i should moderate your code
- The product-container div tag wrap the whole html code
@0xabdul
Posted
@madosy don't use the footer tag because I use the non sematic elements like <div> <span> for easy way to clear the all Accessibility reports so I use the role attribute in Product-container div tag
Marked as helpful
@0xabdul
Posted
@madosy did you understand ?đ¤
@madosy
Posted
@0xAbdul
I think so. I'll just have to look at bunch of sites and see how they handled their accessibility I suppose.
But even for site like this one (a store specializing low-vision/blindness products): https://carroll.org/store/
When I inspect the html elements and check the accessibility tags, some things don't make perfect sense.
Forget accessibility on Netflix, Facebook, or Amazon. Almost all their links have accesibility role "general" :(
I'll just be more conscious of it and use it when I can when it makes sense.
@0xabdul
Posted
@madosy it's okđ
