Uso del teclado
Los usuarios de lectores de pantalla, las personas con movilidad reducida y algunos usuarios avanzados navegan por la web mediante el teclado.
Para navegar con el teclado se usan principalmente las siguientes teclas:
- Tab y Mayús + Tab para moverse por todos los elementos interactivos.
- Las flechas de dirección para moverse dentro un elemento, como por ejemplo un menú desplegable.
- Intro o Espacio para seleccionar o activar un elemento.
Todos los elementos de interacción (enlaces, botones, controles de formulario, etc.) deben ser operables mediante el teclado.
El foco del teclado
El foco del teclado se refiere al elemento que está seleccionado en ese momento y sobre el cual se puede ejercer una acción.
Los navegadores incluyen una línea de contorno por defecto para indicar dónde está el foco. Podemos cambiar su estilo modificando los valores de la propiedad CSS outline.
<span class="line"><span style="color: #024c1a;">a</span><span style="color: #023b95;">:focus-visible</span><span style="color: #0e1116;"> {</span></span>
<span class="line"><span style="color: #023b95;"> outline</span><span style="color: #0e1116;">: </span><span style="color: #023b95;">2</span><span style="color: #a0111f;">px</span><span style="color: #023b95;"> solid</span><span style="color: #0e1116;">;</span></span>
<span class="line"><span style="color: #0e1116;">}</span></span>
<span class="line"></span>Nota: La pseudo clase :focus-visible sirve para dar estilo a los enlaces solo en caso de navegación por teclado.
El atributo tabindex
El atributo tabindex permite cambiar el comportamiento del enfoque en cualquier elemento de HTML.
Valores de tabindex:
tabindex="-1": El elemento desaparece del orden secuencial del teclado.tabindex="0": Un elemento que normalmente no se puede enfocar pasa a ser accesible a través del teclado.- Valor positivo: Cambia el orden de prioridad en la tabulación.
Recomendaciones
Al diseñar o editar una página web se debe tener el cuidado de que sea usable por teclado y para ello se debe cumplir que:
- Los elementos interactivos están ordenados de forma lógica siguiendo el flujo visual de la página.
- Si es posible mover el foco a un componente mediante el teclado, entonces también se debe poder quitar el foco solo con el teclado.
- Situar el foco sobre un elemento de interfaz no produce ningún cambio de contexto, como abrir una nueva ventana o enviar un formulario.
Combinaciones de teclas para abrir y cerrar el navegador
Ctrl + shift + w Volver a cargar la página pero sin usar la Cache.
Desde codetia.com queremos ofreceros una información muy útil que muchos de vosotros no conoceréis (otros seguro que si, :P), y que os facilitará muchísimo la navegación en Internet. Hablamos de las combinaciones de teclas, con las que podrás agilizar tu navegación por la red. La mayoría de las combinaciones que os indicamos en éste artículo son perfectamente válidas para la mayoría de navegadores. Este es uno de esos típicos artículos que siempre te gustará tener a mano, o en favoritos (Ctrl+D).
Combinaciones de teclas para Pestañas
Ctrl 1-8 Cambiar una pestaña especificada, contando desde la izquierda.
Ctrl +9 Cambiar a la última pestaña.
Ctrl + Tab Cambiar a la siguiente pestaña
Ctrl + Shift + Tab Cambiar a la pestaña anterior
Ctrl + W , Ctrl + F4 Cerrar la pestaña actual.
Ctrl + T Abre una nueva pestaña
Ctrl + Shift + T Vuelva a abrir la última pestaña cerrada.
Crtl + N Abrir un nuevo navegador
Para navegar más rapido
Alt + Flecha izquierda ó Retroceso Volver.
Alt + Flecha derecha ó Mayús + Retroceso Adelante.
F5 Volver a cargar la página.
Ctrl + F5 Volver a cargar la página pero sin usar la Cache.
Esc Detener la carga de la página
Alt + Inicio Abrir página nuestra página inicio.
Teclas para hacer zoom en la página web
Ctrl y + ó Ctrl + Rueda del ratón hacia delante Aumentar Zoom
Ctrl y – ó Ctrl + Rueda del ratón hacia detrás Alejar Zoom.
F11 Activa o desactiva el modo de pantalla completa.
Desplazamientos por la web
Espacio ó AvPág Desplácese hacia abajo en un marco.
Mayús + Espacio ó RePág Desplácese hacia arriba de un marco.
Inicio Ir al inicio de la página.
Fin Ir al final de la página.
Hacer clic en el scroll del ratón hacia arriba o hacia abajo.
Atajos para la barra de direcciones
Ctrl + L ó Alt + D ó F6 Activar la barra de direcciones para que pueda empezar a escribir una URL.
Alt + Enter Abrir la ubicación de la barra de direcciones en una nueva pestaña.
Atajos para buscar mientras navegamos
Ctrl + K ó Ctrl + E Activar el cuadro de búsqueda de la barra de direcciones.
Ctrl + F ó F3 Buscar dentro de la página web actual.
Ctrl + G ó F3 Buscar la siguiente palabra de un texto de la página actual.
Ctrl + Shift + G ó Shift + F3 Buscar el anterior texto buscado en la página.
Atajos para el Historial de navegación y Favoritos
Ctrl + H Abre el historial de navegación.
Ctrl + J Abre el historial de descargas.
Ctrl + D Marcar el sitio web actual como favorito. (prueba con esta web :P)
Ctrl + Shift + Supr Eliminar Datos de Navegación, historial, contraseñas, cache, etc.
Otros Atajos interesantes para navegar por internet
Ctrl + P Imprimir la página actual.
Ctrl + S Guardar la página actual a su equipo (código html).
Ctrl + O Abrir un archivo de su PC.
Ctrl + U Abrir el código de la página actual fuente.
F12 Herramientas para Desarrolladores.