Esercizi Attributi ARIA HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi dell’accessibilità in HTML e l’utilizzo degli attributi ARIA.

Esercizio 1

Utilizza l'attributo aria-label per fornire un'etichetta esplicita per un elemento senza utilizzare l'etichetta `label`.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
  </head>
  <body>
    <input type="text" name="nome" aria-label="Nome" />
  </body>
</html>

Esercizio 2

Utilizza l'attributo role per assegnare un ruolo esplicito a un elemento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <div role="navigation">
      <a href="#">Home</a>
      <a href="#">Servizi</a>
      <a href="#">Contatti</a>
    </div>
  </body>
</html>

Esercizio 3

Utilizza l'attributo aria-disabled per indicare che un elemento è disabilitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <button aria-disabled="true">Pulsante disabilitato</button>
  </body>
</html>

Esercizio 4

Utilizza l'attributo aria-labelledby per fornire un riferimento all'ID di un elemento che funge da etichetta per un altro elemento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <h2 id="title">Titolo dell'elemento</h2>
    <div aria-labelledby="title">Contenuto dell'elemento</div>
  </body>
</html>

Esercizio 5

Utilizza l'attributo aria-placeholder per fornire un suggerimento esplicito per l'input dell'utente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <input type="text" aria-placeholder="Inserisci il tuo nome" />
  </body>
</html>

Esercizio 6

Utilizza l'attributo aria-invalid per indicare che un campo di input contiene un valore non valido.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <input type="text" aria-invalid="true" value="valore non valido" />
  </body>
</html>

Esercizio 7

Utilizza l'attributo aria-expanded per indicare lo stato di un elemento espandibile.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
  </head>
  <body>
    <button aria-expanded="false">Espandi</button>
  </body>
</html>

Esercizio 8

Utilizza l'attributo aria-selected per indicare lo stato di selezione di un elemento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
  </head>
  <body>
    <ul>
      <li aria-selected="true">Elemento 1</li>
      <li aria-selected="false">Elemento 2</li>
      <li aria-selected="false">Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 9

Utilizza l'attributo aria-hidden per indicare che un elemento è nascosto agli utenti.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
  </head>
  <body>
    <p aria-hidden="true">Questo testo è nascosto.</p>
  </body>
</html>