Cos'è l'etichetta aria e come dovrei usarla?

322

Qualche ora fa ho letto dell'attributo aria-label , che:

Definisce un valore di stringa che identifica l'elemento corrente.

Ma secondo me questo è ciò che l' titleattributo avrebbe dovuto fare. Ho cercato ulteriormente nella rete di sviluppatori Mozilla per ottenere alcuni esempi e spiegazioni, ma l'unica cosa che ho trovato è stata

<button aria-label="Close" onclick="myDialog.close()">X</button>

Il che non mi fornisce alcuna etichetta (quindi presumo di aver frainteso l'idea). L'ho provato qui in jsfiddle .

Quindi la mia domanda è: perché ho bisogno aria-labele come dovrei usarlo?

html assistive-technology

— Salvador Dalì
fonte

3

Guardando la risorsa che hai collegato sembra che aria-labelpossa essere usato se non vuoi mostrare la descrizione fornita dall'attributo title: Nei casi in cui un'etichetta visibile o una descrizione visibile non è desiderabile, gli autori POSSONO impostare il nome accessibile del elemento che utilizza l'etichetta aria

— Fabrizio Calderan,

13

fyi ARIA = Applicazioni Internet Rich accessibili

— Eric D'Souza

Qualcuno sa se è appropriato usare aria-label per un testo <h1> più descrittivo quando il testo visibile reale all'interno dell'elemento <h1> è troppo breve e non si desidera che il testo completo sia visibile? Negli esempi in questo thread, è possibile utilizzare un'etichetta. Ma le etichette non si applicano ai titoli ed è per questo che chiedo

— HelloWorld

L'unica cosa appropriata appropriata che stai chiedendo è la proprietà "longdesc" (solo per immagini) che ha bisogno di più informazioni - non posso immaginare che ce ne sarebbe una per il testo in quanto dovrebbe sempre essere descrittiva comunque Temo. - @HelloWorld

— Jamie Paterson,

427

È un attributo progettato per aiutare la tecnologia assistiva (ad esempio gli screen reader) ad attaccare un'etichetta a un elemento HTML altrimenti anonimo.

Quindi c'è l' <label>elemento:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

L' <label>utente dice esplicitamente all'utente di digitare il proprio nome nella inputcasella dove id="fmUserName".

aria-labelfa più o meno la stessa cosa, ma è per quei casi in cui non è pratico o desiderabile avere uno labelschermo. Prendi l'esempio MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Molte persone sarebbero in grado di dedurre visivamente che questo pulsante chiuderà la finestra di dialogo. Una persona cieca che utilizza la tecnologia assistiva potrebbe semplicemente sentire "X" leggere ad alta voce, il che non significa molto senza gli indizi visivi. aria-labeldice esplicitamente loro cosa farà il pulsante.

— Olly Hodgson
fonte

4

Grazie per la spiegazione, ma come si sentirà vicino? Cosa posso fare nel mio browser (Chrome) per ascoltare questo? E come può un cieco selezionare questo pulsante se non ha idea di dove sia?

— Salvador Dali,

1

Immagino che un'estensione come ChromeVox sarebbe un buon punto di partenza? Non l'ho mai usato però. Funzionano leggendo lo schermo ad alta voce per l'utente, prendendo spunti dall'HTML (ad esempio un h1dovrebbe essere enfatizzato più di un p, aè chiaramente un , modulo di collegamento` indica un posto dove inserire informazioni, gli aria-*attributi forniscono ulteriori indizi su cosa fanno gli elementi, ecc.) .

— Olly Hodgson,

2

In questo caso particolare, lo aggiungerei a un titolo attribute. Nessun danno nel mostrare un suggerimento per "vedere" gli utenti quando passano il mouse sulla X.

— GolezTrol

3

Oltre a ChromeVox, c'è NVDA . Entrambi sono abbastanza facili da installare e avviare e abbastanza difficili da padroneggiare.

— Ivarni,

1

@SalvadorDali - solo per informazione. in cieco mobile può abilitare lo strumento di accessibilità come per Android mobile è TalkBack e per cellulari iOS è VoiceOver. usando questo, la pagina viene letta riga per riga.

— Rahul J. Rane,

71

Nell'esempio che hai dato, hai perfettamente ragione, devi impostare l'attributo title.

Se aria-labelè uno strumento utilizzato dalle tecnologie assistive (come gli screen reader), non è supportato nativamente sui browser e non ha alcun effetto su di essi. Non sarà di alcun aiuto per la maggior parte delle persone prese di mira dal WCAG (tranne gli utenti degli screen reader), ad esempio una persona con disabilità intellettive.

La "X" non è sufficiente per fornire informazioni sull'azione guidata dal pulsante (pensa a qualcuno che non ha conoscenze informatiche). Potrebbe significare "chiudere", "cancellare", "cancellare", "ridurre", una strana croce, uno scarabocchio, niente.

Nonostante il fatto che il W3C sembra promuovere aria-labelpiuttosto l' titleattributo qui: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 in un esempio simile, puoi vedere che la tecnologia il supporto non include i browser standard: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

In effetti aria-label, in questa situazione esatta potrebbe essere usato per dare più contesto a un'azione:

Ad esempio, i non vedenti non percepiscono popup come quelli di noi con una buona visione, è come un cambiamento di contesto. "Torna alla pagina" sarà un'alternativa più conveniente per uno screen reader, quando "Chiudi" è più significativo per qualcuno che non ha uno screen reader.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

— Adamo
fonte

35

Se vuoi sapere come aria-labelti aiuta praticamente .. quindi segui i passaggi ... lo otterrai da solo ..

Crea una pagina html con il seguente codice

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Ora, è necessario un emulatore di screen reader virtuale che verrà eseguito sul browser per osservare la differenza. Così, cromo utenti del browser possono installare ChromeVox estensione e gli utenti di Mozilla può andare con le zanne schermo lettore Addin

Una volta terminata l'installazione, mettiti le cuffie nelle orecchie, apri la pagina html e concentrati su entrambi i pulsanti (premendo la scheda) uno a uno .. e puoi sentire .. concentrarsi su first x button.. te lo dirà solo x button.. ma in caso di second x button.. sentirai back to the page buttonsolo ..

spero che tu l'abbia capito bene !!

— Moumit
fonte

1

Un punto importante è che l' titleattributo viene ignorato, anche sul primo pulsante. Maggiori informazioni: silktide.com/…

— Sphinxxx,

2

È ancora il caso? Ancora meglio fornire o title e aria-label ?

— Kamafeather,

2

Questo è esattamente quello che volevo. Volevo solo vedere e sentire come funziona nel mondo reale e chromevoxfunziona come un incantesimo e reciterà i campi contrassegnati dall'aria. Grazie.

— Raj Rajeshwar Singh Rathore,

7

Prerequisiti:

Aria viene utilizzata per migliorare l'esperienza dell'utente degli utenti ipovedenti. Gli utenti non vedenti navigano attraverso l'applicazione utilizzando software di lettura dello schermo come JAWS, NVDA, .. Durante la navigazione attraverso l'applicazione, il software di lettura dello schermo annuncia il contenuto agli utenti. Aria può essere utilizzato per aggiungere contenuti nel codice che aiuta gli utenti di screen reader a comprendere il ruolo, lo stato, l'etichetta e lo scopo del controllo

Aria non cambia nulla visivamente. (Anche Aria ha paura dei designer).

Aria-label

L'attributo aria-label viene utilizzato per comunicare l'etichetta agli utenti dello screen reader. Di solito il campo di immissione della ricerca non ha un'etichetta visiva (grazie ai designer). aria-label può essere utilizzato per comunicare l'etichetta di controllo agli utenti dello screen reader

Come usare:

<input type="edit" aria-label="search" placeholder="search">

Non ci sono cambiamenti visivi nell'applicazione. Ma gli screen reader possono comprendere lo scopo del controllo

Aria-labelledby

Sia aria-label che aria-labelledby sono usati per comunicare l'etichetta. Ma aria-labelledby può essere usato per fare riferimento a qualsiasi etichetta già presente nella pagina mentre aria-label viene usato per comunicare l'etichetta che non ho visualizzato visivamente

Approccio 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Approccio 2:

aria-labelledby può anche essere usato per combinare due etichette per gli utenti di screen reader

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

— ndioewbnc
fonte

3

L' titleattributo visualizza una descrizione comandi quando il mouse passa sull'elemento. Sebbene questa sia una grande aggiunta, non aiuta le persone che non possono usare il mouse (a causa di disabilità motorie) o le persone che non possono vedere questo suggerimento (ad esempio: persone con disabilità visive o persone che usano uno screen reader).

Pertanto, l'approccio consapevole qui sarebbe quello di servire tutti gli utenti. Vorrei aggiungere entrambi titlee aria-labelattributi (che servono diversi tipi di utenti e diversi tipi di utilizzo del web).

Ecco un buon articolo che spiega aria-labelin modo approfondito

— lucalanca
fonte