Risposte:
L' attributo ARIA HTML5 è ciò che stai cercando. Può essere utilizzato nel tuo codice anche senza bootstrap.
Access Access Rich Internet Applications (ARIA) definisce i modi per rendere il contenuto Web e le applicazioni Web (in particolare quelle sviluppate con Ajax e JavaScript) più accessibili alle persone con disabilità.
Per essere precisi per la tua domanda, ecco come vengono chiamati i tuoi attributi come stati e modello dell'attributo ARIA
aria-labelledby: Identifica l'elemento (o gli elementi) che etichetta l'elemento corrente.
aria-hidden (state): Indica che l'elemento e tutti i suoi discendenti non sono visibili o percepibili da nessun utente come implementato dall'autore.
I principali consumatori di queste proprietà sono gli user agent come gli screen reader per i non vedenti. Quindi, nel caso di un Bootstrap modale, il modale divha role="dialog". Quando l'utilità per la lettura dello schermo si accorge che a divdiventa visibile e che ha questo ruolo, pronuncerà l'etichetta per questo div.
Esistono molti modi per etichettare le cose (e alcune nuove con ARIA), ma in alcuni casi è opportuno utilizzare un elemento esistente come etichetta (semantica) senza usare il <label>tag HTML. Con i modali HTML l'etichetta è di solito <h>un'intestazione. Quindi, nel caso modale di Bootstrap, aggiungi aria-labelledby=[IDofModalHeader], e lo screen reader parlerà quell'intestazione quando appare il modale.
In generale, uno screen reader noterà ogni volta che gli elementi DOM diventano visibili o invisibili, quindi la aria-hiddenproprietà è spesso ridondante e probabilmente può essere saltata nella maggior parte dei casi.
aria-hidden="true"nasconderà oggetti decorativi come le icone dei glifi nei lettori dello schermo, che non hanno una pronuncia significativa per non creare confusione. È una buona cosa fare come una buona pratica.
ARIA non cambia funzionalità, cambia solo i ruoli / proprietà presentati agli utenti dello screen reader. La barra degli strumenti WAVE di WebAIM identifica i ruoli ARIA nella pagina.
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-nascosto:
L'attributo aria-hidden viene utilizzato per nascondere il contenuto per gli utenti ipovedenti che navigano nell'applicazione utilizzando gli screen reader (JAWS, NVDA, ...).
L'attributo aria-hidden viene utilizzato con valori true, false.
Come usare:
<i class = "fa fa-books" aria-hidden = "true"></i>utilizzando aria-hidden = "true" sul <i>contenuto nascosto per gli utenti di screen reader senza modifiche visive nell'applicazione.
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">
aria-labelledby può anche essere usato per combinare due etichette per gli utenti di screen reader
Approccio 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">