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

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Los 4 principios de WCAG

5/35
Recursos

Aportes 39

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Los principios de accesibilidad web que se deben cumplir se resumen en el acrónimo POUR:

  • Perceptibles

  • Operables

  • Entendibles (Undestandables)

  • Robusto
    Con el tiempo y la estandarización y mejora de los navegadores, algunos de estos puntos han mejorado, pero lo tenemos que tener también en cuenta en cualquier capa de software que desarrollemos o integremos.

Las WCAG no son perfectas, pero es muy importante tener presente sus 4 principios para que nuestras páginas web los cumplan:
.
Perceptible: Todo lo que presentes en la web debe ser percibido por tus usuarios (que les llegue a su cerebro y lo interpreten). El texto suele ser uno de los elementos más perceptibles ya que puede ser leído por el usuario o por un lector de pantalla, traducido, ampliado, etc.
.
Operable: Tu web no debe depender de un mouse o de un teclado. Cualquier usuario que por cualquier motivo no disponga de estos dispositivos debe tener alternativas para operar tu sitio.
.
Comprensible: Cualquier persona que use tu página debe poder entenderla, deben comprender qué les estás diciendo. ¿Qué hace tu sitio?, ¿Cómo operarlo?, ¿Qué información requiere tu sitio de tus usuarios?, ¿Cómo suministrar esa informaicón?
.
Robusto: Si, algunos usuarios usarán el Internet Explorer (cries in developer), crea tu sitio para que sea compatible tanto con los últimos navegadores como con los más viejitos. Igualmente piensa en el hardware, no todos tus usuarios tendrán computadoras modernas. Otro punto importante es que pienses en la conectividad, la banda ancha no llega a todos lados y hay lugares donde la conectividad es muy precaria (en Venezuela el promedio de velocidad es de menos de 2 megas, en mi casa muchas veces no llega ni a 1).

Los 4 principios de WCAG

  • Perceptible : La información y los componentes de la interfaz de usuario deben ser presentados a los Usuarios de modo que ellos puedan percibirlos.

  • Operable : Los componentes de la interfaz de usuario y la navegación deben ser operables.

  • Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles.

  • Robusto: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas.

WCAG no es perfecto. Debemos asegurarnos que conocemos los principios de WCAG

4 Principios

  • Perceptible
    • La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos
    • Ejemplo → Información visual en de una Web, pero los usuarios que no puedan percibir el contenido la mejor manera sería por vía del texto (Se puede leer en voz alta)
  • Operable
    • Los componentes de la interfaz del usuario y la navegación deben ser operables
    • Ejemplo →Hay personas que no tienen uso de un mouse o un teclado por cualquier razón, podemos quitar esa dependencia del uso de esas herramientas para usar el sitio de manera diferente
  • Comprensible
    • La información y el manejo de la interfaz del usuario deben ser comprensibles
    • El lenguaje que estamos usando debe ser variable para diferentes tipos de personas
    • Cuando hablamos de este principio hablamos de que los usuarios puedan saber como usar nuestro sitio web, cómo operarlo y que es requerido de ellos
  • Robusto
    • El contenido debe ser suficientemente robusto para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas
    • Nuestro producto debe facilitar al usuario en poder usarlo de diferentes maneras, por diferentes personas, en diferentes situaciones (Performance).
    • Accesibilidad en diferentes navegadores
    • Accesibilidad en diferentes dispositivos

Alguna vez Freddy comentó que Platzi está pensado para que sus vídeos puedan ser reproducidos desde cualquier rincón del planeta sin importar la velocidad del Internet al que se tenga acceso.

Los cuatro principio:

  1. Perceptible: tratar de que todos los usuarios de una manera sencilla y fácil puedan percibir nuestro sitio
  2. Operables: Tratar que nuestra sitio se pueda utilizar con otras herramientas que no sean el mouse o teclado
  3. Comprensible: Tratar de que nuestra sitio sea el usuario pueda entenderlo fácilmente
  4. Robusto: Que nuestro sitio puedo utilizar de mejor posible las herramientas (performance).

