Este curso es muy bueno la verdad 馃憤
Dominar las bases de la accesibilidad
驴Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnolog铆a Asistivas - cu谩les son y c贸mo funcionan
Presentar el proyecto
Instalaci贸n del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas autom谩ticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?
Usando HTML sem谩ntico en el header de nuestro sitio
Usando HTML sem谩ntico en el contenido principal de nuestro sitio
Usando HTML sem谩ntico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios din谩micos
Conclusi贸n
Siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
In the world of web development, it is essential to ensure a consistent, accessible and, above all, inclusive user experience. This means that people using assistive technologies must have the same facilities as others. A key element in achieving this is the coordination of focus and hover styles across browsers, providing consistent interaction whether the user is using a keyboard or a mouse.
Customization of focus styles is vital for users who navigate via keyboard. Their experience can vary significantly when changing tabs, as they need a clear visual indicator of their location on the page. On the other hand, hover is activated when a cursor is moved over an element, a function commonly used by mouse users. By coordinating these styles, a consistent and professional visual experience is provided.
To achieve unified styling in navigation when interacting with the keyboard and mouse, it is necessary to adjust the CSS of our website. Let's take a look at some essential steps:
Examining the current styles: first, we identify how the navigational elements behave when they receive focus or hover, in order to unify them.
/* Base navigational style */nav a { color: inherit; text-decoration: none;}
nav a:hover, nav a:focus { color: #greenPlatzi; border: 2px solid #greenPlatzi;}
Adding focus styling with focus-within
: This CSS pseudo-selector applies styles to a parent element if any of its descendants receive focus. It is ideal for forms or drop-down menus.
nav a:focus-within { outline: none; border: 2px solid #greenPlatzi;}
The visual appearance of form inputs and buttons is crucial to improve the user experience. Here is a simple guide on how to style them:
Removing default styles and adding badges:
input:focus, button:focus { outline: 3px solid #greenPlatzi; padding: 8px;}
Dual functionality for buttons in carousel: Ensure that buttons within a carousel are easily identifiable:
.carousel button:focus { border: 3px solid #greenPlatzi;}
For optimal accessibility, it is always essential to:
With these steps, you can transform the accessibility of a website, providing all users, regardless of their input method, with a uniform and pleasant browsing experience. In this way, you not only transform your site, but also improve the inclusiveness of the web.
Contributions 22
Questions 3
Este curso es muy bueno la verdad 馃憤
Y yo siempre le quitaba los outlines a todo 馃榿
La pseudo-clase CSS :focus-within representa un elemento que ha recibido el foco o que contiene un elemento que ha recibido el foco.
Cuando empec茅 a ver este curso lo hice m谩s por cumplir este tema en mi ruta de aprendizaje, pero ahora he descubierto mucho m谩s acerca de accesibilidad, es un mundoi muy interesante y con muchas buenas practicas para que personas con dificultades puedan usar nuestros productos
La intenci贸n es hacer que los estilos sean similares al enfocarnos o interactuar con un elemento de la p谩gina sin importar si el usuario est谩 usando el mouse o el teclado.
Muy buena clase. Cosas b谩sica que debemos tener en cuenta al codear.
Estoy impresionado con una chica!, he aprendido con ella lo que jam谩s hab铆a logrado en a帽os
Este no es un curso tan b谩sico como dice.
Recursos complementarios:
No me qued贸 claro el uso de focus:within 馃槮
Tremendo!!! no sabia eso jajajajaj
Crea una navegaci贸n accesible para el usuario desde el teclado con CSS
Este curso es muy bueno para los que estamos escribiendo y creando nuestras primeras l铆neas de c贸digo para web
馃憣
Muy buen reto para esta clase!
Cu谩l ser铆a la forma correcta de dar estilos al foco de los elementos solamente cuando el usuario est茅 navegando con el teclado. Entiendo que este es el comportamiento deseado para evitar agregar estilos adicionales, por ejemplo un outline, al hacer click con el rat贸n.
Want to see more contributions, questions and answers from the community?