Dominar las bases de la accesibilidad

1

驴Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnolog铆a Asistivas - cu谩les son y c贸mo funcionan

Presentar el proyecto

7

Instalaci贸n del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas autom谩ticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

15

Usando HTML sem谩ntico en el contenido principal de nuestro sitio

16

Usando HTML sem谩ntico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios din谩micos

Conclusi贸n

35

Siguientes pasos

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
18 Hrs
11 Min
8 Seg

Estilos de foco y hover

25/35
Resources

How to coordinate focus and hover styles on a website?

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.

Why is it important to match focus and hover styles?

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.

How to modify navigation styles using CSS?

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:

  1. 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;}
  2. 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;}

How to create custom styles for inputs and buttons?

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:

  1. Removing default styles and adding badges:

    input:focus, button:focus { outline: 3px solid #greenPlatzi; padding: 8px;}
  2. Dual functionality for buttons in carousel: Ensure that buttons within a carousel are easily identifiable:

    .carousel button:focus { border: 3px solid #greenPlatzi;}

How to ensure best accessibility practices?

For optimal accessibility, it is always essential to:

  • Do not remove the outline without replacement: Removing this property can make it impossible for keyboard users to identify its position.
  • High contrast colors: Use colors that contrast well with the background so that they are visible.
  • Extensive testing: Be sure to test accessibility features on multiple devices.

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

Sort by:

Want to see more contributions, questions and answers from the community?

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.

Me parece gracioso que siempre hable en femenino.

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.

No entiendo, este curso es de Dise帽o Web, para la ruta de Dise帽o UX / UI ya tuvimos un curso sobre esto a nivel dise帽o no de c贸digo.
excelente..
tamalito

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.