En el tema de operable, platzi tiene algunos fallos en su web, ya que me gusta usar mas el teclado que el mouse y he tratado de mover algunas cosas con el teclado pero no se dejan y toca si o si usar el mouse, por ejemplo al publicar un comentario debo dar click al boton publicar porque con el teclado es imposible llegar a él, en cambio en otras plataformas como twitter cuando se esta escribiendo un tweet se puede presionar ctrl + enter para publicar el tweet

La explicación de “Perceptible” fue genial. Asegurarnos de que la información puede llegar al cerebro de la persona por rutas alternas. El texto es la mejor forma de lograrlo, porque puede ser interpretado y traducido por diferentes tecnologías asistidas.

Pienso que realizar un benchmark de productos digitales con estas características es muy necesario.

Espero en las próximas clases haya ejemplos con paginas web

muy buena clase de los 4 principios

Interesante y relevante el contenido, ya que la accesibilidad es fundamental en cuanto a la inserción de personas que no podrían acceder a tu sitio a no ser que contarás con la accesibilidad web.

wcag es muy insteresante
Un ejemplo de operable es "siri" donde los usuarios pueden hacer muchas cosas sin necesidad de tener el celular en las manos.

Recursos complementarios:

Los 4 principios de WCAG son:

  1. Perceptibles: El texto nos ayuda a que todos los usuarios
    puedan seguir nuestro sitio.

  2. Operables: Cualquier persona pueda no depender de un
    mouse o teclado.

  3. Entendibles: Lenguaje amigable y comprensible

  4. Robusto: Tenga accesibilidad en diferentes navegadores
    y en cualquier máquina como celular, computadora,
    tableta, mac

Al tener encuenta estas pautas vamos a saber si nuestros sitios web en realidad son accesibles para cualquier clase de persona.

Yo más que Robusto, lo llamaría flexible o adaptable.

Los principios de WCAG no son perfectos, debemos también probar con lógica de programación, tests y devtools para mejorar nuestros sitios web.

Perceptible: quieres que la información llegue al cerebro de tus usuarios de distintas formas, si sólo se hace por la pantalla y los usuarios no tienen el acceso o la visión, no podrán. El formato más accesible en términos de percepción es el texto ya que se puede traducir a diferentes tecnologías asistivas como la lectura en voz alta.
 
Operable: hay personas que no tienen uso de mouse o teclado sea por discapacidad o por una situación de ese momento. Deben poder usar las cosas de distintas formas. Quitar dependencia del mouse o teclado.
 
Comprensible: hay que asegurarnos que el lenguaje que estamos usando es amigable, ya sea porque están ocupados y no pueden poner atención o por un problema cognitivo. Deben tener claridad de cómo se usa el producto y cómo se opera. Ej: si cometieron un error, que sepan cómo corregirlo.
 
Robusto: el contenido debe poder ser usado en una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas. Performance: que se pueda usar con internet lento, accesible en diferentes navegadores, que se pueda ver en diferentes dispositivos.

Suena todo muy difícil 😦 Espero poder desarrollar teniendo todo bien en cuenta

0:52 ahhh que chistoso 😐

A continuacion les comparto algunas preguntas utiles que nos ayudan a comprender mejor lo que se busca con estos principios:
.

  • Perceptible: ¿pueden los usuarios percibir el contenido? Esto nos ayuda a tener en cuenta que solo porque algo sea perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirlo.
    La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.
    .
  • Manejable (operable): ¿pueden los usuarios usar los componentes de IU y navegar por el contenido? Por ejemplo, alguien que no puede usar mouse o pantalla táctil no puede manejar algo que demanda interacción de desplazamiento.
    Los componentes de la interfaz de usuario y la navegación deben ser operables.
    .
  • Comprensible: ¿pueden los usuarios comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es esta lo suficientemente consistente como para evitar confusiones?
    La información y el manejo de la interfaz de usuario deben ser comprensibles.
    .
  • Robusto (sólido): ¿puede una amplia variedad de usuarios-agentes (navegadores) consumir el contenido? ¿Funciona con tecnología asistencial? ¿Funciona con conexiones a internet lentas?
    El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas.

