Dominar las bases de la accesibilidad

1

Bases de Accesibilidad Web y Creación de Portafolio Personal

2

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

3

Pautas de Accesibilidad Web: Comprensión y Aplicación

4

Pautas de Accesibilidad Web: Principios y Criterios WCAG

5

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

6

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

7

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

8

Pruebas de Accesibilidad Web con Lighthouse en Chrome

9

Simulación de Accesibilidad Visual en Sitios Web

10

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

11

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

12

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

13

HTML Semántico para Mejora de Accesibilidad Web

14

HTML Semántico: Mejora la Estructura de tu Página Web

15

Refactorización de HTML para Mejorar Semántica y Accesibilidad

16

Mejorando la Accesibilidad Web con HTML Semántico

17

Uso de WAI-ARIA para Mejorar la Accesibilidad Web

18

Uso adecuado de roles en aplicaciones web

19

Accesibilidad Web: Uso de Aria para Lectores de Pantalla

20

Accesibilidad Web: Estados ARIA para Lectores de Pantalla

21

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Mejora de Accesibilidad Web con CSS: Contraste y Colores

23

Estrategias para Mejorar la Accesibilidad de Iconos Web

24

Implementación de Enlaces de Salto para Accesibilidad Web

25

Estilos de Foco y Hover para Accesibilidad Web

26

Optimización de Formularios y Estilos CSS en HTML

Extender la accesibilidad usando JavaScript

27

Interacciones y Accesibilidad en Carruseles Web con JavaScript

28

Accesibilidad en Carruseles: Manejo de Foco con TabIndex

29

Accesibilidad en Carruseles para Lectores de Pantalla

30

Mejoras de Accesibilidad en Modales con HTML y CSS

31

Accesibilidad en Elementos Dinámicos: Mejora de Modales

32

Validación de Formularios Web: Instrucciones Claras y Ejemplos

33

Mejorando la Accesibilidad de Formularios Web

34

Implementación de ARIA Live para Accesibilidad Web

Conclusión

35

Accesibilidad Web: Mejora Continua y Pruebas Prácticas

Pautas de Accesibilidad Web: Principios y Criterios WCAG

4/35

Lectura

Las pautas de accesibilidad de contenido web nos guían al momento de implementar la accesibilidad web. Las podemos usar durante todo el proceso de desarrollo de producto, desde que nace la idea para lo que queremos construir, durante el diseño de los estilos y las interfaces, hasta cuando escribimos código y hacemos pruebas de calidad. Nos señalan los puntos importantes para tener en cuenta con eso podemos construir páginas, productos y aplicaciones que le funcionan a todos nuestros usuarios sin importar su capacidades, dispositivos o preferencias.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 39

Preguntas 1

Ordenar por:

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

Hola, saludos a todos desde Puerto Ordaz Venezuela.
Tenía interés en saber si un curso en Platzi era accesible con un lector de pantalla y estas 48 horas me dieron esa oportunidad. Ingresé al curso de Git y GitHub y está muy bueno, tiene bastante contenido y Freddy lo hace muy bien a mi parecer porque es muy descriptivo, cosas como que dice lo que escribe, es excelente pues no sé si conciente o no, el complementa el lector de pantalla. Soy ciego y para los que no saben lo que es un lector de pantalla, es el software que me permite usar la computadora.
Ahora bien si hablamos de accesibilidad web y partiendo del artículo de arriba puedo presentar un pequeño ejemplo de evaluación de accesibilidad web de esta misma página que es donde se presentan los videos y el resto del material de enseñanza:
El principio 2- Operable - falla porque no facilita moverse o navegar a través de la página con facilidad con el teclado, los botones del reproductor de video o por lo menos el de play/pause carece de teclas de acceso directo o hotkeys, ya que estas me evitan tabular entre varios botones, algunos sin etiquetar, hasta ubicar el botón de pausa o el progressbar que también es muy usado para ir adelante o atrás en el video.
Si estoy al principio de la página y quiero ir a la sección de comentarios o ver la información complementaria escrita por el profesor, tengo que moverme de arriba a abajo por la página hasta llegar a la sección deseada, pudiendo estar organizada en cabeceras o headers ya que con el lector de pantalla con una tecla brincaría a cada una de estas secciones.

Al entrar ya en las pautas se pueden especificar mejor las fallas, por ejemplo, hay recursos que son solo imagenes y no tienen ninguna alternativa textual.

Cuando programaba y veía no tenía idea de lo necesario que era tomar en cuenta estas pautas al momento de hacer una aplicación web o de escritorio, pero ahora entiendo que hay millones de personas que con alguna discapacidad podrían tener acceso independiente a la información en la web si estas están bien contruidas tomando en cuenta la accesibilidad. Así que colegas que bueno que han tomado este curso, aprendan bien y apliquenlo a sus próximos proyectos, que hay muchos que se lo van a agradecer.

Para la Profe:
Navegador: Google Chrome.
Lector de pantalla: NVDA 2020.3
Puede que el sitio se comporte mejor con Jaws en su versión 2019 o superior y navegando con Firefox.

Aún me faltaron navegar por otras páginas como la de examen o evaluación, recursos por mencionar algunas que recuerdo, pero en general con algo de paciencia se puede hacer los cursos.
No pude terminar el curso de Git, espero volver en algún momento, cuando reuna algunos dolaritos, hay varios cursos interesantes

Gracias Platzi, Dios les bendiga.
Carlos Pacheco Uribe, seguidor de Jesucristo e Ingeniero en Informática.

