Selezionare pulsanti e link in base alla funzione piuttosto che all'aspetto.

Quando un pulsante e quando un link sono gli elementi di controllo semanticamente corretti?

Un link conduce a un URL o a una posizione diversa, mentre un pulsante modifica lo stato corrente o attiva un'azione. L'elemento nativo viene scelto in base a questa sequenza e progettato in modo indipendente, in modo che il comportamento di tastiera, browser e tecnologie assistive rimanga prevedibile.

Destinazione di navigazione

• Destinazione di navigazione Il passaggio a un URL, a un'ancora di documento o a una risorsa esterna viene implementato con un vero e proprio link.

• Azione eseguita – Un cambio di stato, un'azione su un modulo o un controllo dell'interfaccia utilizza un pulsante con il comportamento predefinito appropriato.

• Funzionamento previsto Il tipo di elemento, il nome accessibile, lo stato di focus e l'attivazione tramite tastiera corrispondono alla stessa funzione riconoscibile.

Azione eseguita

1. Per ogni elemento interattivo, descrivere chiaramente la sequenza di attivazione come un'azione di cambio di posizione o di stato.

2. Utilizzare il link o il pulsante nativo appropriato e disaccoppiare completamente lo stile dall'elemento HTML selezionato.

3. Testare in pratica il clic, il tasto Invio, la barra spaziatrice, il menu contestuale e la visualizzazione del focus in base al comportamento previsto dell'elemento.

Scenario pratico: "Link come interruttore"

Un componente mappa utilizza un pulsante con JavaScript per passare alla pagina dei dettagli, mentre un link senza href apre l'area dei filtri. I ruoli sono invertiti: il titolo della mappa diventa un vero e proprio link, l'apertura del filtro un pulsante con `aria-expanded`; entrambi mantengono il loro design visivo precedente.

Link come interruttore

• Link come interruttore – Un elemento `a` senza un `href` controlla uno stato e non si comporta come previsto durante la digitazione, la copia o l'apertura di una nuova scheda.

• Pulsante come navigazione – JavaScript modifica l'URL tramite un pulsante e rimuove funzionalità del browser come l'anteprima del link o l'apertura in una nuova finestra.

• Aspetto come semantica – I componenti vengono denominati in base al colore o alla forma e cambiano il loro tipo di elemento, anche se la loro funzione rimane la stessa.

Funzionamento previsto

• Percentuale di interazioni inventariate il cui tipo di elemento nativo corrisponde alla sequenza di navigazione o di azione documentata.

• Numero di gestori di clic personalizzati su elementi non interattivi o link e pulsanti con comportamento predefinito ricreato artificialmente.

Quali domande attivano ulteriori controlli dopo la "Selezione semantica di pulsanti e link"?

Una domanda approfondita con relativa risposta Etichettare in modo chiaro PDF, download e link esterniCome etichettare in modo chiaro e accessibile PDF, download e link esterni?

Vengono offerti ulteriori punti di vista Evitare la navigazione JavaScript senza link reali..

Se si desidera implementare concretamente la "Selezione semantica di pulsanti e link", è possibile trovare maggiori informazioni su. . . Sistemi web robusti Fare riferimento a questo documento. L'attenzione si concentra su "Semantica nativa e struttura della pagina" e "Obiettivo di navigazione".

Conclusione: Scegliere pulsanti e link in modo semantico.

I link trasportano gli utenti a un'altra posizione, mentre i pulsanti modificano lo stato corrente o attivano un'azione. Questo confine funzionale crea un comportamento prevedibile indipendentemente dal design.

Fonti e ulteriori informazioni

La seguente documentazione e gli standard ufficiali forniscono la classificazione tecnica.

• Standard HTML: Semantica – WHATWGSpecifica primaria per i ruoli e le strutture semantiche degli elementi HTML nativi.

• Intestazioni - Iniziativa W3C per l'accessibilità webGuida ufficiale all'implementazione per i ranghi delle intestazioni, l'organizzazione dei contenuti e le relazioni con le regioni della pagina.

• ARIA in HTML — Raccomandazione W3CL'attuale raccomandazione W3C definisce quali ruoli e attributi ARIA sono aggiunte consentite alla semantica HTML e quali usi ridondanti o contraddittori dovrebbero essere evitati.