Creare collegamenti di testo disponibili
| |
Stampa |
Inviare |
Parte |
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 .
Riassunto
- Pagina 1: Introduzione
- Sei a pagina 2: Creazione di collegamenti di testo accessibile
- Pagina 3: La creazione di collegamenti ipertestuali accessibili
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").
Lunghezza dei link
Link lunghi
Qual è la lunghezza massima di un link testuale? Buona domanda ma nessuna risposta ben stabilita. La risposta è più opportuno che il collegamento dovrebbe essere abbastanza a lungo per passare la destinazione del collegamento e non di più. La vaghezza di questa risposta apre la porta ad interpretazioni, ma forse non è una cosa negativa. Autori di contenuti dovrebbero avere la libertà di dare un senso al loro contenuto in modo che abbia senso per loro. Tuttavia, in generale, i collegamenti deve essere il più conciso possibile, senza sacrificare la pertinenza.
Alcuni autori di creare legami con intere frasi, interi paragrafi o anche diversi paragrafi. Queste obbligazioni a lungo sono certamente inutili, e non sono user friendly per gli utenti di screen reader. Ricordate che gli utenti di screen reader non possono apprezzare la lunghezza dei link visivamente. Essi dovrebbero ascoltare l'intero testo. Alcuni utenti di screen reader sono frustrati a leggere i link di testo lunghi e andare al seguente link se non riescono a comprendere lo scopo del prestito obbligazionario dopo le prime parole. Gli autori non hanno alcun controllo sul comportamento di tale utente, ma hanno il controllo su alcune delle ragioni che possono portare gli utenti a sentirsi frustrazione. Breve, conciso, i collegamenti sono meno probabilità di bloccare gli utenti di lettori di schermo che collega lungo e impreciso.
Link breve
Qual è la lunghezza minima di un link testuale? Questa è un'altra bella domanda, ma è anche senza risposta. Nella maggior parte dei casi, i collegamenti dovrebbero essere parole o frasi. In alcuni casi, tuttavia, ha senso mettere un link su un unico personaggio, una lettera dell'alfabeto o numero. Per esempio, un indice alfabetico può usare ogni lettera dell'alfabeto, come un link.

Il pericolo di usare singoli caratteri come link - o utilizzando qualsiasi tipo di collegamento di piccole dimensioni (come un'immagine di 10 pixel per 10 pixel) - è che alcuni utenti hanno difficoltà a cliccare su una regione di piccole dimensioni. Qualcuno con paralisi cerebrale, per esempio, può essere in grado di usare le mani per manipolare un mouse, ma possono avere difficoltà a fare movimenti precisi e controllare i muscoli che sono tenuti a fare clic su un collegamento di piccole dimensioni. Questa persona può essere necessario fare clic due o tre volte per raggiungere l'obiettivo, e può finire cliccando sul link sbagliato, che lo costringono a premere il pulsante nel browser e riprovare.
Gli utenti hanno un certo controllo su tutta la larghezza del collegamento. Possono acquistare un ingranditore di schermo ZoomText come o magia, che permette di espandere il collegamento. Gli utenti possono anche ingrandire i caratteri nel browser senza l'utilizzo di un ingranditore di schermo. Il browser Opera consente agli utenti di ingrandire l'intera pagina web. In questo senso, i collegamenti piccoli non sono i problemi peggiori di accessibilità affrontati dagli utenti. Allo stesso tempo, gli autori possono limitare i danni potenziali aumentando le dimensioni dei collegamenti piccoli, aumentando la dimensione del carattere dei legami con un singolo carattere, o espandere l'area del collegamento con gli spazi tra cui un fragile nel link .
Esempio
La mancata rottura spazi (presente nel codice come segue: che circonda le lettere "A" e "B" in questo esempio.
Fanno la aisent collegamento più ampio per le persone che hanno difficoltà a cliccare sulle aree di piccole dimensioni.
URL
Gli indirizzi Web o URL presenti s due tipi di sfida:
- leggibilità
- 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.

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.
Il testo alternativo per le immagini usate come link
Quando le immagini sono usate come link, alt text deve esprimere lo scopo del testo del link.
Come nel link di testo, i alt link delle immagini non ha bisogno di informare gli utenti che il link è un link, perché già conoscono.
Tuttavia, un dilemma interessante è quello di decidere se è importante per descrivere le caratteristiche visive delle immagini in alt testo, dal momento che lo scopo della alt testo non è quello di sostituire l'immagine in cui gli utenti possono non vederlo.
Nella maggior parte dei casi, le caratteristiche visive delle immagini sono meno importanti della destinazione del collegamento.
Esempio
L'immagine in questo esempio potrebbe essere descritto come un "oggetto allineate orizzontalmente sotto forma di pillole, alcuni in tre dimensioni, con colorazione blu royal e rosso nella parte inferiore, di colore leggermente più scuro sul lato sinistro e un po 'più lavato sul lato destro, con' prodotti 'della parola scritta in Arial grassetto bianca sulla parte superiore dell'oggetto, suggerendo che l'oggetto è un collegamento a un elenco di prodotti o spiegazione ".
La descrizione è del tutto esatto, ma completamente inutile.
Lo scopo delle immagini, in questo caso è quello di stabilire un collegamento alla sezione dei prodotti di un sito web.
L' alt text deve tenere maggiormente conto dell'obiettivo di immagine piuttosto che il suo aspetto visivo.
Maggior parte degli utenti di screen reader non vogliono sapere che cosa il pulsante sembra, soprattutto se la descrizione è lunga.
Un alt text "Prodotti" farà bene.
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?

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.

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.

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

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: focus,
a: active
{
background-color: # FFFFCC;
color: # 990000;
}
Legami commerciali
Copyright 1999-2009 WebAIM












![[Parigi, 6 dicembre 2011] La conferenza della campagna presidenziale Web 2012 (Ideos / 2,0 socio Elect)](http://www.elus20.fr/images/pdffrance2011_elus20.jpg)























