Submitted about 2 years ago

Product preview card component

warya•30

@idirieh

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

All feedback welcome, Thank you

Community feedback

kxnzx•870
@kxnzxPosted about 2 years ago
Hello @idirieh,

Congratulations finishing your second challenge, good job!

You have some accessibility issues:

It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning.

Instead of <div class="card"></div> use <main class="card"></main> and instead of <div class="attribution"></div> use <footer class="attribution"></footer>.

Main and footer are tags that are considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. More examples of landmarks are: header, nav, aside, section.

Your page must contain at least one H1 element:

Wrap “Gabrielle Essence Eau De Parfum” in an <h1></h1> tag.

An H1 is very important on a page for search engines, screen readers, SEO and people with visual impairment to know what your page is about. You always at least need ONE h1 in your page. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. Just remember that the most important title on the page is an h1.

You can wrap “PERFUME” in an <h2></h2> tag. Even though it starts earlier on the page, this does not matter. It’s the hierarchy that matters.

Instead of placing your styles inside the <head> it is good practice to create a css file, like for example styles.css and use an external link inside the <head>. Example: <link rel="stylesheet" href="styles.css">
Marked as helpful
0
Vanza Setia•27,775
@vanzasetiaPosted about 2 years ago
@kxnzx

The word "perfume" is a paragraph element. It is known as ribbon text. So, what @idirieh did is already correct.

Also, heading levels must always be in order to give structure to a page. There's should not be an h2 before the h1. Think of h1 as the eldest brother, it should not have any older brother to become the eldest brother. 🙂

Reference: https://www.a11yproject.com/checklist/#heading-elements-should-be-written-in-a-logical-sequence
Marked as helpful
0
warya•30
@idiriehPosted about 2 years ago
Hi @kxnzx Thank you for your feedback, it's really useful and I can learn from it.
0
kxnzx•870
@kxnzxPosted about 2 years ago
@vanzasetia Thank you for your comment. I have learned that the position/order of the headers on the page do not matter, however the importance/rank is what matters. An H1 is more important than an H2.

You are correct that the highest ranking headline usually comes first, but in some cases the most important headline on the page is not at the top. For example, when you have a slogan in an h2 at the top with the company name in an H1 below it.
0
kxnzx•870
@kxnzxPosted about 2 years ago
@idirieh Yrw! Glad it helped :)
1
Vanza Setia•27,775
@vanzasetiaPosted about 2 years ago
@kxnzx

If I were doing this challenge, I would have the HTML markup for the "Parfume Gabrielle Essence Eau De Parfum" line as the following. (I can also replace the hgroup with a div).

<hgroup> <p>Perfume</p> <h1>Gabrielle Essence Eau De Parfum</h1> </hgroup>

This is the HTML markup that I would write when I said about ribbon text.

I know that there are some instances when it is okay to have h2 before the h1. A good example from the A11Y Project website is the following.

h2 = main menu h1 = title of a news article h2 = subheading in the content of the news article h3 = subheading of the h2 h4 = subheading of the h3 h2 = subheading in the content of the news article h2 = Related news (the aside section) h2 = Contact us (in the footer) h3 = Address (the address information) h3 = Follow us (social media links)

But, for this website, using an h2 instead of a paragraph would make the heading hierarchy looks like this.

h2 = Perfume h1 = Gabrielle Essence Eau De Parfum

So, why do you think it's okay to have this heading hierarchy?
0
kxnzx•870
@kxnzxPosted about 2 years ago
@vanzasetia Thank you for the A11Y Project website link! I will reference the A11Y Project website from now on. I am still learning myself so I have no idea why it would be okay or not. In certain cases the most important title starts somewhere else on the page, so that's is the only thing that made sense to me. There is a discussion about this subject online. Some say that it's not ideal to do, but not an issue for SEO purposes. Good to learn more about this topic.
1
Vanza Setia•27,775
@vanzasetiaPosted about 2 years ago
@kxnzx I am also still learning about web accessibility and the A11Y Project is a good resource to learn more about web accessibility. 👍

For the discussion about the topic, is it a StackOverflow discussion? And could you share the URL to that discussion?
0
kxnzx•870
@kxnzxPosted about 2 years ago
@vanzasetia It was stackoverflow and quora. I don't have/remember the exact link. I just googled "h1 after h2" and read all the threads about it. (The first results that show up are from stackoverflow and quora.) The opinions on there were mixed. I will stick to A11Y Project from now on :)
1

Please log in to post a comment

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