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

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Los 4 principios de WCAG

5/35
Recursos
Transcripción

Aportes 34

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Sería idea que los que hacen la app de platzy tomarán este curso porque en verdad no hay cosas tan horribles como la app

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.

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.

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

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.

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.

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 ūüėź

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

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 ūüėē