6

Ho creato una pagina utilizzando Bootstrap con un layout standard dei collegamenti pagina successiva e precedente. Nella prima pagina, a disattivare il link 'pagina precedente' come segue:Can aria-disabled può essere applicato solo a un elemento focalizzabile? Non si applica anche agli elementi figlio?

<div role="navigation"> 
    <ul class="pager"> 
    <li class="previous disabled" aria-disabled="true"> 
     <a href="#">Previous page</a> 
    </li> 
    <li class="next"> 
     <a href="search.php?page=2">Next page</a> 
    </li> 
    </ul> 
</div> 

Sembra screen reader (JAWS, NVDA e VoiceOver) non si è visto la bandiera aria-disabled="true", anche se il W3C WAI-ARIA spec stati:

lo stato di essere disabilitato vale per l'elemento corrente e tutti gli elementi discendenti focalizzabili dell'elemento sul quale viene applicato l'attributo aria disabilitata.

Se aggiungo aria-disabled="true" al link:

... 
    <li class="previous disabled" aria-disabled="true"> 
     <a href="#" aria-disabled="true">Previous page</a> 
    </li> 
    ... 

allora funziona come avevo sperato, con lo screen reader che descrive il collegamento come 'disabilitato'.

Sto fraintendendo le specifiche WAI-ARIA, o si tratta di una 'funzione' dell'implementazione dello screen reader? In his comment on 'How do i tell a screen reader that a link is disabled', Bryan Garaventa menzioni:

... l'uso di aria-disabile funziona meglio per gli elementi che hanno un ruolo definito, come ad esempio il ruolo tasto =.

Può aria-disabledsolo essere applicato ad elementi focusable?

+0

Sembra che tu abbia dei bug scoperti nelle implementazioni, per favore segnala questo bug ai venditori del browser – unobf

risposta

1

Con JAWS 16, sia IE che Chrome hanno il problema che descrivi, ma 38 FF funziona correttamente (non sono sicuro delle versioni precedenti di FF). Quando ho scheda al link dove il <li> ha aria-disabled="true" e non c'è non un'aria-disabled = "true" sul <a>, FF 38 e 16 JAWS dice "pagina precedente disponibile collegamento".

In realtà non mi impedisce di attivare quel collegamento, perché non è quello per cui aria è disattivato, ma JAWS sembra sapere che l'elemento figlio è disabilitato perché il genitore è disabilitato.

Funziona anche in VoiceOver su iOS 8.3 su un ipad2. VO dice "pagina precedente oscurata collegamento"

questo potrebbe essere un caso in cui si deve decidere se mantenere il codice HTML formattato correttamente e lasciare che l'user agent risolvere il bug, o se si dovrebbe cercare di codice per aggirare il problema , che nel tuo caso stava mettendo l'aria disabilitata sul link stesso.