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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
23H
18M
53S

Overview del proyecto con los retos resueltos

21/35
Recursos

Aportes 21

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Yo agregue etiquetas label, de esta manera tambi茅n seria correcto? y de igual manera agregar los aria-label o ya estar铆an de mas?

as铆 quedo mi c贸digo del Form鈥

        <label for="nombre">Nombre</label>
        <input
          aria-label="nombre"
          name="nombre"
          type="text"
          placeholder="Ingresa tu nombre"
        />
        <br />
        <label for="correo">Correo</label>
        <input
          aria-label="correo"
          name="correo"
          type="text"
          placeholder="Ingresa tu correo"
        />
        <br />
        <label for="mensaje">Mensaje</label>
        <textarea
          aria-label="mensaje"
          name="mensaje"
          cols="30"
          rows="10"
          placeholder="Ingresa tu mensaje"
        ></textarea>
        <button class="send-button">Enviar</button>
      </form>

Definitivamente es mejor arrancar un proyecto teniendo la accesibilidad en mente, que refactorizarlo para a帽adirla.
Dar谩 menos dolores de cabeza 馃槄

Despu茅s de refactorizar

Adjunto pagina con mejoras:

![](

Ha estado calidad la refactorizaci贸n del HTML 馃槂

隆As铆 voy por ahora con mi portafolio! Gracias Juliana 馃挄

Como tengo multilenguaje los Alt y Aria-label los cargu茅 con la traducci贸n tambi茅n, as铆, si eligen cambiar el idioma estos cambiar谩n tambi茅n.

El sitio ya se volvi贸 mucho m谩s accesible con todo lo que llevamos

Yo le pus茅 un aria-label al elemento input del mensaje.

Este es el c贸digo de mi formulario. A帽ad铆 etiquetas label con su correspondiente for y el aria-label para los inputs

<form class="form-container">
      <label for="nombre">Nombre</label>
      <input type="text" id="nombre" aria-label="nombre" />
      <label for="correo">Correo</label>
      <input type="text" id="correo" aria-label="correo" />
      <label for="mensaje">Mensaje</label>
      <textarea class="message-input" type="text" id="mensaje" aria-label="mensaje"></textarea>
      <button class="send-button" aria-label="enviar formulario">Enviar</button>
    </form>

De 10 馃槃 !!!

Pienso que falta un label para el form de mensaje.

Asi quedo mi portfolio 馃槃鈥!!

Me gusto que este video ya que es de las respuestas a los retos de videos previos, esto porque, porque asi podemos verificar si lo hicimos parecido o similar los que lo hicieron o resolver las dudas para los que no, en ambos caso es util, debieran copiar esta idea en otros cursos donde dejan retos pero posteriormente ni se acuerdan de ellos y no sabemos si los hicimos correctamente. es una sugerencia.

Bastante genial!, nunca hab铆a visto a fondo lo importante que es la accesibilidad para los sitios web.

Despu茅s de refactorizar el html:

Se me hace muy impresionante c贸mo mejora tanto la accesibilidad solamente con HTML sem谩ntico

excelente

Ya los hab铆a realizado, el footer me quedo as铆:

<footer class="contact-section">
      <h2 class="header">Contacto</h2>
      <form class="form-container">
        <label for="Nombre">Nombre:</label>
        <input type="text" aria-label="Tu Nombre" id="Nombre" /> <br />
        <label for="Correo">Correo</label>
        <input type="email" aria-label="Tu Correo" id="Correo" /> <br />
        <label for="Mensaje">Mensaje</label>
        <textarea
          id="Mensaje"
          aria-label="Tu Mensaje"
          cols="48"
          rows="10"
        ></textarea>
        <br />
        <button class="send-button">Enviar</button>
      </form>
    </footer>

Poniendo label y el input email para correo y textarea para el mensaje. Adem谩s borre ese div y sus estilos se los aplique al textarea

Que genial curso, ahora antes de empezar a desarrollar la pagina, tambien pensare en la accesibilidad que le voy a dar

Con este curso uno se da cuenta de lo importante que es el tema de la accesibilidad en la web. Todo debe ser pensado para mejorar la navegaci贸n del otro.

馃憣