Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Creare collegamenti di testo disponibili

Vai all'inizio del contenuto senza utilizzare la barra di consultazione e condivisione Come utilizzare la barra di consultazione e condivisione Ascoltare il contenuto principale di questa pagina
Stampa Stampare il contenuto principale di questa pagina Inviare E-mail il contenuto principale di questa pagina Parte Condividi su TwitThis Condividi su Facebook Pubblica l'articolo su Wikio Condividi questa pagina su Google Condividi su LinkedIn Condividi su Digg Condividi questa pagina su del.icio.us Condividi questa pagina su Netvibes

Attenzione: la versione originale di questo documento è Links Web e Hypertext: Link Text e aspetto . La traduzione francese è stata fatta da Ideos quadro di un accordo tra WebAIM e Ideos .

Nota: vedere la pagina dei documenti su accessibilità del Web per un elenco di tutti i documenti tradotti. Altre risorse sull'accessibilità web sono elencati anche nel portale digitale accessibile .

Text link

Evitare legami che sono frasi senza informazioni

Come indicato a pagina 1, i link sono più utili quando hanno un senso fuori dal contesto. Gli autori dovrebbero evitare frasi usate come non informativo link quali:

  • clicca qui
  • qui
  • di più
  • Leggi tutto
  • link [destinazione link]
  • Info

In realtà, il termine "cliccare qui" è inutile, anche se precede l'espressione più significativa. Ad esempio, un link "Clicca qui per il meteo di oggi" può essere ridotta a "tempo di oggi". In alcuni casi può essere utile far precedere un legame con "più" o "informazioni" (ad esempio "di più sul riscaldamento globale"), ma se queste parole aggiuntive possono essere evitati, è meglio non metterli (ad esempio, "riscaldamento globale" come il contesto può esprimere lo stesso significato di "sul riscaldamento globale").

URL

Gli indirizzi Web o URL presenti s due tipi di sfida:

  1. leggibilità
  2. lunghezza
Leggibilità di s URL

La prima sfida è che l'URL s non sono sempre leggibili e facilmente ascoltare attraverso uno screen reader. Senso contenenti combinazioni di numeri, lettere, trattini, sottolineature e altri personaggi che hanno un significato per gli script e database, ma sono molti URL s poco o niente alla media le persone. In molti casi, ha senso utilizzare il testo leggibile al posto dell'URL. Collegamento leggibile Costruire siti Web accessibili è più facile da utilizzare il collegamento è costituito da 108 caratteri - pieno di numeri, barre - un testo che non è molto leggibile. ( http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid 1116957951/sr = = 2 -
1/ref = pd_bbs_b_2_1/103-5755258-8204633 ).

Questo significa che l'URL s non dovrebbe mai essere utilizzata come link? No. Se l'URL è relativamente breve, probabilmente non c'è problema ad utilizzare l'URL come il testo del link. Il punto chiave è quello di considerare gli utenti di screen reader che deve ascoltare l'URL che è più lungo e meno intelligibile.

Lunghezza del URL s

Il secondo problema è che alcuni s URL sono piuttosto lunghi e alcuni browser si rifiutano di andare alla riga la s lunga URL e lasciare i collegamenti URL a destra si estendono oltre l'area visibile del browser. Questi URL lungo s sono di solito generati dai siti web con i database o applicazioni web che trasferire un certo numero di variabili tramite l'indirizzo del sito. Il link qui sopra per il libro su Amazon.com è un esempio perfetto. In effetti, il testo del link lungo è stato modificato con l'aggiunta di due interruzioni di riga ( <br> ) al centro della URL, in modo che possa passare alla riga successiva. Mozilla based come Firefox o Netscape non consentono URL lungo s per passare alla linea a meno che l'autore non introduce una nuova linea da qualche parte.

La larghezza dello schermo al di sotto sarebbero più di 2000 pixel (equivalente a due monitor). Immaginate un link per visualizzare più di una pagina web. Gli utenti dovrebbero navigare orizzontalmente molto tempo per leggere l'intero collegamento.

Un esempio di un URL molto lunghi con più di 300 caratteri (da una ricerca di immagini su google.com)

