Learn Accessibility by Building a Quiz - Step 16

HTML-CSS
1

Tell us what’s happening:
please what does aria-labelledby means?
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" aria-labelledby="student-ifo"><h2>student-info</h2></section>
        <section role="region" id="aria-labelledby"><h2>html-questions</h2>
</section>
        <section role="region" ><h2 aria-labelledby>css-questions</h2>
</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:

1 Like
2

okay this took some googling…

I found this description of what aria-labelledby does:

Specifically they say:

The aria-labelledby attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology

So it seems what you are learning here is how to help the assistive apps to understand that the specific h1 is the label for the whole section.
(so that if a person who cannot see for eg is trying to go through the different sections, the app knows what to present to him/her so they can quickly navigate through the sections)

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.