Why is aria-labelledby needed?

HTML-CSS
1

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>

"
2

Please always post the url to the step/challenge you are currently working on so we have more context.

Thank you.

In the future, the easiest way to do this is to use the Get Help link on the step/challenge which will allow you to create a forum post with your code and a link to the challenge.

3

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

4

I am a forum volunteer. It is not my site. The link to get help appears after a few attempts at solving the step. What errors are you talking about?

Also, nothing prevents you from copying/pasting the url to the step. You must always supply this a we can not read your mind.

5

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

6

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?

7

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>
8

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?

9

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.

10

No one is forcing you to use this curriculum. If you think there is better curriculum out there, I would recommend finding and using it instead.

This curriculum is designed to build a project without always explaining why of every little thing you are instructed to do. If you work through the entire curriculum, you will start to see patterns in the implementation of various concepts and learn the “why” part. If not, then you can always use Google to research a concept further.

2 Likes
11

Yes, they taught in Russian.

12

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?

1 Like
13

I do not understand your question.

14

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?

15

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

1 Like
16

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>
17

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.

18

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.

1 Like