---
id: 614202874ca576084fca625f
title: Hatua ya 16
challengeType: 0
dashedName: step-16
---

# --description--

Kila `region` inahitaji lebo, ambayo husaidia watumiaji wa kisoma skrini kuelewa madhumuni ya eneo. Njia moja ya kuongeza lebo ni kuongeza kipengele cha kichwa ndani ya eneo na kisha kurejelea na sifa ya  `aria-labelledby`.

Ongeza sifa zifuatazo za `aria-labelledby` kwa vipengele vya `section`:

- `student-info`
- `html-questions`
- `css-questions`

Kisha, ndani ya kila kipengele cha `section`, weka kipengele kimoja cha `h2` chenye `id` inayolingana na sifa ya `aria-labelledby`. Ipe kila `h2` maudhui ya maandishi yanayofaa.

# --hints--

Unapaswa kukipa kipengele cha kwanza cha `section` sifa ya `aria-labelledby` ya `student-info`.

```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
```

Unapaswa kukipa kipengele cha pili cha `section` sifa ya `aria-labelledby` ya `html-questions`.

```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
```

Unapaswa kukipa kipengele cha tatu cha `section` sifa ya `aria-labelledby` ya `css-questions`.

```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
```

Unapaswa kuweka kipengee kimoja cha `h2` ndani ya kipengele cha kwanza cha `section`.

```js
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
```

Unapaswa kuweka kipengee kimoja cha `h2` ndani ya kipengele cha pili cha `section`.

```js
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
```

Unapaswa kuweka kipengee kimoja cha `h2` ndani ya kipengele cha tatu cha `section`.

```js
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
```

Unapaswa kukipa kipengele cha kwanza cha `h2` sifa ya `id` ya `student-info`.

```js
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
```

Unapaswa kukipa kipengele cha pili cha `h2` sifa ya `id` ya `html-questions`.

```js
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
```

Unapaswa kukipa kipengele cha tatu cha `h2` sifa ya `id` ya `css-questions`.

```js
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
```

Unapaswa kukipa kipengele cha kwanza cha `h2` maudhui ya maandishi yanayofaa. _Kidokezo: Ningechagua `Student Info`_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
```

Unapaswa kukipa kipengele cha pili cha `h2` maudhui ya maandishi yanayofaa. _Kidokezo: Ningechagua `HTML`_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
```

Unapaswa kukipa kipengele cha tatu cha `h2` maudhui ya maandishi yanayofaa. _Kidokezo: Ningechagua `CSS`_

```js
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
```

# --seed--

## --seed-contents--

```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>
--fcc-editable-region--
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region"></section>
        <section role="region"></section>
        <section role="region"></section>
      </form>
--fcc-editable-region--
    </main>
  </body>
</html>

```

```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;
}
```