¿Por qué casi no se habla de accesibilidad en las escuelas? Creo que debe ser super fundamental desarrollar tecnología 100% accesible

Profundizando los 12 criterios de conformidad en mis propias palabras:

Las Pautas de Accesibilidad para el Contenido Web 2.0 definen cómo crear contenido web más accesible para las personas con discapacidad.

A - nivel básico
AA - nivel intermedio
AAA - nivel avanzado (gobiernos, universidades o servicios esenciales.)

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: Cómo 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.

En total hay 25 criterios (Link: https://bit.ly/2HpXG1w)

  • Contenido no textual
    Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto en las situaciones enumeradas a continuación.

  • Sólo audio y sólo vídeo (grabado)
    Para contenido sólo audio grabado y contenido sólo vídeo grabado, se cumple lo siguiente, excepto cuando el audio o el vídeo es un contenido multimedia alternativo al texto y está claramente identificado como tal:
    Sólo audio grabado: Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido sólo audio grabado.
    Sólo vídeo grabado: Se proporciona una alternativa para los medios tempodependientes o se proporciona una pista sonora que presenta información equivalente al contenido del medio de sólo vídeo grabado.

¿Cómo se podría cumplir este principio?
4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las tecnologías asistivas

Entiendo que la página debe ser compatible con los navegadores actuales por ejemplo, pero cómo sería respecto a aplicaciones futuras?

Acá solamente se habla del primer nivel de accesibilidad! 🤯

En la guia rapida se describe cada criterio de comformidad y se presentan diferentes tecnicas para cumplirlos. Muy util!

De verdad uno piensa que los problemas de accesibilidad no te van a tocar, pero hoy en día este termino se utiliza para todo, desde como se construyen los edificios, hasta como se organiza tu página web.

Estoy empezando mi carrera como frontend y todo esto me parece buenísimo. Quiero que mis proyectos sean accesibles para todos.

estos cuatro criterios corresponden apenas al primer nivel de WCAG, verdad?

A caray, ahora sí a programar con ética

platzi simpre salvandome los amo!!!

No he entendido el punto 2.2

con respecto a la 3.1 cuan tipos de fuentes podemos asignar a la web?

Wuo, una pagina no es solo echar codigo y ya, tambien se debe de pensar en todos los tipos de usuario que pueden interactuar y como podemos facilitarle esto, Genial

A gran parte de las administradoras tributarias en LatAm pareciera que no les importa.

**Resumen: Criterios de Conformidad WCAG 2.0** 1. **Perceptible** - Alternativas textuales para contenido no textual. - Alternativas para medios (subtítulos, guiones). - Presentación de contenido de diversas formas. - Facilitar visión y audición del contenido. 2. **Operable** - Acceso completo mediante teclado. - Tiempo suficiente para interactuar con contenido. - Evitar elementos que causen convulsiones. - Navegación clara y localización de contenido. 3. **Comprensible** - Legibilidad (tamaño de texto, contraste). - Páginas predecibles. - Instrucciones claras y correcciones de errores. 4. **Robusto** - Compatibilidad con tecnologías actuales y futuras.
leyendo todo esto prefiero ser backend
interesante

La Accesibilidad en la web debería implementarse por ley en todos los países del mundo, ya que ésta es verdadera inclusividad de todos los sectores de la población, que por largo tiempo usualmente son los más relegados, marginados o poco tomados en cuenta en los aspectos tecnológicos.

Estas pautas deberíamos adoptarlas paulatinamente (pues es muy abrumador todo lo que implica) y hacerlas parte de esencial de nuestro ciclo de creación de contenido y desarrollo de software.

Lo que mas me llamo la atencion, fue lo de consulta rapida, ojala mas paginas lo imprementaran

Estoy muy satisfecho con la lectura, ahora tengo mas o menos una mejor idea de como contruir mis productos web.

Para mí es sorprendente el contraste que hay en la manera en que los proyectos de tecnología priorizan la accesibilidad, algunos no le dan tanta importancia, pero otros por ejemplo dentro de las universidades, lo ponen en el centro de todo.

Es información muy valiosa, te amamos!

¡Increíble! Sólo tenía en cuenta la 1.1 y sólo desde mi privilegio 😔 pues decía “pongámosle información al atributo alt por si el usuario tiene problemas con la conexión y no carga la imagen” pero ¿Y las personas que tengan problemas visuales y requieran de algún lector para poder navegar? Todos los días se puede aprender a ser mejor ciudadano de la web 💚.

Se toma a la ligera , pero el que sea robusto es muy importante

Muy bueno!

La 3.3. me pareció muy novedosa y útil.

Me sorprende estos principios. Muy interesante el curso.

Es interesante como la accesibilidad pasa a tener una adaptación muy útil a todo tipo de personas y no solo a las personas con diversidad funcional. Por ejemplo, explicar lo que aparece en la pantalla para personas ciegas, es funcional incluso para captar la atención de las personas que pueden ver.

Siento que debia conocer esto antes!

Solo conocía la parte de Alternativas, y creía que eso era todo, excelente y mucho por aprender

Es vital diseñar y desarrollar productos accesibles!!

Hace un año vengo aplicando revisiones de accesibiilidad a multiples aplicaciones de una empresa gubernamental y es increible las falencias que se encuentran; pero lo importante es que al momento de recibir el feedback y las sugerencias de mejora lo toman con mucha calma y disposición para mejorar sus productos.

👌

Esto está muy alineado con la usabilidad de los sitios web, algunos principios se repiten aquí como criterios.

Hay empresas que no te piden accesibilidad en sus paginas. ?