Quando utilizzare l'attributo disabilitato rispetto all'attributo aria-disabled per gli elementi HTML?

Question

Sto provando a rendere accessibile un modulo. Devo fare in modo che i miei input abbiano entrambi gli attributi disabled e aria-disabled o uno solo?

<label for="textbox1">Input</label> 
<input id="textbox1" type="text" name="Text Box" disabled> 

O come questo?

<label for="textbox1">Input</label> 
<input id="textbox1" type="text" name="Text Box" aria-disabled="true"> 

O come questo?

<label for="textbox1">Input</label> 
<input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled> 

Answer 1

posso prendere il vostro esempio, metterlo in a CodePen, e controllarlo in JAWS e NVDA (sorry, no VoiceOver oggi):

<label for="textbox1">Input</label> 
<input id="textbox1" type="text" name="Text Box" disabled> 

Sarete felici di sapere che sia NVDA e JAWS saltare il campo (o se è esplicitamente focalizzato, annuncia che è disabilitato).

In breve, è non più necessario aria-disabled. Basta usare disabled.

Si può leggere un po 'di più sul ARIA attributi si può scaricare in questo articolo da Steve Faulkner (uno dei redattori della specifica ARIA) dal 2015 (anche se aria-disabled non espressamente elencato, il concetto è lo stesso): http://html5doctor.com/on-html-belts-and-aria-braces/

Se la mia risposta è simile a your other question su required contro aria-required, che è perché è essenzialmente la stessa risposta.

Answer 2

In breve, non hai più bisogno di aria disabilitata. Basta usare disabilitato.

Per completare la risposta @aardrian.

Quando si utilizza un controllo HTML che supporta in modo nativo l'attributo disabled, non è necessario l'attributo aria-disabled.

Se si utilizza un controllo personalizzato, è possibile utilizzare l'attributo aria-disabled. Ad esempio, nel codice seguente, il pulsante "Pausa" sarà disabilitato fino a quando non si preme il pulsante "Riproduci" (il nostro javascript cambierà quindi gli attributi tabindex e aria-disabled).

<img src="controls/play.png" 
    id="audio-start" 
    alt="Start" 
    role="button" 
    aria-disabled="false" 
    tabindex="0" /> 

<img src="controls/pause.png" 
    id="audio-pause" 
    alt="Pause" 
    role="button" 
    aria-disabled="true" 
    tabindex="-1" /> 

Nota che secondo il W3C:

elementi disabili potrebbero non ricevere l'attivazione da l'ordine di tabulazione. [...] Oltre ad impostare l'attributo aria-disabled, gli autori DEVONO cambiare l'aspetto (in grigio, ecc.) Per indicare che l'elemento è stato disabilitato.

Answer 3

Una distinzione importante è che quando si utilizza la voce fuori campo l'elemento con la proprietà 'disabilitata' non verrà visualizzato. Tuttavia l'elemento con aria-disabled = "true" sarà ancora in grado di ricevere lo stato attivo e riportare allo screen reader in grigio.