accessibility - que - normas de la accesibilidad web

Nuevo icono de ventana(para accesibilidad web)

Question

¿Existe 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 les darán el mayor uso (usando 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

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

Answer 1

¿Qué tal algo como la imagen adjunta (que cualquiera puede usar o editar)?

1 :

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

Answer 2

En mi blog de WordPress, he tenido que enlazar a varios sitios que aparentemente deshabilitan el botón Atrás (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.

Answer 3

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 CORNER.

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

Answer 4

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

↗️ o ↗

North East Arrow Asegúrese de que está utilizando utf-8 html.

El HTML es ↗

Answer 5

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 utilizarlo 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.

Answer 6

No he visto la siguiente opción.
Es solo css y termina pareciéndose a esta imagen:

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

.newWindow:after {
  position: absolute;
  top: -10px;
  right: -4px;
  content: "/1f855";
}

.newWindow:before {
  position: absolute;
  top: -3px;
  right: -3px;
  content: " ";
  border: 4px solid white;
}

<div class="newWindow"></div>

Answer 7

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 de target como tal:

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

Tenga en cuenta que los navegadores son divertidos sobre el comportamiento del selector a y de a:link / a:visited así que definitivamente pruebe con eso en mente.

Carácter de Unicode '' Dos cuadrados unidos '':

⧉

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

CSS

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

Apoyo

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

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

◳

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

CSS

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

Apoyo

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

Carácter Unicode '' Cuadrado blanco superior derecho-sombreado a la derecha '':

❐

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

CSS

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

Apoyo

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

Answer 8

Prueba | ͟↗̱ |:

|͟↗̱|

Y por compatibilidad con Arial.

∣͟↗̱∣

Answer 9

Sé que llego tarde a la fiesta, pero FWIW aquí está mi solución ¯ / _ (ツ) _ / ¯,

HTML:

<a href="#" target="_blank">Your link</a>

jQuery:

Si conoces una versión JS de vainilla de esto, háznoslo saber, estaré encantado de agregarla aquí (no soy un desarrollador de JS 😊)

$("a[target=''_blank'']").attr({title:"Link opens in a new tab"}).addClass("new-tab");

CSS:

.new-tab:after {
    display: inline-block;
    content: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

Manifestación:

Aquí hay una pluma: https://codepen.io/anon/pen/MBBXjP (este enlace, por ejemplo, DEBERÍA abrirse en una nueva ventana, jajaja).

Durante años esta técnica me ha sido muy útil porque:

• No tengo que agregar manualmente un atributo de title cada vez que creo un enlace que se abre en una nueva pestaña.
• No tengo que añadir el icono de la nueva ventana.
• El JavaScript y el CSS hacen el trabajo pesado, todo lo que necesito hacer es agregar target="_blank" y eso es todo.
• Si no tengo acceso al HTML pero aún necesito / quiero mejorar la accesibilidad de un sitio web / aplicación web, puedo hacerlo con este método.
• Este método funciona muy bien tanto para elementos de nivel de línea como de bloque.

Me hubiera encantado poder usar este ícono, el problema es que no es compatible con dispositivos iOS y creo que macOS tampoco.

Answer 10

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

Su comentario es "superposición de ventanas offset".

Entidad HTML: 🗗

( fileformat.info )

Answer 11

Tres símbolos útiles: ❐⍈⎘

❐ ❐ ❐　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ ⍈ ⍈　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ ⎘ ⎘　　U+2398 NEXT PAGE

Answer 12

Yo iría con algo como esto:

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.

Answer 13

Llego tarde a esta fiesta, ¡pero mira lo que he encontrado en CodePen !

a[target="_blank"]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}