I’m currently working on my Techincal Documentation Page project. I’m being stumpped by this one (rather annoying) issue.
The test panel Indicates that I have not met the following requirement:
I’ve went through my code numerous times and have not found the Issue. Here’s my the code I used for my navbar:
Sidebar HTML
<nav id="navbar" class="sidebar">
<header>Web Basics</header>
<div class="sidebar-category">
<div class="languages">
<a href="index.html" data-active=""><i class="fa-brands fa-html5"></i></a>
<a href="css.html"><i class="fa-brands fa-css3-alt"></i></a>
<a href="javascript.html"><i class="fa-brands fa-square-js"></i></a>
<a href="files.html"><i class="fa-regular fa-file-code"></i></a>
</div>
<a class="overview" href="overview.html">Overview</a>
</div>
<div id="sidebar" class="sidebar-links">
<ol>
<li><a class="nav-link" href="#HTML_Basics">HTML Basics</a></li>
<li><a class="nav-link" href="#Elements">Elements</a></li>
<li><a class="nav-link" href="#Attributes">Attributes</a></li>
<li><a class="nav-link" href="#Nesting_Elements">Nesting Elements</a></li>
<li><a class="nav-link" href="#Void_Elements">Void Elements</a></li>
<li><a class="nav-link" href="#Document_Structure">Document Structure</a></li>
<li><a class="nav-link" href="#Images">Images</a></li>
<li class="toggle">
<details>
<summary>Marking Up Text</summary>
<ol>
<li><a class="nav-link" href="#Marking_Up_Text">Marking Up Text</a></li>
<li><a class="nav-link" href="#Headings">Headings</a></li>
<li><a class="nav-link" href="#Lists">Lists</a></li>
<li><a class="nav-link" href="#Links">Links</a></li>
</ol>
</details>
</li>
</ol>
</div>
</nav>
For further investigation, here’s the entire html file:
You need id attribute with the value in section elements which you want to link with nav bar href value.for checking expect , you should go back to the accessibility quiz challenge.
I don’t really understand what you mean.
Example
<a nav-link href=#html>html</a>
<Section id="html"></section>
I couldn’t find a section without a matching ID with it’s corresponding href. Nor for the header texts too.
You should check previous Challenge accessibility quiz project, there you can find your solution. @Joseph1205
Check this
<nav id="navbar" class="sidebar">
<header>Web Basics</header>
<div class="sidebar-category">
<div class="languages">
<a href="index.html" data-active=""><i class="fa-brands fa-html5"></i></a>
<a href="css.html"><i class="fa-brands fa-css3-alt"></i></a>
<a href="javascript.html"><i class="fa-brands fa-square-js"></i></a>
<a href="files.html"><i class="fa-regular fa-file-code"></i></a>
</div>
<a class="overview" href="overview.html">Overview</a>
</div>
<div id="sidebar" class="sidebar-links">
<ol>
<li><a class="nav-link" href="#HTML_Basics">HTML Basics</a></li>
<li><a class="nav-link" href="#Elements">Elements</a></li>
<li><a class="nav-link" href="#Attributes">Attributes</a></li>
<li><a class="nav-link" href="#Nesting_Elements">Nesting Elements</a></li>
<li><a class="nav-link" href="#Void_Elements">Void Elements</a></li>
<li><a class="nav-link" href="#Document_Structure">Document Structure</a></li>
<li><a class="nav-link" href="#Images">Images</a></li>
<li class="toggle">
<details>
<summary>Marking Up Text</summary>
<ol>
<li><a class="nav-link" href="#Marking_Up_Text">Marking Up Text</a></li>
<li><a class="nav-link" href="#Headings">Headings</a></li>
<li><a class="nav-link" href="#Lists">Lists</a></li>
<li><a class="nav-link" href="#Links">Links</a></li>
</ol>
</details>
</li>
</ol>
</div>
</nav>
<!-- Your content with corresponding IDs -->
<section id="HTML_Basics">
<!-- Content for HTML Basics -->
</section>
<section id="Elements">
<!-- Content for Elements -->
</section>
<section id="Attributes">
<!-- Content for Attributes -->
</section>
<section id="Nesting_Elements">
<!-- Content for Nesting Elements -->
</section>
<section id="Void_Elements">
<!-- Content for Void Elements -->
</section>
<section id="Document_Structure">
<!-- Content for Document Structure -->
</section>
<section id="Images">
<!-- Content for Images -->
</section>
<section id="Marking_Up_Text">
<!-- Content for Marking Up Text -->
</section>
<section id="Headings">
<!-- Content for Headings -->
</section>
<section id="Lists">
<!-- Content for Lists -->
</section>
<section id="Links">
<!-- Content for Links -->
</section>
@hasanzaib1389 I’ve checked both and I still don’t see it. I’m not sure what I’m missing. xd
Teller
January 31, 2024, 10:14pm
9
Hi @Joseph1205
Here is the rendering of your code.
The tests are checking if the text in the navbar matches the text in the section element. Since there is no header element text content this test will fail.
Happy coding
Upon further investigation, I’ve found the issue!details & summary element in your #navbar element. I’m not too sure why but, when I removed them, leaving out just div and list elements, the requirement passed!
Here is the original navbar html that caused the problems:
<nav id="navbar" class="sidebar">
<header>Web Basics</header>
<div class="sidebar-category">
<div class="languages">
<a href="index.html" data-active=""><i class="fa-brands fa-html5"></i></a>
<a href="css.html"><i class="fa-brands fa-css3-alt"></i></a>
<a href="javascript.html"><i class="fa-brands fa-square-js"></i></a>
<a href="files.html"><i class="fa-regular fa-file-code"></i></a>
</div>
<a class="overview" href="overview.html">Overview</a>
</div>
<div id="sidebar" class="sidebar-links">
<ol>
<li><a class="nav-link" href="#HTML_Basics">HTML Basics</a></li>
<li><a class="nav-link" href="#Elements">Elements</a></li>
<li><a class="nav-link" href="#Attributes">Attributes</a></li>
<li><a class="nav-link" href="#Nesting_Elements">Nesting Elements</a></li>
<li><a class="nav-link" href="#Void_Elements">Void Elements</a></li>
<li><a class="nav-link" href="#Document_Structure">Document Structure</a></li>
<li><a class="nav-link" href="#Images">Images</a></li>
<li class="toggle">
<details>
<summary>Marking Up Text</summary>
<ol>
<li><a class="nav-link" href="#Marking_Up_Text">Marking Up Text</a></li>
<li><a class="nav-link" href="#Headings">Headings</a></li>
<li><a class="nav-link" href="#Lists">Lists</a></li>
<li><a class="nav-link" href="#Links">Links</a></li>
</ol>
</details>
</li>
</ol>
</div>
</nav>
And here’s the modified code that works:
<nav id="navbar" class="sidebar">
<header>Web Basics</header>
<div class="sidebar-category">
<div class="languages">
<a href="index.html" data-active=""><i class="fa-brands fa-html5"></i></a>
<a href="css.html"><i class="fa-brands fa-css3-alt"></i></a>
<a href="javascript.html"><i class="fa-brands fa-square-js"></i></a>
<a href="files.html"><i class="fa-regular fa-file-code"></i></a>
</div>
<a class="overview" href="overview.html">Overview</a>
</div>
<ol>
<li><a class="nav-link" href="#HTML_Basics">HTML Basics</a></li>
<li><a class="nav-link" href="#Elements">Elements</a></li>
<li><a class="nav-link" href="#Attributes">Attributes</a></li>
<li><a class="nav-link" href="#Nesting_Elements">Nesting Elements</a></li>
<li><a class="nav-link" href="#Void_Elements">Void Elements</a></li>
<li><a class="nav-link" href="#Document_Structure">Document Structure</a></li>
<li><a class="nav-link" href="#Images">Images</a></li>
<li class="toggle">
<ol>
<li><a class="nav-link" href="#Marking_Up_Text">Marking Up Text</a></li>
<li><a class="nav-link" href="#Headings">Headings</a></li>
<li><a class="nav-link" href="#Lists">Lists</a></li>
<li><a class="nav-link" href="#Links">Links</a></li>
</ol>
</li>
</ol>
</nav>
Thank you all for your help and various inputs!
1 Like
system
August 2, 2024, 12:45am
11
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
