Why is aria-labelledby needed?

pinkod02 · February 3, 2023, 12:57pm

I can’t figure out what this attribute does and how it should be written and where? because the instructions on this site have not been finalized to the mind.
Also, here is my code, but in order to explain it to me, I need to understand, but there is no understanding from these tasks.

"
<!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"></section>
        <section role="region"></section>
        <section role="region"></section>
      </form>
    </main>
  </body>
</html>

"

pinkod02 · February 3, 2023, 1:06pm

Your link is not displayed at all stages, you have errors on the site that need to be fixed.

JeremyLT · February 3, 2023, 3:01pm

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

JeremyLT · February 3, 2023, 3:05pm

I think this is the Step you are working on

I have confirmed that the Ask For Help button works correctly on this page.

The task is explained here

To the section elements, give the following aria-labelledbyattributes:

student-info

html-questions

css-questions

Do you know what a section element is?

Do you know what an attribute is?

Do you know how to add an attribute?

Do it you know how to set the value of an attribute?

lasjorg · February 3, 2023, 3:52pm

I agree that it doesn’t much explain what the attribute is used for but that really isn’t required to complete the challenge.

I would suggest you Google the attribute to learn more about it (or anything in the curriculum you do not find a satisfying explanation of).

You can think of the aria-labelledby a bit like a for attribute on a label element and how it connects to an element with an id attribute.

Referencing a label

Using aria-labelledby, an element’s label can be set by referencing the ID of another element. For example, the following link’s label is “No, Bing!”:

<a href="..." aria-labelledby="bing">
  Google
</a>

<div id="bing">
  No, Bing!
</div>

Here is an example closer to what the challenge is asking for:

<section role="region" aria-labelledby="info">
  <h2 id="info">Get more info</h2>
</section>

pinkod02 · February 3, 2023, 7:25pm

When I taught layout at school, everything was simple and clear, but here it’s impossible to understand anything at all, why such difficulties as a region indicated by arias, a roll, it’s not realistic to understand why you complicate simple material?

JeremyLT · February 3, 2023, 7:30pm

Coding is not ‘simple’.

I’d bet you were taught in Russian. Learning, or reviewing, something complex like coding in a language that isn’t your native language is doubly hard. It being hard just means its hard. It doesn’t mean we are cruelly attempting to sabotage your education with confusing language.

pinkod02 · February 3, 2023, 7:55pm

Yes, they taught in Russian.

pinkod02 · February 3, 2023, 7:57pm

But you left not far from Russian schools; They also like to advise you this way when they cannot teach students in your country, is this normal?

pinkod02 · February 3, 2023, 7:42pm

Tell us what’s happening:
Describe your issue in detail here.

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>

<!-- User Editable Region -->

      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section aria-labelledby="student-info" role="region">
          <h2 id="student-info">student-info</h2>
        </section>

        <section aria-labelledby="html-guestions" role="region">
          <h2 id="html-guestions">html-guestions</h2>
          </section>

        <section aria-labelledby="css-questions" role="region">
          <h2 id="css-questions">css-questions</h2>
        </section>
      </form>

<!-- User Editable Region -->

    </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/108.0.0.0 YaBrowser/23.1.1.1138 Yowser/2.5 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

The code as always does not work, where is the error?

ahmads14nabil · February 3, 2023, 7:54pm

You mistakenly put “html-guestions” instead of “html-questions”.

lasjorg · February 3, 2023, 9:04pm

You are super close. Check for typos.

You should give the second section element an aria-labelledby attribute of html-questions .

<section aria-labelledby="html-guestions" role="region">
   <h2 id="html-guestions">html-guestions</h2>
 </section>

bbsmooth · February 3, 2023, 11:49pm

FYI, I’m currently working on a suggestion to reword the instructions for this step because there is a slight error in the accessibility information it is giving and also with the hopes of explaining more clearly what the aria-labelledby attribute is doing here.

bbsmooth · February 3, 2023, 11:57pm

The aria-labelledby attribute is used to give elements an accessible name. The accessible name is used by assistive technology, primarily screen readers, to help the user distinguish an element from other elements on the page.

In this case, there are three regions on the page. Screen reader users are able to navigate a page by these regions. Without an accessible name a screen reader user will just hear “region” when they navigate to each of these regions, so they won’t be able to tell which one they are on. By adding an accessible name with aria-labelledby they will hear the name of the region as well, so now they will know which region they are currently on.

system · August 5, 2023, 11:57am

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