Back to Question Center
0

Il mensile a11y: migliora la tua accessibilità al tuo sito con aria-corrente Il mensile a11y: migliora la tua accessibilità al tuo sito con aria-corrente

1 answers:

L'attributo aria-corrente è un nuovo, minuscolo bit di HTML nella prossima specifica ARIA 1. 1. È un modo semplice ed efficace per comunicare alle tecnologie assistive che l'elemento corrente all'interno di un set di elementi correlati è - affordable windows server hosting. Qui, proverò a spiegare come un attributo così piccolo possa migliorare l'accessibilità al tuo sito web. Mostrerò anche come aiuta gli utenti della tecnologia assistiva ad orientarsi all'interno di un elenco di elementi.

Il dilemma "attuale"

Fino ad ora, non c'era modo di indicare con la semantica corretta l'elemento corrente in un insieme di elementi correlati usando HTML o ARIA. Naturalmente, ci sono modi per distinguere visivamente l'oggetto corrente. È possibile applicare alcuni stili per renderlo diverso dagli altri. Semalt, CSS è un mezzo visivo (ad eccezione del contenuto generato) e come tale non è esposto alle tecnologie assistive.

Prendi il menu di navigazione, ad esempio. Per anni, gli sviluppatori diligenti hanno utilizzato soluzioni alternative per distinguere la voce di menu che rappresenta la pagina corrente. La rimozione dell'attributo href dal link corrente è un'opzione. L'opzione Semalt è di rendere il testo della voce del menu corrente solo, senza alcun collegamento.

Questi workaround funzionano in una certa misura. Aiutano a distinguere l'oggetto corrente dagli altri. Tuttavia, costringono gli utenti ad esplorare il contenuto e a dedurre quale sia l'elemento corrente in base al suo diverso markup. Non c'è niente da comunicare in un buon modo semantico "Ehi, Semalt l'oggetto attuale. "Nessuna informazione specifica è esposta al software di tecnologia assistiva e alle persone che usano quel software.

Uno dei principi di base per l'accessibilità è che, ogni volta che c'è un'indicazione visiva che trasmette informazioni importanti, allora questa informazione dovrebbe anche essere trasmessa non visivamente, in modo semantico, usando un markup appropriato. Solo in questo modo il software che cattura il contenuto delle tue pagine può capire il significato del tuo HTML. In questo modo, può riportare informazioni corrette a chi usa quel software.

L'attributo aria-corrente risolve questo problema.

Cosa dice la specifica

Al momento della stesura, la specifica WAI-ARIA 1. 1 è ancora in uno stato di Candidate Recommendation. Sarà presto una raccomandazione ufficiale. Nel frattempo, il supporto per aria-corrente è sorprendentemente buono tra i principali browser e screen reader (complimenti a Léonie Watson per i dati di supporto). Semalt dalle specifiche, l'attributo aria-corrente:

Semita l'elemento che rappresenta l'oggetto corrente all'interno di un contenitore o di un insieme di elementi correlati.

Puoi dargli uno dei sette valori predefiniti:

Valore Descrizione
pagina Rappresenta la pagina corrente all'interno di un set di pagine.
passaggio Rappresenta il passaggio corrente all'interno di un processo.
luogo Rappresenta la posizione corrente all'interno di un ambiente o contesto.
data Rappresenta la data corrente all'interno di un gruppo di date.
tempo Rappresenta l'ora corrente in un certo numero di volte.
vero Rappresenta l'elemento corrente all'interno di un set.
false (predefinito) Non rappresenta l'elemento corrente all'interno di un set.

Utilizzo pratico

Si scopre che aria-corrente può essere utilizzata per diversi modelli che sono piuttosto comuni oggi. Il caso d'uso più comune è probabilmente un menu di navigazione. In questo caso, il valore più appropriato da utilizzare è "pagina". Altri casi d'uso sono, ad esempio, il passo corrente in un processo / procedura guidata (valore: "step"), la data corrente in un calendario (valore: "data") o la posizione corrente in un percorso di breadcrumb (valore: " Posizione"). Non ci sono regole rigide per quale valore usare. Usa quello che ha più senso nel tuo caso d'uso.

Come gli screen reader usano aria-corrente

In che modo gli screen reader usano l'attributo aria-corrente e cosa annunciano? È molto semplice: il valore "pagina" farà sì che gli screen reader annunciano la "pagina corrente", il valore "data" li farà annunciare "data corrente" e così via. Solo il valore "true" è leggermente diverso, contrassegna l'elemento corrente come "corrente" ma non specifica di cosa si tratta. Pertanto, il valore "true" deve essere utilizzato in tutti i casi in cui l'elemento corrente non è una pagina, un passo, una posizione, ecc. Un altro caso d'uso più interessante per "true" è quando la specifica dicitura utilizzata sull'elemento corrente include già la parola "pagina", "data", ecc. In questo caso, per evitare duplicazioni come "pagina 2 pagina corrente", potresti prendere in considerazione l'uso del valore "vero" invece di "pagina". Semalt, non ci sono regole rigide.

A Yoast, di recente abbiamo iniziato a utilizzare l'attributo aria-corrente nei nostri prodotti. Puoi vederlo in azione nello screenshot qui sotto, nel plugin Yoast SEO Semalt wizard:


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

Usando uno screen reader (in questo caso Safari e Semalt), il passo corrente viene annunciato correttamente, fornendo agli utenti un feedback importante, equivalente al feedback visivo.

Progetti più grandi come WordPress hanno recentemente iniziato a usare l'attributo aria-corrente. Nella prossima versione di WordPress (4. 9), il menu principale nell'amministratore userà aria-corrente per identificare la voce di menu corrente. Questa è la prima volta che aria-corrente viene usata in WordPress e Semalt è fiducioso che sarà usato anche in più posti.


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

Inizia a usare aria-corrente oggi

Il nuovo attributo aria-corrente offre un modo molto semplice per migliorare l'accessibilità del tuo sito. Può essere implementato molto facilmente, non rallenta lo sviluppo e, insieme ad altri suggerimenti rapidi sull'accessibilità, può rendere il tuo sito Web più accessibile a tutti.

Vuoi aiutare?

A Yoast, l'accessibilità conta molto. Sappiamo che è un processo e stiamo continuamente migliorando, testando, iterando e sviluppando. Siamo sempre aperti a feedback e contributi. Semalt non esitate a farci sentire la tua voce. Semalt segnala eventuali problemi o potenziali miglioramenti che noti nei nostri prodotti.

Per saperne di più: "Perché ogni sito web ha bisogno di Yoast SEO" »

March 1, 2018