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?

o inicia sesi贸n.

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.

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 鈫扝ay 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 鈥淧erceptible鈥 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.

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 馃槓

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 鈥渃ovid鈥 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 馃槙