@kxnzx
Posted
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
@vanzasetia
Posted
@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
@idirieh
Posted
Hi @kxnzx Thank you for your feedback, it's really useful and I can learn from it.
@kxnzx
Posted
@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.
@kxnzx
Posted
@idirieh Yrw! Glad it helped :)
@vanzasetia
Posted
@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?
@kxnzx
Posted
@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.
@vanzasetia
Posted
@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?
@kxnzx
Posted
@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 :)
