Esiste un'icona predefinita, standard, consigliata o ben nota per indicare che un collegamento aprirà una nuova finestra del browser?Icona nuova finestra (per accessibilità web)

Questo è per motivi di accessibilità web. O è fondamentalmente un gratuito per tutti?

Mi rendo conto che quelli che otterranno il massimo da essi (utilizzando gli screen reader) non si preoccuperanno nemmeno di come appare l'immagine e saranno più interessati al testo alternativo.

deciso di andare per questo: ![new window icon][1].

A meno someonce può suggerire una più ampiamente adottata?

fonte

2009-12-14 Lee Englestone

Non esiste un'icona standard stabilita.

Ad esempio, l'icona scelta è simile a quella utilizzata in wikipedia per contrassegnare i collegamenti che puntano a siti Web esterni (non appartenenti a wikipedia). Puoi comunque usarlo attraverso i tuoi siti web, e quindi stabilire una convenzione all'interno delle tue pagine. Assicurati di farlo in modo coerente: TUTTI i collegamenti contrassegnati con quell'icona DEVONO aprire a una nuova pagina e TUTTI i collegamenti non contrassegnati con esso devono essere aperti nella stessa pagina. Puoi migliorare l'accessibilità, a condizione che tu abbia una base di utenti stabile, che avrà la possibilità di abituarsi alle tue convenzioni. Se il tuo sito viene visitato per lo più da visitatori occasionali, ti basta aggiungere confusione visiva.

fonte

2009-12-14 09:27:24 Palantir

Sì, grazie, che conferma la mia suspisions. Immagino che l'unica cosa che internet non sia 'coerente' –

Per chiunque altro cerchi una copia di dominio pubblico dell'icona del link esterno di Wikipedia, è qui: http://commons.wikimedia.org/wiki/File: External.svg (Potrebbe essere necessario rasterizzarlo da sé - per qualche motivo la versione pre-rasterizzata è con licenza GPL) –

@TobiasCohen Se la grafica vettoriale è GPL, allora l'arte raster sarebbe anche GPL, perché è un'opera derivata. Secondo questo link, tuttavia, l'icona è di dominio pubblico, quindi è liberamente utilizzabile sia in formato vettoriale che raster. –

Sul mio blog WordPress, ho dovuto collegarmi a diversi siti che apparentemente disabilitano il pulsante Indietro (risultati di Facebook e Google Translate). Per quei collegamenti li ho impostati per aprire una nuova finestra. Ho raccolto piccole icone "nuova finestra" ma interrompono sempre l'interlinea (forse è una cosa di WordPress, non c'è spazio extra attorno alle icone) quindi ho deciso di andare con un title = "" che dice "Il link apre una nuova finestra "e un'icona di testo [+] all'interno del link, alla fine del testo del link, separati da uno spazio.

fonte

2011-12-24 13:53:06

mi piacerebbe andare con qualcosa di simile: opens in a new window

L'icona che avete scelto, come altri hanno detto, è ampiamente utilizzato da Wikipedia e altri siti per rappresentare collegamenti a siti esterni. Ma questa è più una preferenza personale e non uno standard web.

fonte

2012-03-25 23:03:37 Ben

+1 Davvero utile! –

Il più vicino ho trovato è stato NORD OVEST freccia per CORNER ⇱ e Sud Est freccia per CORNER ⇲ - ma chi ha creato queste icone non ha fatto NORD EST freccia per angolo

http://www.fileformat.info/info/unicode/category/So/list.htm

fonte

2012-08-29 06:51:56 chovy

potresti ruotarlo con css per ottenere il nord est –

aggiungi questo come risposta e accetterò. – chovy

Come su qualcosa come l'immagine allegata (che chiunque è libero di usare o modificare)? enter image description here

1: enter image description here

Sto pensando di aggiungere questo per il diritto di singoli pulsanti esistenti in modo che diventino un gruppo di pulsanti orizzontale dando agli utenti la possibilità di cliccare sul link e aprirlo in una nuova finestra.

fonte

2012-12-01 19:11:05

Potrebbe voler ritagliare quell'icona. –

Per molti caratteri Unicode che dovrete utilizzare il seguente tipo di carattere (almeno per Windows, si prega di commento per Linux e Mac, se siete in grado di testare):

a:link {font-family: 'Segoe UI Symbol' !important;}

Inoltre è possibile applicare i CSS selettori di utilizzare l'attributo target come così:

a[target='blank'] 
a[target]

Tenete a mente che i browser sono divertenti circa il comportamento del selettore di a e a:link/a:visited così definitivamente testare con questo in mente.

Unicode 'due quadrati riuniti' carattere:

⧉

http://www.fileformat.info/info/unicode/char/29c9/index.htm

CSS

a[target='_blank']::after {content: '\29C9';}

Supporto

Mac OS X, Yosemite: 2 tipi di carattere, Apple Symbol e STIXGeneral

Unicode 'quadrato bianco con alto a destra Quadrant' carattere:

◳

http://www.fileformat.info/info/unicode/char/25F3/index.htm

CSS

a[target='_blank']::after {content: '\25F3';}

Supporto

Mac OS X, Yosemite: 3 font, Apple Symbol, STIXGeneral, Menlo.

Unicode 'superiore destro Drop-Shadowed Bianco Piazza' carattere:

❐

http://www.fileformat.info/info/unicode/char/2750/index.htm

CSS

a[target='_blank']::after {content: '\2750';}

Supporto

Mac OS X, Yosemite: 3 font, Arial Unicode MS, Menlo, Zapf Dingbats.

fonte

2015-08-31 18:18:22 John

@basilbourque Si prega di modificare la risposta per includere esatto CSS implementato altrimenti dovrò farlo e sovrascrivere la tua risposta; Non voglio che la mia risposta manchi dettagli importanti (ad esempio se si tratta di un carattere nativo o se deve essere fornito dal sito Web). Vedo anche un font Microsoft, è che (o altri tipi di carattere) dipende dall'installazione di Microsoft Office o è supportato in una versione di OS X 10.10 senza ossa? – John

C'è anche U+1F5D7 OVERLAP:, aggiunto in Unicode 7.0 (giugno 2014).

Il suo commento è "finestre di offset sovrapposte".

entità HTML: 🗗

(fileformat.info)

fonte

2016-08-11 09:12:16

Non supportato in Mac OS, 2017. –

Mi piace questo simbolo unicode per Open-in-new-window

↗️ o ↗

North East Arrow Assicurati di utilizzare html utf-8.

HTML è ↗

fonte

2017-08-21 22:31:58 TrophyGeek

Prova | ͟ ↗ ̱ |:

|&#863;&nearr;&#817;|

E per la compatibilità con Arial

&#8739;&#863;&nearr;&#817;&#8739;

fonte

2017-10-10 09:06:59

Icona nuova finestra (per accessibilità web)

risposta

⧉

◳

❐

Problemi correlati