Learn Accessibility by Building a Quiz - Step 16

HTML-CSS
1

Tell us what’s happening:
what i do wrong here!
or
what i can do here of this problem

Your code so far

<!-- 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>
    <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
      <section role="region">
        <h2 id="student-info aria-labelledby" >Student Info</h2>
      </section>
      <section role="region"></section>
      <section role="region"></section>
    </form>
  </main>
</body>

</html>

/* 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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

2

remember that the id attribute should only have one value in it (like a human being only has one name).

The exercise says:

To the section elements, give the following aria-labelledby attributes:

The key word here is ‘attributes’.

Recall that an HTML attribute is a special word that the browser understands and that is added to the opening tag of the respective element.

So each of the section elements will get this new attribute. Assign the value provided in the exercise to each one of these respectively.

Then follow along with the rest of the steps. (remember, you can always check the hints by clicking on the Check button any time)

3

Student Info

html-questions

css-questions

4

step15