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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Skip Links

24/35
Recursos

Aportes 15

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Skip Links: son enlaces de p谩gina internos que ayudan a la navegaci贸n por la p谩gina actual, en lugar de a p谩ginas completamente nuevas.

<h3>Skip links</h3>

Son botones que a simple vista no se ven pero al momento que un software de lectura de texto los detecta aparecene

Se crean poniendo un bot贸n com煤n y corriente

<button id="skip-link">Saltar al contenido</button>

Y en css le pondremos lo siguiente

.skip-link{
weight: 0; /* desaparecemos el bot贸n a simple vista*/
}
.skip-link:focus,
.skip-link:active{
background..
font ...
} /* de esta forma cuando navegen con un teclado este aparecer谩*/

馃弬 Skip Links

<h4>Apuntes</h4>
  • A veces tenemos una navegaci贸n inicial bastante extensa
  • Para una persona con discapacidades que use un dispositivo que le facilite acceder al sitio, tendr谩 que pasar por todo el contenido inicial
  • Podemos usar skip links facilitar la navegaci贸n ofreciendo un bot贸n que le permita saltar al contenido principal
  • Skip links son enlaces que nos dirigen a partes espec铆ficas dentro del HTML

Los skip links solo se deber铆an de poner en las paginas donde el contenido sea muy amplio? o Deberia ser casi obligatorio?

<h3>Recomendaci贸n:</h3>

Utilizar la etiqueta <main>

<main id = "tu_id">
<!-- Tu contenido -->
</main>

Es lo m谩s recomendable, gracias a ello tenemos por defecto este comportamiento habilitado.
Antes de ello, aprendan bien a posicionar la etiqueta main, sem谩nticamente tiene un orden que hay que cumplir.

Si te preocupa la compatibilidad de Main: Incluso es aceptado por Internet Explorer 11 con la propiedad: width: tuvalor, pero para 2020 la el uso de este browser es del 2%, as铆 que: Ni se preocupen ya por darle soporte, est谩 鈥減r谩cticamente muerto IE 11鈥

muy interesante

Con eso tambi茅n se hace que el skip link se vuelva a esconder una vez pasamos de 茅l o lo usamos?

Wow qu茅 interesante! Esto es nuevo para m铆, es una manera de crear un men煤 de navegaci贸n para accesibilidad y que se puede esconder si no lo necesitas.

En este momento, en el puzzle de la accesibilidad me falta saber c贸mo puedo personalizar y dise帽ar todo el flujo del narrador de la pagina para que vaya narrando y navegando las diferentes secciones y elementos.

Me ha encantado esta estrategia, no se me habia ocurrido y me parece s煤per util para personas que quieren navegar con el teclado y para mejorar la accesibilidad

Crea una opci贸n para saltar al contenido principal de tu sitio web con HTML y CSS

Ejemplo de estrategia para no mostrar elementos.

馃憣