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

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Usando HTML semántico en el header de nuestro sitio

13/35
Recursos

Aportes 27

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Sabes que es interesante que estemos hablando de accesibilidad y no tenemos tus diálogos en texto para una persona sin audición jaja … he tomado algunos cursos y el único curso realmente accesible para todas las personas fue el de Diseño centrado en el usuario donde la profe Arantxa Mendoza Bárbara puso sus archivo en formato ppt y toda su explicación la puso en letras en cada presentación super bien !!!

No es crítica pero si sería importante que lo consideren en sus cursos y ojo que no es único curso que no tiene materiales el de UX avanzado tampoco lo tiene.

Para quienes acceden a este curso mediante la Ruta de Diseño Ux y no tengan nociones básicas de programación, o quienes acceden por cualquier motivo y no tengan estos conocimientos de programación, les recomiendo hacer primero el curso de programación básica 😃 Creo que si yo no lo hubiese hecho antes, me habría costado muchísimo entender esta info. Y si no me equivoco los primeros módulos son gratis!

Les comparto este diagrama que te ayuda a definir el texto alternativo correcto para una imagen, espero sea de ayuda: https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php

Un resumen de las etiquetas usadas en esta clase.
<header></header> Es la parte superior de nuestra pagina Lo primero que ve el usuario en cuanto orden.
<img> Es la etiqueta para poner imágenes, y tiene el atributo alt="El lector de pantalla lee lo que esta aqui "
<nav></nav> Es para colocar un menú de navegación
<ul></ul> Es para poner una lista que no tiene un orden especifico.
<li></li> Un elemento de lista

De acuerdo con la documentación de MDN sobre HTML y CSS sobre el uso de etiquetas HTML semánticas y la accesibilidad, afirma: “Se puede acceder a una gran cantidad de contenido web con solo asegurarse de que los elementos correctos del lenguaje de marcado de hipertexto se utilicen para el propósito correcto en todo momento"
.

Codigo de la clase
index.html

<header>
      <img src="images/juliana.jpeg" alt="Juliana Gomez" class="header-img" />
      <h1 class="header">Juliana Gomez</h1>
      <h2 class="subtitle">Front End Developer</h2>
      <nav>
        <ul class="navigation">
          <li class="nav-item">
            <a href="#acerca">
              Acerca de
            </a>
          </li>
          <li class="nav-item">
            <a href="#proyectos">
              Mis Proyectos
            </a>
          </li>
          <li class="nav-item">
            <a href="#contacto">
              Contacto
            </a>
          </li>
        </ul>
      </nav>
    </header>

styles.css

body,
header,
section {
  align-items: center;
  background-color: var(--gris-medio);
  display: flex;
  flex-direction: column;
  width: 100%;
}
nav {
  width: 100%;
}
.nav-item a {
  text-decoration: none;
  color: var(--blanco);
}

Poco a poco me voy acostumbrando a ponerle alt a todas las imágenes que pongo 😉

Hay una manera, en VSC, de envolver una parte del HTML con una etiqueta: el comando “>Emmet: Wrap with abbreviation”. Para acceder a él, presionen ctrl+shift+p. Luego, escriban el comando igual que si escribieran git push origin main.

Para más comodidad, pueden vincular un atajo de teclado a este comando a través del menú de atajos de VSC. Yo le puse el mío: ctrl+alt+w, seguido de ctrl+alt+r.


Que satisfactorio es ver Y ENTENDER !!

Accesibilidad>
-HTML semántico

  • Atributo ALT de las imágenes
  • El atributo href de las anclas.

:v

<img src="./images/juliana.jpeg" alt="Juliana Gómez. Mujer joven con cabello rizado, cejas levemente levantadas, sonrisa disimulada. Esta viendo al frente, viste escote y tiene las manos en los bolsillos del pantalón." class="header-img" />

como se mueren los de diseño al ver codigo, gente no se asusten.
Tomen el curso definitivo de html y css y tenganlo en cuenta

sobresalen por enciam del diseñador mediocre cuando busquen trabajo en ui y ux

No les piden que sepan programación pero buenasn nociones de html y css hace la diferencia

El proyecto no es Responsive 😦

Abrí el proyecto en local y hubo algo que llamo mi atención, la letra se ve muy pequeña. Creo que otra buena practica de accesibilidad podría ser que se usen medidas relativas, como REM, para que estas fuentes aumenten de tamaño de acuerdo al tamaño de la pantalla

Refrescando todo lo visto de html para hacer sitios accesibles

La última versión del lenguaje de programación HTML es HTML5. Las webs implementadas con lenguaje HTML5 no son correctamente visualizadas en los navegadores antiguos ya que esta versión incluye nuevas etiquetas que no son soportadas.

Me alegra que todo lo visto en esta clase ya lo hacía en mis proyectos, vamos bien!

Para los enlaces les pondré que al darle click vaya a la sección especifica mediante un Id.

Muy interesante

Codigo de la clase
Index.html

<header>
      <img src="images/juliana.jpeg" alt="Juliana Gomez" class="header-img" />
      <h1 class="header">Juliana Gomez</h1>
      <h2 class="subtitle">Front End Developer</h2>
      <nav>
        <ul class="navigation">
          <li class="nav-item">
            <a href="#acerca">
              Acerca de
            </a>
          </li>
          <li class="nav-item">
            <a href="#proyectos">
              Mis Proyectos
            </a>
          </li>
          <li class="nav-item">
            <a href="#contacto">
              Contacto
            </a>
          </li>
        </ul>
      </nav>
    </header>

index.css

body,
header,
section {
  align-items: center;
  background-color: var(--gris-medio);
  display: flex;
  flex-direction: column;
  width: 100%;
}

nav {
  width: 100%;
}

.nav-item a {
  text-decoration: none;
  color: var(--blanco);
}

Comprendo mejor a hora la importancia de usa mejores etiquetas en mi HTML.

Si alguien seguía la ruta de diseño y necesita ayuda con HTML o el tema de programación que fuese, escríbanme que con gusto les ayudo 😄

Utilizando las etiquetas correctas, para dar mayor accesibilidad, genial clase

  • Atributo alt= "descripción de la imágen" → se usa para las imágenes es el texto alternativo que describe las imágenes que esta en este elemento

Código de semántico de la clas

<header>
      <img src="images/juliana.jpeg" alt="Juliana Gomez" class="header-img" />
      <h1 class="header">Juliana Gomez</h1>
      <h2 class="subtitle">Front End Developer</h2>
      <nav>
        <ul class="navigation">
          <li class="nav-item"> <a href="/acerca-de">Acerca de</a></li>
          <li class="nav-item"> <a href="/mis-proyectos">Mis Proyectos</a></li>
          <li class="nav-item"><a href="/contacto">Contacto</a></li>
        </ul>
      </nav>
    </header>
<li class="nav-item"><a href="=/acerca-de">Acerca de</a></li>
          <li class="nav-item"><a href="/mis-proyectos">Mis Proyectos</a></li>
          <li class="nav-item"><a href="/contacto">Contacto</a></li>

💚