Passa al contenuto principale

Accessibility Quiz

Il Progetto​

Quiz interattivo HTML/CSS incentrato sull’accessibilità web, sviluppato come parte del curriculum freeCodeCamp.

Codice Sorgente​

<!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" alt="freeCodeCamp" 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">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input type="text" name="student-name" id="student-name" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" name="student-email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">Date of Birth:</label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <h3><span class="sr-only">Question</span>1</h3>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <h3><span class="sr-only">Question</span>2</h3>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
          <div class="formrow">
            <div class="question-block">
              <label for="selector">Can the CSS margin property accept negative values?</label>
            </div>
            <div class="answer">
              <select name="selector" id="selector" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div class="question-block">
              <label for="css-textarea">Do you have any questions:</label>
            </div>
            <div class="answer">
              <textarea id="css-textarea" name="css-questions" rows="5" cols="24"></textarea>
            </div>
          </div>
        </section>
        <button type="submit">Send</button>
      </form>
    </main>
    <footer>
      <address>
        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
        San Francisco<br />
        California<br />
        USA
      </address>
    </footer>
  </body>
</html>

Riflessioni sullo sviluppo​

L’approccio ai commenti​

Ho usato Claude per creare un sistema di commenti didattici seguendo l’approccio del mio handbook personale. Lo utilizzo come tutor, soprattutto dopo aver implementato modifiche richieste da freeCodeCamp senza comprenderne inizialmente le motivazioni dietro ogni scelta.

Penso che freeCodeCamp sia fantastico, ma mi sto rendendo conto che “purtroppo” è molto pratico. Non fraintendermi, è proprio questo il suo punto di forza, ma la mia personalità mi spinge costantemente ad approfondire ciò che mi interessa, anche nel coding.

Il percorso di studio parallelo​

HTML & CSS di Duckett: anche se è un testo di livello base, mi sto rendendo conto di quanto la tecnologia sia avanzata dal 2014. Il libro parla di Flash, Cufon… tutto “fortunatamente” sostituito da Google Fonts, che ha democratizzato l’accesso ai font.

Corso “Diventare Designer” di Riccardo Breccia: ho impiegato più tempo tra questo progetto e il precedente proprio a causa di questo corso. Sono consapevole che ogni lezione di freeCodeCamp non sarà più la stessa. Ho uno sguardo più raffinato, più attento ai dettagli. Nonostante abbia studiato Design Industriale all’università, ho trovato questo corso più utile di molti esami: estremamente pratico e capace di mettermi davvero alla prova.

Corso Google UX (2/8): l’esatto opposto di Breccia. Estremamente teorico e per ora poco pratico, anche se mi aspetto che la parte applicativa arrivi più avanti.

Refactoring UI: dopo 35 pagine sono già felice dell’investimento. È incredibilmente diretto e utile. Mi pento di non averlo acquistato prima, perché mi sta insegnando un approccio ai progetti che percepisco come senior-level.

Mi aspettavo un manuale sui micro-dettagli UI, invece mi sta fornendo fondamenta essenziali sulla scalabilità del codice. Ho notato che questa specificità (CSS più curato, HTML più consapevole, Figma con componenti e variabili) è ciò che distingue:

  • Junior Developer → Senior Developer
  • Junior UX Designer → Senior UX Designer
  • Junior UX Engineer → Senior UX Engineer

Don’t Make Me Think: un pilastro del mondo UX. Dopo aver amato The Design of Everyday Things di Norman, volevo continuare su quella linea.

La realizzazione​

Tutto questo per dire che forse mi stavo perdendo nel codice, mettendo da parte il design e dimenticando il mio vero obiettivo: unire design e codice.

Ammetto che quando aggiungo nuove conoscenze al mio repertorio e le applico nelle lezioni di freeCodeCamp, mi brillano gli occhi e sorrido come un bambino. Succede anche quando leggo concetti interessanti nei libri di design, ma molto raramente quando uso Figma. Nonostante sia veloce con esso, non mi dà la stessa soddisfazione del coding. Forse perché lo considero “più facile”?

Punti tecnici di rilievo​

Avevo già esplorato la versione finale di questo progetto qualche esercizio fa, ed è stata una delle cose che mi ha fatto venire voglia di accelerare. Gli effetti che mi hanno entusiasmato di più:

  • Smooth scroll behavior
  • Link di navigazione con scrolling fluido
  • Effetti hover interattivi

È tutto ciò che collega quello che ho imparato con Figma al codice, dandomi la sensazione di essere nel posto giusto al momento giusto.

Il concetto più difficile​

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

All’inizio usciva completamente dagli schemi a cui ero abituato, ma ora è chiarissimo: se l’utente non ha limitato le animazioni nelle impostazioni del browser o del dispositivo, il sito lo interpreta come un “ok, via libera alle animazioni”. In questo caso scroll-behavior: smooth.

Note finali​

Ho smesso di tracciare il tempo totale di completamento degli esercizi perché ho capito che la qualità è decisamente più importante della quantità.

Prossimo Progetto: Tribute Page