5.0 KiB

Raw Blame History

id	title	challengeType	dashedName
6143639d5eddc7094161648c	Step 20	0	step-20

--description--

È importante collegare ogni input al corrispondente elemento label. Questo fornisce agli utenti di tecnologie assistive un riferimento visivo all'input.

Ciò si realizza assegnando al label un attributo for che contiene l'id dell'input.

Questa sezione conterrà il nome, l'indirizzo e-mail e la data di nascita di uno studente. Assegna agli elementi label gli attributi for appropriati, oltre al contenuto di testo. Quindi, collega gli elementi input agli elementi label corrispondenti.

--hints--

Dovresti assegnare al primo elemento label un attributo for appropriato.

assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);

Dovresti assegnare al secondo elemento label un attributo for appropriato.

assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);

Dovresti assegnare al terzo elemento label un attributo for appropriato.

assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);

Dovresti assegnare al primo elemento label un contenuto di testo appropriato.

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

Dovresti assegnare al secondo elemento label un contenuto di testo appropriato.

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

Dovresti assegnare al terzo elemento label un contenuto di testo appropriato.

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

Dovresti assegnare al primo elemento input un attributo id corrispondente all'attributo for del primo label.

assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);

Dovresti assegnare al secondo elemento input un attributo id corrispondente all'attributo for del secondo label.

assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);

Dovresti assegnare al terzo elemento input un attributo id corrispondente all'attributo for del terzo label.

assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);

Non dovresti usare lo stesso attributo id per più di un elemento input.

const id = (n) => document.querySelectorAll('input')?.[n]?.id;
assert.notEqual(id(0), id(1));
assert.notEqual(id(0), id(2));
assert.notEqual(id(1), id(2));

Non dovresti usare lo stesso attributo for per più di un elemento label.

const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
assert.notEqual(htmlFor(0), htmlFor(1));
assert.notEqual(htmlFor(0), htmlFor(2));
assert.notEqual(htmlFor(1), htmlFor(2));

--seed--

--seed-contents--

<!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 href="#student-info">INFO</a></li>
          <li><a href="#html-questions">HTML</a></li>
          <li><a href="#css-questions">CSS</a></li>
              </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label></label>
            <input />
          </div>
          <div class="info">
            <label></label>
            <input />
          </div>
          <div class="info">
            <label></label>
            <input />
          </div>
        </section>
--fcc-editable-region--
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </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(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;
}

h1,
h2 {
    font-family: Verdana, Tahoma;
}

h2 {
    border-bottom: 4px solid #dfdfe2;
}

5.0 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

5.0 KiB

Raw Blame History