it-swarm.dev

Nuevo icono de ventana (para accesibilidad web)

¿Hay un icono predeterminado, estándar, recomendado o conocido para indicar que un enlace abrirá una nueva ventana del navegador?

Esto es por razones de accesibilidad web. ¿O es básicamente gratis para todos?

Me doy cuenta de que a los que los utilizarán más (usar lectores de pantalla) ni siquiera les importará el aspecto de la imagen y estarán más interesados ​​en el texto alternativo.

Decidimos ir por este: ![new window icon][1].

¿A menos que alguien pueda sugerir una más adoptada?

51
Lee Englestone

No existe tal cosa como un ícono estándar establecido.

Por ejemplo, el icono que eligió es similar al que se usa en wikipedia para marcar enlaces que apuntan a sitios web externos (que no pertenecen a wikipedia). Sin embargo, puede usarlo en sus sitios web y establecer así una convención dentro de sus propias páginas. Solo asegúrese de hacerlo de manera consistente: TODOS los enlaces marcados con ese ícono DEBEN abrirse a una nueva página, y TODOS los enlaces no marcados con él deben abrirse en la misma página. Puede mejorar la accesibilidad, siempre que tenga una base de usuarios estable, que tendrá la oportunidad de acostumbrarse a sus convenciones. Si su sitio es visitado en su mayoría por visitantes de una sola vez, entonces simplemente estaría agregando el desorden visual.

10
Palantir

Para muchos caracteres Unicode, deberá usar la siguiente fuente (al menos para Windows, por favor comente para Linux y Mac si puede probar):

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

También puede aplicar los selectores de CSS para usar el atributo target como tal:

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

Tenga en cuenta que los navegadores son divertidos sobre el comportamiento del selector a y a:link/a:visited, por lo tanto, intente con eso en mente.


Unicode ' Dos cuadrados unidos ' carácter:

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

Two Joined Squares

CSS

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

Soporte

Mac OS X, Yosemite: 2 fuentes, Apple Symbol y STIXGeneral


Unicode ' Cuadrado blanco con cuadrante superior derecho carácter':

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

White Square with Upper Right Quadrant

CSS

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

Soporte

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


Unicode ' Cuadrado blanco superior derecho-sombreado ' carácter:

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

Upper Right Drop-Shadowed White Square

CSS

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

Soporte

Mac OS X 10.10 Yosemite tiene tres fuentes: Arial Unicode MS, Menlo y Zapf Dingbats.

36
John

Yo iría con algo como esto: opens in a new window

El icono que ha elegido, como han mencionado otros, es ampliamente utilizado por wikipedia y otros sitios para representar enlaces a sitios externos. Pero esto es más una preferencia personal y no un estándar web.

25
Ben

Llego tarde a esta fiesta, pero mira lo que he encontrado en 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>
17
Laryx Decidua

Me gusta este símbolo Unicode para Open-in-new-window

↗️ o ↗

Flecha noreste Asegúrate de usar utf-8 html.

HTML es &#x2197;

15
TrophyGeek

También hay U+1F5D7 OVERLAP: ????, agregado en Unicode 7.0 (junio de 2014).

Su comentario es "ventanas de desplazamiento superpuestas".

Entidad HTML: &#x1F5D7;


( fileformat.info )

14
Robert K. Bell

Lo más cercano que pude encontrar fue NORTH WEST ARROW TO CORNER ⇱ y SOUTH EAST ARSTW TO CORNER ⇲, pero quien creó estos íconos no hizo la NORTH EAST ARROW TO ESQUINER

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

11
chovy

Prueba | ͟↗̱ |:

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

Y por compatibilidad con Arial.

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

Tres símbolos útiles: ❐⍈⎘

❐ &#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
4
Julio C. P.

En mi blog de WordPress, he tenido que enlazar a varios sitios que aparentemente deshabilitan el botón de retroceso (resultados de Facebook y Google Translate). Para esos enlaces los configuro para abrir una nueva ventana. He recopilado pequeños íconos de "nueva ventana", pero siempre interrumpen el espacio entre líneas (tal vez sea algo relacionado con WordPress; no hay espacio adicional alrededor de los íconos), así que decidí ir con un título = "" que dice "El enlace se abre en una nueva ventana "y un icono de texto [+] dentro del enlace, al final del texto del enlace, separados por un espacio.

2
Pete Hummers

No he visto la siguiente opción.
Es solo css y termina así: open in new window icon

Consulte aquí: https://codepen.io/Bets/pen/KGBqqb (el fragmento de ejecución siguiente no se muestra a la derecha)

.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>
2
bets

¿Qué tal algo como la imagen adjunta (que cualquiera puede usar o editar libremente)?enter image description here

1enter image description here

Estoy pensando en agregar esto a la derecha de los botones individuales existentes para que se conviertan en un grupo de botones horizontales que ofrezcan a los usuarios la opción de hacer clic en el enlace y abrirlo en una nueva ventana.

0
Mark Gavagan