.
Accessibility - Google Web Fundamentas

LOS 4 PRINCIPIOS DE WCAG

  • Perceptible
  • Operable
  • Comprensible
  • Robusto

Perceptible
Operable
Comprensible
Robusto

Un vídeo con los 4 principios y una lectura con los mismos
Ahí tenemos un ejemplo de accesibilidad! 💡😉

Me gustó mucho como resumió los 4 principios de WCAG

Principios básicos de conformidad WCAG:

Perceptible: todo el contenido importante se pueda interpretar de distintas maneras y como es que nosotros desarrolladores estamos proporcionando esas alternativas

Operable: Qué tan sencillo es nuestro sitio de usar usar y navegar, haciendo uso de diferentes maneras (mouse y/o teclado)

Comprensible: Cómo hacemos nosotros para que nuestra páginas web aparezcan y opere de manera predecible para cualquier tipo de usuario (UX).

Robusto: Como nosotros desarrolladores podemos maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las tecnologías asistivas como punto clave para nuestro desarrollo.

¿Conocen productos digitales de parte del gobierno que utilicen este tipo de principios?, pienso que debería ser primordial que el gobierno inicie con esta implementación, irónicamente esto no es reciente, la accesibilidad web ya lleva un tiempo.

Entiendo cómo la accesibilidad web impacta en productos y servicios, más aún cuando estamos en una época “covid” que obligó a muchos negocios a reinventarse.

Excelente clase, realmente excelente un resumen muy completo de los 4 principios

Excelente Curso… muy bien explicado 😃

Los principios a evaluar en nuestros sitios web de acuerdo al estándar WCAG:

Perceptible: las interfaces deben ser capaces de ser entregadas a los usuarios.
Operable: componentes operables es decir, que permitan interactuar como se desee a cualquier tipo de usuario.
Comprensible : que nuestros usuarios sepan para qué, por qué y cómo usar los recursos de un sitio web.
Robusto: tiempos de carga, accesible en diferentes navegadores, responsive.

Creo que todo se puede hacer con HTML y CSS, vamos a seguir con el curso y ver si es así…

Es que lo que se implementa no solo es bueno y útil para las personas en condición de discapacidad sino para todo tipo de situaciones en donde no podamos por alguna razón no podamos usar el sitio de la manera deseada

👌

Como sugerencia, no utilicen la palabra que quieren describir en la descripción, pues no ayuda mucho a profundizar en el significado aunque este sea fácil de deducir. Por ejemplo Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles

<h4>Apuntes</h4>
  • La manera mejor de crear un sitio es asegurarnos que conocemos los principios de WCAG
    • Con ello podemos evaluar nuestro sitio
<h3>1. Perceptible</h3>
  • La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos
  • Debemos tratar que toda la información llegue a todos los usuarios
<h3>2. Operable</h3>
  • Los componentes de la interfaz de usuario y la navegación deben ser operables
  • Cuando se tiene falta del privilegio físico y material como ser un teclado o mouse
  • Si dejamos la dependencia del teclado y mouse abrimos un mundo a personas que usan los dispositivos de una manera diferente
<h4>3. Comprensible</h4>
  • La información y el manejo de la interfaz de usuario deben ser comprensibles
  • Hay que asegurarnos que el lenguaje puede llegar a muchas personas
  • Tus usuarios deben saber para qué sirve cada parte de tu producto, como saber si hubo un error y como corregirlo
<h3>4. Robusto</h3>
  • El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas
  • Influye de que nuestro producto debe ser usado por diferentes personas, en diferentes lugares y en diferentes situaciones
  • Hablamos de temas de:
    • Performance
    • Accesible en todos los navegadores posibles
    • Acceso de diferentes dispositivos

RESUMEN: Podemos evaluar nuestro sitio a través de 4 características entre ellas esta que la información llegue a todos los usuarios, optemos por otra forma de navegar además del mouse o teclado, hacer entender a los usuarios para que sirve cada parte del producto y finalmente que se pueda usar en todo tipo de circunstancias

LAs transcripciones 😕