Esercizi Attributi ARIA HTML
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>