Come posso rendere accessibili i tooltip di Twitter Bootstrap?

Question

Come forse saprai, le descrizioni comandi di bootstrap di Twitter non sono accessibili (perché non vengono letti dagli screen reader). Per realizzare questo obiettivo, le seguenti cose dovrebbero essere fatte:

1. Dopo aver chiamato la funzione tooltip(), l'elemento di testo generato (quello che contiene il testo del tooltip) dovrebbe ottenere un nuovo attributo aggiunto ad esso: aria-hidden="true".
2. L'elemento originale (è stato chiamato il numero tooltip()) deve essere aggiunto ad un attributo: aria-describedby="#<tooltip-id>", dove tooltip-id fa riferimento all'ID del nuovo elemento appena creato in precedenza.

Dal momento che il modo in cui il Javascript attualmente lavora è la selezione di tutti gli elementi con la classe .tooltip e applicando la funzione tooltip() ad esso, mi chiedo come posso fare questo senza modificare il codice sorgente della funzione tooltip().

Ecco un esempio del codice per un pulsante:

<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px"> 
    <div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe"> 
     <i></i> 
    </div> 
</span> 

Answer 1

Dagli sguardi del main example nella documentazione Bootstrap sono accessibili tastiera (cioè show per tastiera-solo gli utenti) quando usato su natively- elementi focalizzabili e usano il contenuto testuale per i pulsanti.

Quindi gli esempi Bootstrap predefiniti non sono troppo male, se il testo del suggerimento era necessario per comprendere il pulsante (come il tuo esempio), cioè quando crea un problema di accessibilità.

Quindi la cosa principale è che il pulsante non ha contenuto, quindi uno screen reader non saprà con che cosa iniziare. (NB: Alcuni screen reader potrebbero tornare al titolo se si trattasse di un link o pulsante nativo, ma non dovresti fare affidamento su questo.)

Per fare un pulsante che mostra un'icona di carattere, hai bisogno di contenuti e l'icona, quindi due elementi:

<a href=”target.html”>
  
    <span class=”icon-home” aria-hidden="true"></span>
  
    <span class=”alt”>Add YouTube Video</span>
  
</a> 

Quindi utilizzare CSS per nascondere il testo fuori schermo. L'ARIA-hidden significa che il carattere del font non verrà letto.

Vorrei anche raccomandare di utilizzare un pulsante o un collegamento, piuttosto che span o div, poiché non è necessario utilizzare javascript per simulare onclick ecc. In questo caso, è disponibile anche un elemento inline (span) avvolto attorno a un elemento di blocco (div) che non è un codice HTML valido.

Se si utilizza la tecnica sopra lo screen reader, gli utenti sentiranno comunque il contenuto dell'articolo, non penso che ci sia altro testo da leggere?

Se non è possibile aggiungere il testo nascosto nel codice sorgente, è possibile scorrere gli elementi del suggerimento aggiungendolo dinamicamente.

Answer 2

possono guardare al W3C & ARIA per la direzione http://www.w3.org/WAI/PF/aria-practices/#tooltip