Sto lavorando a un sistema di progettazione che si estende dal framework Bootstrap. Uno degli obiettivi chiave è l'accessibilità. Quando si implementano le schede Bootstrap vedo che applicano role="presentation" agli elementi della lista nella loro lista di navigazione.Perché le schede Bootstrap hanno role = "presentation"?
così ho messo insieme un po 'pezzo di prova HTML dal modello di Bootstrap:
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Le specifiche ARIA dice che la presentazione è un ruolo per il quale:
La destinazione d'uso è quando un elemento viene utilizzato per modificare l'aspetto della pagina ma non ha tutta la pertinenza funzionale, interattiva o strutturale implicita dal tipo di elemento,
Mi sembra che gli elementi <li> abbiano una rilevanza strutturale per qualcuno che utilizza un dispositivo di accessibilità in quanto indicano il numero di schede presenti. Se dovessi scoprire, per esempio, che la terza scheda conteneva le informazioni che ti interessavano, navigando verso l'elenco e sapendo che ci sono tre schede ti consentirebbe di arrivare a quello che vuoi più velocemente.
Inoltre, quando si accede a questo test HTML con ChromeVox, gli elenchi vengono annunciati in modo identico. Quindi sembra che lo role non abbia alcun effetto pratico.
Ho cercato su Google questa domanda, ma non ne ho trovato alcuna discussione. Quindi, qualcuno sa perché questo fa parte del framework Bootstrap?
Se non lo hai, potresti voler controllare https://css-tricks.com/navigation-in-lists-to-be-or-not -essere/. C'è un punto lì - che non vuoi che una barra di navigazione sia annunciata come una "lista di ...". Inoltre, per quanto riguarda la differenza, potresti voler eliminare i collegamenti ipertestuali e vedere cosa succede - la specifica. dice "role = presentation non causa la rimozione del contenuto contenuto * all'interno dell'elemento * dall'albero di accessibilità." – potatopeelings
Ho provato una serie di collegamenti rispetto a un elenco in ChromeVox e riesco a sentire la differenza. Non sono sicuro di quale approccio preferirebbero gli utenti di screen reader. Senza una lista, il ruolo sembra ancora meno rilevante in quanto uno span viene ignorato da ChromeVox in ogni caso. Eliminare i collegamenti ipertestuali perde l'accessibilità della tastiera, quindi è controproducente. – theJBRU
Sono d'accordo con @theJBRU che questo non ha senso.Con l'esistenza di tablist, tab e tabs dei ruoli, sembra che Bootstrap abbia deciso di fare le cose a modo suo con un ruolo che è ampiamente frainteso (a causa di una vaga documentazione). Bootstrap usa tabpanel, che i documenti dicono dovrebbero essere usati insieme agli altri 2 ruoli. – Jason