Passo 16

Instruções

A função de cada region requer um rótulo, o que ajuda os usuários de leitores de tela a entenderem o propósito da região. Um método para adicionar um rótulo é adicionar um elemento de título dentro da região e, em seguida, referenciá-lo com o atributo aria-labelledby. Adicione os seguintes atributos aria-labelledby aos elementos section:

student-info
html-questions
css-questions

Então, dentro de cada elemento section, aninhe um elemento h2 com um id que corresponda ao atributo aria-labelledby correspondente. Dê a cada h2 conteúdo de texto adequado.

O que fazer:

Testes:

Você deve dar ao primeiro elemento `section` um atributo `aria-labelledby` de `student-info`.
Você deve dar ao segundo elemento `section` um atributo `aria-labelledby` de `html-questions`.
Você deve dar ao terceiro elemento `section` um atributo `aria-labelledby` de `css-questions`.
Você deve aninhar um elemento `h2` dentro do primeiro elemento `section`.
Você deve aninhar um elemento `h2` dentro do segundo elemento `section`.
Você deve aninhar um elemento `h2` dentro do terceiro elemento `section`.
Você deve dar ao primeiro elemento `h2` um atributo `id` de `student-info`.
Você deve dar ao segundo elemento `h2` um atributo `id` de `html-questions`.
Você deve dar ao terceiro elemento `h2` um atributo `id` de `css-questions`.
Você deve fornecer ao primeiro elemento `h2` um conteúdo de texto adequado. *Dica: Eu teria escolhido `Student Info`*
Você deve fornecer ao segundo elemento `h2` um conteúdo de texto adequado. *Dica: Eu teria escolhido `HTML`*
Você deve fornecer ao terceiro elemento `h2` um conteúdo de texto adequado. *Dica: Eu teria escolhido `CSS`*

<!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="G.E.A.R ACADEMY Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" alt="G.E.A.R ACADEMY" src="https://cdn.G.E.A.R ACADEMY.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://G.E.A.R ACADEMY.org/practice-project/accessibility-quiz">
        <section role="region"></section>
        <section role="region"></section>
        <section role="region"></section>
      </form>

    </main>
  </body>
</html>

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(10rem, 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;
}

Preview