web-dev-qa-db-fra.com

Nouvelle icône de fenêtre (pour l'accessibilité Web)

Existe-t-il une icône par défaut, standard, recommandée ou bien connue pour indiquer qu'un lien ouvrira une nouvelle fenêtre de navigateur?

C'est pour des raisons d'accessibilité Web. Ou est-ce fondamentalement un gratuit pour tous? 

Je me rends compte que ceux qui en tireront le meilleur parti (en utilisant des lecteurs d’écran) ne se soucieront même pas de l’image, et s’intéresseront davantage au texte alternatif.

Décidé d'aller pour celui-ci: ![new window icon][1].

À moins que quelqu'un puisse en suggérer un plus largement adopté?

accessibility
45
Lee Englestone

Il n’existe pas d’icône standard établie.

Par exemple, l’icône que vous avez choisie est semblable à celle utilisée dans wikipedia pour marquer les liens pointant vers des sites Web externes (n’appartenant pas à wikipedia). Vous pouvez toutefois l'utiliser sur vos sites Web et ainsi établir une convention au sein de vos propres pages. Assurez-vous de le faire de manière cohérente: TOUS les liens marqués de cette icône DOIVENT s'ouvrir vers une nouvelle page et TOUS les liens non marqués de cette icône doivent s'ouvrir dans la même page. Vous pouvez améliorer l'accessibilité, à condition de disposer d'une base d'utilisateurs stable, qui aura la chance de s'habituer à vos conventions. Si votre site est visité principalement par des visiteurs occasionnels, vous n'ajoutez que de l'encombrement visuel.

10
Palantir

Pour de nombreux caractères Unicode, vous devez utiliser la police suivante (du moins pour Windows, veuillez commenter pour Linux et Mac si vous êtes en mesure de tester):

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

Vous pouvez également appliquer des sélecteurs CSS pour utiliser l'attribut target de la manière suivante:

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

N'oubliez pas que les navigateurs sont amusés par le comportement du sélecteur a et du a:linka:visited.

Caractère Unicode '_/Two Joined Squares':

⧉

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

 Two Joined Squares

CSS

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

Soutien

Mac OS X, Yosemite: 2 polices, Apple Symbol et STIXGeneral

Caractère Unicode 'Carré blanc avec quadrant supérieur droit':

◳

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

 White Square with Upper Right Quadrant

CSS

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

Soutien

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

Caractère Unicode 'Coin supérieur droit ombré blanc':

❐

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

 Upper Right Drop-Shadowed White Square

CSS

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

Soutien

Mac OS X 10.10 Yosemite possède trois polices: Arial Unicode MS, Menlo et Zapf Dingbats.

32
John

J'irais avec quelque chose comme ça: opens in a new window

Comme d'autres l'ont déjà mentionné, l'icône que vous avez choisie est largement utilisée par wikipedia et d'autres sites pour représenter des liens vers des sites externes. Mais il s’agit plus d’une préférence personnelle que d’un standard Web.

25
Ben

Il y a également U+1F5D7 OVERLAP: ????, ajouté dans Unicode 7.0 (juin 2014).

Son commentaire est "chevauchement des fenêtres décalées".

Entité HTML: 🗗

( fileformat.info )

14
Robert K. Bell

Le point le plus proche que je pouvais trouver était NORTH WEST ARROW TO CORNER ⇱ et SOUTH EAST ARROW TO CORNER ⇲.

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

11
chovy

J'aime ce symbole unicode pour Open-in-new-window

↗️ Ou ↗

North East Arrow Assurez-vous d’utiliser utf-8 html.

Html est ↗

11
TrophyGeek

Je viens en retard à cette fête, mais regardez ce que j'ai trouvé chez CodePen !

 enter image description here 

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
<a class="external" href="https://example.org" target="_blank">external link</a>

11
Laryx Decidua

Essayez | ͟↗̱ |:

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

Et pour la compatibilité avec Arial

&#8739;&#863;&nearr;&#817;&#8739;
4
Peter Rader

Sur mon blog WordPress, j'ai dû créer un lien vers plusieurs sites qui désactivent apparemment le bouton de retour (résultats Facebook et Google Translate). Pour ces liens, je les ai configurés pour ouvrir une nouvelle fenêtre. J'ai collecté de petites icônes de "nouvelle fenêtre" mais elles interrompent toujours l'interligne (peut-être que c'est une chose de WordPress; il n'y a pas d'espace supplémentaire autour des icônes) alors j'ai décidé d'y aller avec un titre = "" qui dit "Le lien ouvre une nouvelle fenêtre "et une icône de texte [+] dans le lien, à la fin du texte du lien, séparés par un espace.

2
Pete Hummers

Trois symboles utiles:

❐ &#x2750; &#10064;　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ &#x2348; &#9032;　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ &#x2398; &#9112;　　U+2398 NEXT PAGE
2
Julio C. P.

Je n'ai pas vu l'option suivante.
C’est just css et se termine comme ceci:  open in new window icon

Voir ici: https://codepen.io/Bets/pen/KGBqqb (l'extrait d'analyse ci-dessous ne s'affiche pas à droite)

.newWindow {
  position: relative;
  border: 1px solid;
  width: 8px;
  height: 8px;
}

.newWindow:after {
  position: absolute;
  top:-8px;
  right:-2px;
  font-size:0.8em;
  content:"\1f855";
}

.newWindow:before {
  position: absolute;
  top: -3px;
  right: -3px;
  content: " ";
  border: 4px solid white;
}
<div class="newWindow"></div>

1
bets

Que diriez-vous de quelque chose comme l'image jointe (que n'importe qui est libre d'utiliser ou de modifier)?enter image description here

1 : enter image description here

Je pense ajouter ceci à la droite des boutons simples existants pour qu'ils deviennent un groupe de boutons horizontal donnant aux utilisateurs la possibilité de cliquer sur le lien et de l'ouvrir dans une nouvelle fenêtre.

0
Mark Gavagan