Lo scopo dell'utilizzo di "aria-labelledby" su elementi di input già etichettati?

85

Molti siti Web dimostrativi di ARIA utilizzano codici come:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">

Ma qual è lo scopo di utilizzare l' aria-labelledbyattributo in questo caso? L' inputelemento è già stato etichettato labeldall'elemento che utilizza l' forattributo, non è vero?

— Ian Y.
fonte

1

w3.org/TR/2010/WD-wai-aria-20100916/…

— Sarfraz

8

Grazie @Sarfraz. Tuttavia, quella pagina non illustra lo scopo di tale utilizzo su elementi di input già etichettati.

— Ian Y.

69

Ci sono alcuni buoni esempi del suo utilizzo nelle pagine degli sviluppatori Mozilla . Forse il migliore dei loro esempi è dove viene utilizzato per associare un menu a comparsa con la voce di menu principale: è l'esempio 7 nella pagina:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...

Gli attributi ARIA tendono ad essere di grande utilità nella creazione di applicazioni Internet ricche accessibili : fintanto che ti attieni all'HTML semantico standard - utilizzando moduli con etichette standard - non dovresti assolutamente averne bisogno: quindi non c'è motivo di usarlo su una coppia LABEL / INPUT. Ma se stai creando una "ricca interfaccia utente" da zero (DIV e altri elementi di basso livello con javascript che aggiunge interattività), allora è essenziale per far sapere a uno screen reader qual è l'intento di livello superiore.

— BrendanMcK
fonte

11

Grazie @BrendanMcK. Quello che hai detto è vero. Avevo chiesto a qualcuno che lavora per ARIA e anche lui ha detto che in questo caso non è necessario usare aria-etichettato. Per etichettare <input>, ha detto di usarlo solo quando dobbiamo etichettare un <input> con più <label>. Ecco un esempio che ha fornito: html5accessibility.com/tests/mulitple-labels.html

— Ian Y.

1

È possibile associare più di un'ETICHETTA allo stesso controllo creando più riferimenti tramite l'attributo for . Ok, a WAVE / WebAIM non piace e si scopre che c'è un problema con il supporto UA . Ma il suo suggerimento è semplicemente strano e non credo abbia alcun vantaggio reale. Almeno IE <= 8 non supporta più ID in aria-labelledby .

— sourcejedi

1

questo collegamento DEVE essere qui: developer.mozilla.org/en-US/docs/Accessibility/ARIA

— Facundo Colombier

5

Ci sono sempre problemi di supporto UA con qualsiasi novità, ecco perché gli sviluppatori guardano al miglioramento progressivo. Questa tecnica ARIA fornisce la capacità di eliminare l'attributo "for" e consente ad altri elementi di diventare parte della forma ricca. Queste tecniche diventeranno pratica comune.

— user2323922
fonte

1

Mette a fuoco l'elemento quando viene cliccato come fa l'attributo for? Immagino di no

— Dominic

3

Completamente falso. Gli attributi aria NON dovrebbero sostituire altri attributi poiché il loro unico scopo è aiutare a rendere gli elementi più accessibili. Gli elementi NON dovrebbero essere attivabili a causa di qualsiasi attributo aria.

— Gust van de Wal

1

La pratica comune (purtroppo?) Attualmente non è ancora vera secondo me. La migliore pratica, potrebbe essere una scelta migliore. Forse in futuro, quando è pratica comune che l'intelligenza artificiale altamente avanzata scriva html invece degli umani :)

— Michael