Peggio ancora, immaginate l'ascolto di questo collegamento con un lettore di schermo! Quasi nessuno avrebbe la pazienza di ascoltare tutto questo contenuto indecifrabile. Il link qui sopra potrebbe essere ridotto a "foto di gabbiani della California," perché il link rimanda a una pagina con foto di gabbiani California.

L'aspetto dei link

I link dovrebbe essere simile link e viceversa non altro dovrebbe. Gli utenti sono frustrati quando si cerca di cliccare sul testo o immagini che sembrano link, ma non lo sono. Essi potranno anche essere frustrata se deve muovere il mouse sulla pagina per cercare di scoprire i legami che non assomigliano link.

Sottolineando

Browser sottolineare collegamenti ipertestuali per default. E 'possibile rimuovere la sottolineatura con i CSS, ma è una cattiva idea la maggior parte del tempo. Gli utenti sono abituati a vedere i link sottolineato. Essi possono essere o non essere in grado di sapere quale testo è un link se l'accordo non è rispettato un carattere di sottolineatura.

Esempio

Quali parole o frasi nello screenshot qui sotto sono i link e quali no?

Il testo in nero si presenta 'soluzioni', poi ci sono 11 parole in blu non è sottolineato.

Si scopre che tutti i presenti sono collegamenti di testo. Gli utenti possono fare clic sul testo in nero e blu. Questo tipo di progetti grafici chiede agli utenti di indovinare o trovare per eliminazione o per caso. E 'meglio sottolineare i legami del contenuto principale di una pagina web.

Come la maggior parte sostiene, ci sono delle eccezioni. Anche se gli utenti sono abituati a vedere i collegamenti sottolineati nel contenuto principale, sono anche abituati alle funzioni principali di navigazione schede (spesso create come immagini al posto del testo) non sottolineato. Infatti, è estremamente difficile trovare un importante sito che mette in evidenza i link di navigazione principale.

Esempi

I siti web diversi evidenziare i collegamenti nel contenuto principale, ma non nel menu di navigazione, come mostrato nel seguente screenshot.

Navigazione principale del sito è un testo senza sottolineatura IBM.com

IBM utilizza il testo. È interessante notare che quando gli utenti sorvolare il testo con il mouse, la sottolineatura sembra rassicurare gli utenti che sono veramente i link. Maggior parte degli utenti hanno già capito che si tratta di link, perché assomigliano a quelli della navigazione principale del sito. Tuttavia, l'improvvisa apparizione di rilievo può essere utile per alcune persone.

7 immagini sul lato sinistro della pagina sono utilizzati per la navigazione sul sito web a 10.000 villaggi.

10,000 villaggi per il sito utilizza le immagini al posto del testo. Il testo non viene mai sottolineato.

A 3-dimensionale area orizzontale che fa da sfondo alla navigazione principale del sito Macromedia.com.

Navigazione principale del sito è costruito in Macromedia Flash. Il testo non viene mai sottolineato.

Rollover e messa a fuoco

Molti siti web hanno implementato effetti rollover e la messa a fuoco. Questi effetti sono utilizzati per scopi estetici (gli effetti sono "cool" e artistico). Essi sono utilizzati anche per accedere nella misura in cui consentono agli utenti di sapere che il mouse o la tastiera su un determinato link e il collegamento è attivo.

Nella maggior parte dei casi, gli effetti sono per evidenziare il link qui sopra o sotto il testo.

In altri casi, i colori del cambiamento testo del link.

Questa tecnica non si limita alla navigazione principale del sito. Può essere utilizzato anche sui collegamenti nel contenuto principale.

Per fare questo indipendente dal dispositivo, è necessario accertarsi che possa essere attivato con il mouse e la tastiera. Nei CSS, ciò significa usare entrambe le classi :hover e :focus . Classe :active può essere utilizzato anche.

Esempio

Il seguente CSS cambierà lo sfondo di un collegamento luce gialla e marrone il testo del collegamento quando l'utente hover il suo mouse, la tastiera tabulazione ad esso o fa clic sul link con il mouse o con il tasto Invio.

a: hover,
a: focus,
a: active
{
background-color: # FFFFCC;
color: # 990000;
}

WebAIM è un'iniziativa di:
Centro per persone con disabilità (CPD) Utah State University

Copyright 1999-2009 WebAIM

Inizio della pagina