Come usare l’attributo HTML title

Traduzione dell’articolo di Steven Faulkner “Using the HTML title attribute” – 02/11/2010

I problemi del title:

L’attributo HTML title è alquanto problematico, perchè non risulta molto ben supportato in alcuni aspetti cruciali, anche se è presente da oltre 13 anni. Con l’affermarsi delle interfacce a touch screen, l’utilità di questo attributo è diminuita. L’accessibilità dell’attributo title è rimasta vittima di una sfortunata combinazione tra scarso supporto dei browser, scarso supporto degli screen reader e carenti pratiche di authoring.

Situazioni in cui l’attributo title non è utile per mancanza di supporto:

  • Visualizzazione di contenuti Web sui browser per telefoni cellulari. Tipicamente sui browser per desktop il contenuto dell’attributo title è visualizzato in un suggerimento tooltip. Ma per quanto mi risulta la visualizzazione dei tooltip non è supportata dai browser per dispositivi mobili, così come non sono supportati metodi alternativi per accedere all’attributo title.
  • Fornitura di informazioni per utenti che non possono utilizzare un mouse. Tipicamente in un browser per desktop l’attributo title è visualizzato con un tooltip, e questo da oltre 10 anni; però nessun browser ha ancora implementato un metodo pratico per visualizzare l’attributo title usando la tastiera.
  • Usandolo sulla maggior parte degli elementi HTML per fornire informazioni agli utenti che utilizzano le tecnologie assistive. L’accesso all’attributo title non è uniformemente supportato dagli screen reader.

Gruppi di utenti non ben serviti dall’uso dell’attributo title:

  • Utenti di telefoni cellulari
  • Utenti che usano solo la tastiera
  • Utenti di screen reader
  • Utenti di ingranditori di schermo
  • Utenti con disabilità motorie
  • Utenti con disabilità cognitive

Esempi di un utilizzo produttivo dell’attributo title:

  • Etichettare elementi frame o iframe:
    • <frame title=”navigazione”>
    • Fornire un’etichetta ad un controllo in situazioni dove un’etichetta di testo visibile potrebbe essere ridondante:

Esempi di un utilizzo non utile o limitato dell’attributo title:

  • Per informazioni addizionali non fornite come testo in un link o contenuto circostante:
    • <a href="newsletter.PDF" title=”PDF file, size 1 mb.”>newsletter</a>
    • Meglio includere queste informazioni come parte del link testuale o adiacenti al link.
  • Fornire la stessa informazione contenuta nel testo del link:
    • <a href="newsletter.PDF" title=”newsletter”>newsletter</a>
    • Si raccomanda di non duplicare il contenuto di un link all’interno dell’attributo title. Non serve a niente, anzi risulta controproducente per tutti quegli utenti che possono accedervi.
  • Per la descrizione di un’immagine:
    • <img src="castle1858.jpeg" title=”Dipinto ad olio su tela. Maria Towle, 1858.”
      alt=”Il castello adesso ha due torri e due mura.”>
    • Si presume che la descrizione sia un’informazione importante, che dovrebbe essere disponibile per default a tutti gli utenti. Se è così si dovrebbe presentare questo contenuto come testo in prossimità dell’immagine.
  • Come label di un controllo che non ha etichetta testuale visibile:
    • <input type="text" title=”nome”>
    • Gli utenti di screen reader avranno accesso all’etichetta, visto che l’attributo title risulta mappato a livello di API (quando un’etichetta di testo che utilizza l’elemento label non è supportata). Molti altri utenti invece no. Si raccomanda allora di utilizzare un’etichetta testuale visibile quando possibile.
  • Fornire la stessa informazione di una label di testo esplicitamente associate ad un controllo:
    • <label for="n1">nome</label> <input type="text" title=”nome” id=”n1″>
    • La ripetizione del testo visibile non aggiunge altro se non un possibile rumore cognitive per alcuni utenti. Da evitare.
  • Fornire istruzioni aggiuntive per un controllo:
    • <label for="n1">nome</label> <input type="text" title=”Usa le lettere maiuscole.” id=”n1″>
    • Se si tratta di istruzioni utili all’uso corretto del controllo, allora queste andrebbero previste come testo nelle vicinanze del controllo, così da poter essere lette da chiunque.
  • Esplicitazione di un’abbreviazione:
    • <abbr title=”world wide web consortium”>W3C</abbr>
    • Il title dell’elemento abbr risulta ben supportato dagli screen reader, ma il suo utilizzo resta problematico, visto che altre tipologie di utenti non riusciranno ad accedere a questa esplicitazione. Si raccomanda allora di fornirla come testo semplice in occasione della prima occorrenza dell’abbreviazione nel documento, oppure all’interno di un glossario. Questo andrebbe fatto indipendentemente dall’utilizzo problematico dell’attributo title.

Per approfondire

Potrebbero interessarti anche i seguenti articoli

  • L’accessibilità di AJAXL’accessibilità di AJAX Traduzione dell'articolo "Ajax accessibility" di John Resig Una diffusa preoccupazione sulla maggior parte delle applicazioni Ajax riguarda la loro accessibilità. E' […]
  • Un modulo web per tutti inizia dalle etichette (label)Un modulo web per tutti inizia dalle etichette (label) In occasione della Giornata Internazionale sulla Disabilità 2017 Roberto Scano ha scritto questo articolo sull’accessibilità specificandone la sua accezione di […]
  • Fieldset, Legend e Screen ReaderFieldset, Legend e Screen Reader Traduzione - autorizzata dall'autore - dell'articolo "Fieldsets, Legends and Screen Readers" di Steve Faulkner del 22 novembre 2007 Il raggruppamento e […]
  • Le versioni di html, le differenze e i perchèLe versioni di html, le differenze e i perchè L’html dalla sua nascita si è distinto per la sua forte mutevolezza nel tempo, in 10 anni se ne sono rilasciate almeno cinque varianti principali più un […]
  • Il Web si ama o si odia?Il Web si ama o si odia? Il 16 ottobre, il The Telegraph ha pubblicato una classifica - in questo periodo le classifiche vanno molto di moda - riguardante i 50 elementi più fastidiosi del Web […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.