@Victor-Nyagudi
Posted
Hello, Caroline.
Good attempt on this one.
Here are some things you can improve.
It seems you used a duplicate id
value here.
<div class="offcanvas offcanvas-end d-md-none" id="main-nav">
These should be unique, otherwise, you might run into problems down the road. Consider finding the duplicate ID and changing it to something else. You can use Ctrl+F in VS Code (or its equivalent in your code editor) to find the duplicate id="main-nav"
and change it.
There's another warning in the accessibility report that heading levels should only increase by one. This means that you should structure your HTML such that you only have one <h1>
at the top then following it should be an <h2>
then <h3>
etc.
For example, you used an <h3>
then <h2>
in your code here.
// previous code here
<div class="col-sm-12 col-lg-4 bg-verydarkblue" >
<div class="card-body h-100 card-fluid pt-4 ">
<h3 class="text-softorange">New</h3> // <- Here's the h3
<ul class="list-group list-group-flush">
<li class="list-group-item bg-verydarkblue text-offwhite">
<h2 class="fw-bold fs-5 ">Hydrogen Vs Electric cars</h2> // <- Here's the h2
<p class="text-muted">Will hydrogen-fueled cars ever catch up
to EVs
</p>
</li>
// other code below goes here
Structuring your heading tags is important for accessibility because screen readers read them out in order from h1 to h6 to people with poor eyesight. Mixing heading tags makes navigation harder for them.
You can switch the two heading tags above and style them such that one is bigger than the other but you still preserve the integrity of the headings structure.
If you have code inside multiple <section>
or <article>
tags, you can start at an <h2>
and go down from there.
For example:
<article> // <- You can replace this with a <section>
<h2>10 Best Places To Buy Make-up In Nairobi</h3>
<h3> Some of these depend on your budget</h3>
<p>If you ever find yourself in one of East Africa's busiest cities...</p>
</article>
<article>
<h2>What Is Mutura Really?</h3>
<h3> Is it boudin or a cow's large intestines?</h3>
<p>Parked around street corners are many vendors selling the famous mutura...</p>
</article>
Finally, if you want to use an image as a link, remember to add an alt
text to it so screen readers know where the link goes.
<a href="#home" class="navbar-brand">
<img src="assets/images/logo.svg" alt="Home">
</a>
Hope this helps.
All the best with your future solutions.
Marked as helpful
@Carolkiarie
Posted
@Victor-Nyagudi Hello Victor. Thank you so much for the well detailed feedback. I will for sure make the necessary correction.