lunes, 7 de mayo de 2018

Informar de una ventana de tu navegador

ejemplo de icono para transmitir que es un enlace externo

Probablemente hayas visto este código de HTML antes:
<a href="https://mysite.com" target="_blank" rel="noopener"> Inicio </a> Específicamente, mira el atributo target="_blank". Esto es lo que permite que un enlace abra una nueva pestaña o ventana automáticamente.

¿Por qué informar a alguien que la activación de un enlace abré una nueva ventana o un sitio?


Las personas que usan lectores de pantalla descanocen si esé enlace les lleva aún enlace interno o abrén una nueva ventana. Tiene que tener presenté estas palabras. Permite tener al usuario de tu web el control.
La idea principal es darle poder al usuario; informar al usuario de lo que podría suceder para permitir que se tome una decisión sobre cómo y cuándo desean actuar.

Solución


Cuando un enlace presenta el target="_blank", agregue el aria-describedby, estableciendo su valor id apropiado.

<div hidden> 
  <span id = "new-window-0"> Se abre en una nueva ventana </ span> 
  <span id = "new-window-1"> Abre un sitio externo </ span> 
  <span id = " new-window-2 "> Abre un sitio externo en una nueva ventana </ span>   
</ div>
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0"> 
  Mi sitio 
</a>

¿Qué es el rel=”noopener”?

Aunque parezca muy intrusivo, en realidad es una medida de seguridad para evitar que los enlaces maliciosos tomen el control de una pestaña abierta.

Eso es bueno para los usuarios de lectores de pantalla, pero ¿qué pasa el discapacitado visual que solo usa el teclado?

Una solución es usar un icono junto con el texto del enlace. Con un ícono, alguien que pueda ver el ícono recibirá la notificación de que algo diferente podría ocurrir cuando active el enlace.
Noes recomendable  usarló en el <footer> del documento pero si en el cuerpo<main>

No hay comentarios:

Publicar un comentario