Estilos de Foco y Hover para Accesibilidad Web

Contenido del curso

Dominar las bases de la accesibilidad

Presentar el proyecto

7
Creación de un Portafolio Accesible con HTML, CSS y JavaScript
05:27 min

Evaluar la accessibilidad de sitios web

Refactorizar HTML para ser mas accessible

Utilizar CSS para aumentar la acessibilidad de un sitio web

Extender la accesibilidad usando JavaScript

Conclusión

35
Accesibilidad Web: Mejora Continua y Pruebas Prácticas
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:20

Estilos de Foco y Hover para Accesibilidad Web

Curso de Accesibilidad Web

Clase 25 de 35

Clase 25 / 35

Recursos

¿Cómo coordinar estilos de foco y hover en un sitio web?

En el mundo del desarrollo web, es esencial garantizar una experiencia de usuario coherente, accesible y, sobre todo, inclusiva. Esto significa que las personas que utilizan tecnologías asistivas deben tener las mismas facilidades que las demás. Un elemento clave para lograr esto es la coordinación de los estilos de foco y hover en los navegadores, brindando una interacción homogénea, ya sea que el usuario esté utilizando un teclado o un ratón.

¿Por qué es importante igualar los estilos de foco y hover?

La personalización de los estilos de foco es vital para usuarios que navegan a través del teclado. Su experiencia puede variar significativamente al cambiar tabulaciones, ya que estos necesitan un indicador visual claro de su ubicación en la página. Por otro lado, el hover se activa cuando un cursor se mueve sobre un elemento, una función comúnmente utilizada por quienes usan ratones. Coordinando estos estilos, se proporciona una experiencia visual consistente y profesional.

¿Cómo modificar los estilos de navegación utilizando CSS?

Para lograr unificar el estilo en la navegación al interactuar con el teclado y el ratón, es necesario ajustar el CSS de nuestra web. Veamos algunos pasos esenciales:

Examinando los estilos actuales: Primero, identificamos cómo se comportan los elementos navegacionales cuando reciben foco o hover, con el objetivo de unificarlos.

/* Estilo base de navegación */
nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover, nav a:focus {
  color: #verdePlatzi;
  border: 2px solid #verdePlatzi;
}

Adición de estilo de foco con focus-within: Este pseudo-selector en CSS aplica estilos a un elemento padre si cualquiera de sus descendientes recibe foco. Es ideal para formularios o menús desplegables.
```
nav a:focus-within {
  outline: none;
  border: 2px solid #verdePlatzi;
}
```

¿Cómo crear estilos personalizados para inputs y botones?

El aspecto visual de los inputs de formularios y botones es crucial para mejorar la experiencia del usuario. Aquí te presento una guía sencilla para estilizarlos:

Retirar estilos predeterminados y agregar distintivos:

input:focus, button:focus {
  outline: 3px solid #verdePlatzi;
  padding: 8px;
}

Doble funcionalidad para botones en el carrusel: Asegura que los botones dentro de un carrusel sean fácilmente identificables:
```
.carousel button:focus {
  border: 3px solid #verdePlatzi;
}
```

¿Cómo asegurar mejores prácticas de accesibilidad?

Para una accesibilidad óptima, es fundamental siempre:

No eliminar el outline sin reemplazo: Eliminar esta propiedad puede hacer imposible que los usuarios de teclado identifiquen su posición.
Colores de alto contraste: Utiliza colores que contrasten bien con el fondo para que sean visibles.
Pruebas extensivas: Asegúrate de probar las funciones de accesibilidad en múltiples dispositivos.

Con estos pasos, puedes transformar la accesibilidad de un sitio web, proporcionando a todos los usuarios, independientemente de su método de entrada, una experiencia de navegación uniforme y placentera. Así, no solo transformas tu sitio, sino que también mejoras la inclusividad de la web.