Learn Accessibility by Building a Quiz - Step 16

Tell us what’s happening:

Here is the full question:

Step 16

Every region role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the aria-labelledby attribute.

Add the following aria-labelledby attributes to the section elements:

  • student-info
  • html-questions
  • css-questions

Then, within each section element, nest one h2 element with an id matching the corresponding aria-labelledby attribute. Give each h2 suitable text content.

I am trying to add an aria-labelledby attribute to my section elements as well as an h2 element nested between each one. I thought I did it correctly, but am missing the question for some reason.

Here is my code:

Student Info

Student Info

<h2 id='html-questions>HTML Questions</h2></section> <section role="region" aria-labelledby="css-questions"><h2 id="css-questions">CSS Questions</h2></section> </form> <pre data-code-wrap="html"><code class="lang-html"><!-- file: index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" /> <title>Accessibility Quiz</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"> <h1>HTML/CSS Quiz</h1> <nav> <ul> <li><a>INFO</a></li> <li><a>HTML</a></li> <li><a>CSS</a></li> </ul> </nav> </header> <main> <!-- User Editable Region --> <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz"> <section role="region" aria-labelledby="student-info"><h2 id='student-info'>Student Info</h2></section> <section role="region" aria-labelledby="html-questions"><h2 id='html-questions>HTML Questions</h2></section> <section role="region" aria-labelledby="css-questions"><h2 id="css-questions">CSS Questions</h2></section> </form> <!-- User Editable Region --> </main> </body> </html> </code></pre> <pre data-code-wrap="css"><code class="lang-css">/* file: styles.css */ body { background: #f5f6f7; color: #1b1b32; font-family: Helvetica; margin: 0; } header { width: 100%; height: 50px; background-color: #1b1b32; display: flex; } #logo { width: max(100px, 18vw); background-color: #0a0a23; aspect-ratio: 35 / 4; padding: 0.4rem; } h1 { color: #f1be32; font-size: min(5vw, 1.2em); } nav { width: 50%; max-width: 300px; height: 50px; } nav > ul { display: flex; justify-content: space-evenly; } </code></pre> <h3><a name="your-browser-information-3" class="anchor" href="#your-browser-information-3"></a>Your browser information:</h3> <p>User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36</code></p> <h3><a name="challenge-information-4" class="anchor" href="#challenge-information-4"></a>Challenge Information:</h3> <p>Learn Accessibility by Building a Quiz - Step 16<br> <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-16" class="onebox" target="_blank">https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-16</a></p>

Sorry not sure it posted correctly

Student Info

<h2 id='html-questions>HTML Questions</h2></section> <section role="region" aria-labelledby="css-questions"><h2 id="css-questions">CSS Questions</h2></section> </form>

nevermind! was missing a quotation the code sometimes gets too crowded for me to see

Go to your challenge were you find a help button, click on it create a post then we can see your code correctly and help you better.
@evietharpe1

1 Like

Hi @evietharpe1

<h2 id='html-questions>HTML Questions</h2>

The id attribute value is missing a closing quote mark.

Happy coding