Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAprende Accesibilidad Web paso a paso
Rating: 4.4 out of 54.4(2,923 ratings)
39,232 students
Aprende Accesibilidad Web paso a paso
Crea sitios web accesibles para todos los usuarios, para todos los dispositivos y mejor posicionados
Created bySergio Luján Mora, Ester Serna Berná, Olga Carreras, Armando Suárez Cueto, Antonio Ferrández Rodríguez, Cátedra Telefónica Universidad de Alicante
Last updated 7/2019
Spanish
What you'll learn
- Detectar los problemas de accesibilidad que presenta una página web.
- Proponer soluciones para los problemas más comunes de falta de accesibilidad que presentan las páginas web.
- Desarrollar páginas web accesibles y compatibles con múltiples dispositivos.
- Mejorar el posicionamiento (SEO) de las páginas web al aplicar los consejos para mejorar la accesibilidad web.
Explore related topics
Course content
11 sections • 102 lectures • 7h 43m total length
- Antes de empezar...
- Introducción1:46
- Ejemplos de problemas de accesibilidad7:00
En este vídeo vamos a ver tres ejemplos de barreras de accesibilidad que podemos encontrar en las páginas web. Los ejemplos que vamos a analizar afectan principalmente a los usuarios con discapacidad visual (por ejemplo, una persona ciega, una persona con baja visión o una persona con ceguera al color o daltonismo), con discapacidad motora (por ejemplo, una persona con paraplejia que no puede mover sus extremidades o una persona con la enfermedad de párkinson que tiene dificultad para controlar sus movimientos) y con discapacidad auditiva (por ejemplo, una persona sorda o con baja audición), aunque también podrían afectar a otros grupos de usuarios con discapacidad.
Pero estas barreras de accesibilidad también pueden afectar a todos los usuarios según el contexto de uso en el que se encuentren.
- Ejemplos de problemas de accesibilidad
- Visión general del curso2:08
- Consejos para aprender en este curso2:45
- Los profesores3:12
- ¿Puedo ponerme en contacto con los profesores?0:42
- Aviso de copyright1:22
- Definición de la accesibilidad web3:18
- Sabías que... algunas cosas que deberías saber sobre la accesibilidad web6:50
En este vídeo vamos a ver la importancia de la accesibilidad web a través de varias cosas que deberías de saber.
Por ejemplo, deberías de saber que el porcentaje de personas con algún tipo de discapacidad está aumentando y seguirá aumentando en los próximos años. O deberías de saber que un sitio web puede ser accesible y no tiene por eso que ser “feo y aburrido”: este es un mito que mucha gente tiene asumido y que es totalmente falso.
- Sabías que...
- Cómo la Web mejora la vida de las personas con discapacidad6:00
La Web puede mejorar la vida de las personas con discapacidad, porque les puede permitir realizar muchas actividades de su vida sin depender de la ayuda de otras personas, sin tener que pedir ayuda, pero desgraciadamente muchas veces no es posible porque las páginas web presentan barreras.
En este vídeo se muestran tres situaciones de la vida diaria que gracias a la Web una persona ciega puede realizar por sí sola. Un análisis similar se podría realizar con otros tipos de discapacidades.
- Cómo la Web mejora la vida de las personas con discapacidad (artículo)5:00
Complementa la visualización del vídeo anterior con la lectura de este artículo que desarrolla dos de los ejemplos expuestos en el vídeo.
- Mitos de la accesibilidad web1:21
- Beneficios de la accesibilidad web2:13
- Ejemplos de sitios web accesibles7:29
En este vídeo vamos a ver tres ejemplos de sitios web que son accesibles:
Estos sitios web han implementado más opciones de las mínimas que son necesarias para garantizar que un sitio web es accesible.
- Ejemplos de sitios web accesibles
- ¿Qué es la accesibilidad web?
- Las personas con discapacidad1:05
- Las personas con discapacidad
- Cómo afectan las diferentes discapacidades al acceso a la Web1:40
- Cómo navegan por la Web las personas con discapacidad0:23
- Discapacidad en la web (1)9:06
Discapacidad en la web está compuesto por dos vídeos a través de los cuales podrás ver los diferentes tipos de discapacidad, las barreas de acceso con las que se encuentran estos usuarios y algunos de los productos de apoyo que utilizan para interactuar con nuestros contenidos. En esta primera parte vermos la discapacidad visual.
- Discapacidad en la web (2)7:43
En esta segunda parte del vídeo de discapacidad en la web se muestran las barreras de acceso y productos de apoyo para el resto de discapacidades: auditivas, motrices, neurológicas o cognitivas, las derivadas del envejecimiento y las limitaciones producidas por una situación desfavorable.
Error: en el minuto 5:00, donde pone "PRODUCTOS DE APOYO que impiden el acceso a personas con discapacidad cognitiva y neurológica", debería poner "PRODUCTOS DE APOYO que usan las personas con discapacidad cognitiva y neurológica".
- Personas con discapacidad visual0:49
- Personas con discapacidad auditiva0:15
- Personas con discapacidad motora0:12
- Personas con discapacidad cognitiva0:07
- Personas con trastornos del lenguaje0:37
- Ejemplo de discapacidad: la afasia0:28
- Ejemplo de discapacidad: la afasia
- Personas con múltiples discapacidades1:14
- Ejemplo de discapacidad múltiple: la sordoceguera2:42
- Ejemplo de discapacidad múltiple: la sordoceguera
- Ejemplo de discapacidad: entrevista a una persona sordociega1:16
- Ejemplo de discapacidad múltiple: entrevista a una persona sordociega
- Personas con edad avanzada0:07
- Los productos de apoyo para la discapacidad0:41
En esta parte del curso se van a describir los productos, tanto software como hardware, que hay disponibles actualmente con el objetivo de servir de apoyo y de facilitar la accesibilidad web a las personas con diversidad funcional.
El objetivo principal de esta parte es que el alumno conozca la diversidad de productos de apoyo disponibles, los cuales vienen a complementar las herramientas y pautas de accesibilidad que se han visto en los demás apartados del curso.
Nos centraremos en su aplicación a la “accesibilidad web”, tanto para permitir la navegación e interactuar con la web, como para facilitar la comprensión y percepción de los contenidos publicados en un sitio web.
Para ello se organizarán dichos productos de apoyo agrupándolos en dos categorías: los productos que han de ser provistos por el propio usuario, y los productos que pueden ofrecer los diseñadores del sitio web.
- Los productos de apoyo (1)7:55
En esta serie de cuatro vídeos me voy a centrar en los productos, tanto software como hardware, que hay disponibles actualmente para los usuarios con el objetivo de servir de apoyo y de facilitar la accesibilidad web a las personas con diversidad funcional.
- Los productos de apoyo (2)4:12
En este segundo video de los cuatro disponibles sobre productos de apoyo para la discapacidad, me voy a centrar en los productos que facilitan la accesibilidad web por parte del usuario, pero que a diferencia de los vistos en el video anterior, se trata de algunos proyectos de futuro que se están desarrollando actualmente.
- Los productos de apoyo (3)7:37
En este tercer video de los cuatro disponibles sobre productos de apoyo para la discapacidad, me voy a centrar en los productos que facilitan la accesibilidad web por parte de los diseñadores del sitio web, concretamente en los interfaces de navegación web y los traductores a lengua de signos.
- Los productos de apoyo (4)6:53
En este último video sobre productos de apoyo para la discapacidad, voy a centrarme en los productos que facilitan la accesibilidad web por parte de los diseñadores del sitio web, pero a diferencia de los vistos en el video anterior, concretamente en los sistemas de simplificación automática de textos, los cuales permiten la denominada lectura fácil.
- Los productos de apoyo para la discapacidad
- Ejemplo de producto de apoyo: el magnificador de pantalla (1)3:09
Primera parte de la entrevista a Juan Antonio Giménez Caballero, instructor tiflotecnología y braille, Dirección de Zona de ONCE Alicante, en la que explica qué es y para qué sirve un magnificador de pantalla.
- Ejemplo de producto de apoyo: el magnificador de pantalla (2)7:26
Segunda parte de la entrevista a Juan Antonio Giménez Caballero, instructor tiflotecnología y braille, Dirección de Zona de ONCE Alicante, en la que explica qué es y para qué sirve un magnificador de pantalla.
- Ejercicio: Los productos de apoyo de Stephen Hawking0:55
- Las personas con discapacidad y la Web
- Pautas y leyes. Introducción0:53
- Introducción a las WCAG 2.015:08Las Pautas de Accesibilidad para el Contenido Web, WCAG 2.0 (Web Content Accessibility Guidelines) del W3C son el estándar de facto a nivel mundial que establecen las pautas del diseño accesible. En este tema vamos a ver cómo están organizadas y estructuradas, los diferentes niveles de conformidad que existen, la documentación asociada a las mismas, conceptos básicos que es importante que conozcas y recursos de interés. Es una introducción a las WCAG 2.0 y, por tanto, no se tratan los criterios de conformidad concretos que hay que cumplir, no te preocupes, los vamos a ver con mucho detalle en las lecciones posteriores. Lo importante es que te familiarices con la especificación.
- WCAG 2.0
- Legislación en España0:21
- Legislación en España (1)6:57
Repaso de la legislación española sobre accesibilidad web:
- LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico.
- REAL DECRETO 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.
- Norma UNE 139803:2004 Aplicaciones informáticas para personas con discapacidad - Requisitos de accesibilidad para contenidos en la Web.
- LEY 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad.
Más información sobre legislación sobre accesibilidad web en España: Accesibilidad Web: Legislación española.
- Legislación en España (2)3:59
Repaso de la legislación española sobre accesibilidad web:
- LEY 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información.
Más información sobre legislación sobre accesibilidad web en España: Accesibilidad Web: Legislación española.
- Legislación en España (3)5:02
Repaso de la legislación española sobre accesibilidad web:
- Norma UNE 139803:2012 Requisitos de accesibilidad para contenidos en la Web.
- LEY 26/2011, de 1 de agosto, de adaptación normativa a la Convención Internacional sobre los Derechos de las Personas con Discapacidad.
- Real Decreto Legislativo 1/2013, de 29 de noviembre, por el que se aprueba el Texto Refundido de la Ley General de derechos de las personas con discapacidad y de su inclusión social.
Más información sobre legislación sobre accesibilidad web en España: Accesibilidad Web: Legislación española.
- Legislación en España
- Legislación en otros países0:15
- Pautas y leyes
- Contenido accesible. Introducción1:18
- Accesibilidad: 4 elementos más problemáticos (1)6:13
En este vídeo conocerás los cuatro elementos que presentan mayor problema de acceso a los usuarios que utilizan un lector de pantalla para acceder a nuestros contenidos y te daré algunos consejos para que tú como desarrollador web puedas evitarlos. En esta primera parte veremos algunos consejos para hacer nuestro flash y captcha accesibles.
- Accesibilidad: 4 elementos más problemáticos (2)3:39
En la segunda parte comento la problemática existente con enlaces o botones que no tiene sentido fuera de contexto. ¿Qué ocurre con los enlaces del tipo 'Pinche aquí' o 'Siga este enlace'?.
- Accesibilidad: 4 elementos más problemáticos (3)4:03
En esta tercera parte comento brevemente la inclusión de imágenes sin un texto alternativo o un texto alternativo inapropiado. El texto alternativo dependerá principalmente si tenemos que insetar en nuestro documento una imágen decorativa o una imágen necesaria.
- Imágenes. Texto alternativo3:22En esta lección te proporcionamos los recursos necesarios para que aprendas a incluir y redactar adecuadamente el texto alternativo de tus imágenes y cumplir de este modo con el criterio de conformidad 1.1.1 (nivel A) de las WCAG 2.0
- Imágenes. Texto alternativo
- Audio y vídeo. Texto alternativo2:58
En esta lección te ofrecemos los recursos necesarios para que conozcas qué tipo de alternativas tienes que proporcionar a tus contenidos tempodependientes en función del tipo de contenido que es y del nivel de conformidad deseado, y cumplir de este modo con la pauta 1.2 de las WCAG 2.0
- Audio y vídeo. Texto alternativo
- Subtítulos para el contenido multimedia (1)6:48En este vídeo vamos a ver cómo crear subtítulos para el contenido multimedia. Las Pautas de Accesibilidad al Contenido Web 2.0 (WCAG 2.0) indican que el contenido audio grabado o en directo debe tener subtítulos sincronizados.
Además, también se proporcionan algunos consejos para crear subtítulos correctos:
- Los subtítulos deben estar centrados en la parte inferior, excepto los subtítulos que representen efectos sonoros que se sitúan en la parte superior.
- Los subtítulos deben aparecer en pantalla el tiempo suficiente para ser leídos.
- Es preferible que los subtítulos no ocupen más de dos líneas en pantalla.
- Cada línea de texto no debe superar los 35-40 caracteres.
- El interlineado debe ser sencillo.
- Y se debe utilizar una tipografía legible.
- Los subtítulos deben estar sincronizados con las palabras habladas.
- La persona que habla debe ser identificada cuando hay más de dos personas en pantalla o cuando la persona que habla no está visible.
- Los efectos de sonido y la música se deben escribir cuando sean significativos y ayuden a la comprensión. Se deben escribir entre paréntesis o corchetes.
- Todo lo que se dice se debe subtitular, independientemente del idioma o dialecto.
- El empleo de argot y dialecto se tiene que conservar e identificar.
- Se debe emplear la puntuación para clarificar los textos y su significado y se deben evitar los errores ortográficos.
- Subtítulos para el contenido multimedia (2)5:01
En este vídeo vamos a ver cómo crear subtítulos para los vídeos publicados en YouTube. Hay tres formas de añadir subtítulos:
- Se puede subir una transcripción de texto o un archivo de subtítulos con tiempos.
- También se puede escribir o pegar una transcripción completa del vídeo y los intervalos de los subtítulos se establecerán automáticamente.
- Y se pueden escribir los subtítulos mientras se ve el vídeo.
- Subtítulos para el contenido multimedia
- Otros requisitos de accesibilidad relacionados con el contenido multimedia7:21
En las lecciones anteriores hemos abordado con detalle los requisitos de accesibilidad, relacionados con el contenido multimedia, que debes conocer en profundidad. Sin embargo, en las WCAG 2.0 hay otros requisitos relacionados con el audio, con el contenido que destella, con el tiempo que se impone al contenido o con el contenido que debe poderse pausar, detener u ocultar. En esta lección incluimos una relación de todos ellos y enlaces recomendados.
- Encabezados (1)3:24
Esta lección está compuesta por dos vídeos, en los cuales vamos a ver la importancia del marcado de los encabezados en accesibilidad web. En esta primera parte veremos cómo afecta el marcado o no de los encabezados a la navegabilidad de nuestras páginas.
- Encabezados (2)5:49
En esta segunda parte vamos a ver la forma correcta de insertar nuestros encabezados y los fallos más comunes que solemos cometer los desarrolladores web en la creación de nuestras páginas HTML.
- Encabezados
- Otros elementos semánticos: párrafos, citas y énfasis.3:24
En esta lección se citan otros de los elementos estructurales que has de tener en cuenta en el desarrollo de tus páginas web para que tus contenidos sean accesibles.
- Idioma (1)4:34
El marcado del idioma en nuestros documentos es una lección compuesta por dos vídeos. El marcado del idioma empleado en un documento o sitio Web incrementa la legibilidad del mismo, beneficiando a todos los usuarios (no sólo a las personas con discapacidad).
En este primer vídeo explico en detalle la identificación del idioma de nuestra página HTML.
- Idioma (2)6:50
En este segundo vídeo explico en detalle como marcar el cambio de idioma cada vez que se produzca en el cuerpo de nuestro documento a través de una serie de ejemplos aplicados a cada uno de los elementos donde pueda ocurrir, párrafo, bloque, cita, etc. Veremos que depende de la gramática usada al igual que el marcado del idioma de la página HTML.
- Marcado del idioma
- Tablas (1)4:34
Esta lección sobre la programación de tablas accesibles consta de tres vídeos. En este primer vídeo aprenderéis la importancia de marcar correctamente la información tabular y las 5 técnicas súficientes que tenéis que tener en cuenta para que la tabla sea perceptible por todos los usuarios, incluídas en el Criterio de Conformidad 1.3.1 Información de relaciones de las WCAG 2.0.
- Tablas (2)5:12
En esta clase se detallan tres de las técnicas suficientes incluidas en ls WCAG 2.0 para la programación accesible de tablas. En concreto en este vídeo aprenderéis a:
- Usar tablas para presentar información tabular.
- Usar elementos caption para asociar títulos de tabla con las tabla de datos.
- Usar al atributo summary del elemento table para proporcionar un resumen a la tabla de datos.
- Tablas (3)5:36
En esta clase, el vídeo que cierra la lección sobre las tablas accesibles aprendereis a desarrollar las dos últimas técnicas, es decir a:
- Usar el atributo scope para asociar celdas de encabezado y celdas de datos en las tablas de datos.
- Usar atributos id y headers para asociar las celdas de datos con las celdas de encabezado en las tablas de datos.
- Tablas
- Otros requisitos de accesibilidad relacionados con la redacción del contenido3:58
En esta lección repasamos otros requisitos de accesibilidad relacionados con el contenido, en concreto con la redacción del mismo, como son los relacionados con su legibilidad o con la no dependencia de características sensoriales.
- Formularios accesibles (1)3:57
Esta lección es la primera de una serie de tres, en las cuales vamos a repasar los principales requisitos de accesibilidad que deben cumplir los formularios web. En esta primera lección aprenderemos a etiquetar correctamente los controles de formulario.
- Formularios accesibles (2)5:28
En esta lección nos centraremos en los controles de un formulario web, en la relación entre los mismos y en los requisitos de accesibilidad que deben cumplir.
- Formularios accesibles (3)6:22
En esta tercera lección de la serie formularios accesibles, aprenderemos a prevenir los errores de los usuarios en los formularios y a mejorar la accesibilidad de los mensajes de validación.
- Formularios accesibles
- Los captchas4:34
- Los captchas
- Introducción a la accesibilidad en documentos electrónicos5:51
En esta lección veremos una introducción a la accesibilidad en documentos electrónicos y te recomendaremos los recursos necesarios para que puedas ampliar tus conocimientos sobre el tema.
- Accesibilidad en documento electrónicos
- Contenido accesible
- Navegación accesible. Introducción2:33
En esta lección introducimos el concepto de "Navegación accesible", qué significa y qué criterios están relacionados con el mismo.
- El título de la página5:27
En este vídeo vamos a ver la importancia del título de la página web. El título de una página web realiza varias funciones. Por ejemplo, el título permite identificar la página web que se está visualizando en un navegador. El criterio de conformidad 2.4.2 Titulado de páginas de las Pautas de Accesibilidad al Contenido Web (WCAG 2.0) indica: Las páginas web tienen títulos que describen su temática o propósito.
- Enlaces accesibles (1)6:29
En la serie "Enlaces accesibles" vamos a repasar los requisitos de accesibilidad que deben cumplir los elementos más importantes de la navegación de un sitio web: sus enlaces.
Los enlaces son la base de la navegación en un sitio web, y por tanto es fundamental asegurarnos de que sean perceptibles, operables y comprensibles por todos los usuarios.
- Enlaces accesibles (2): enlaces descriptivos9:46
En esta lección nos centraremos en los requisitos que deben cumplir los enlaces para ser descriptivos y así comprensibles y navegables por todos los usuarios.
En concreto hablaremos de los enlaces descriptivos fuera de contexto.
- Enlaces accesibles (3): enlaces descriptivos en contexto8:41
Esta lección es la última de la serie "Enlaces accesibles". En ella veremos qué significa hacer enlaces descriptivos mediante la suma del texto del enlace y su contexto determinado por software.
- Enlaces accesibles
- Enlaces "saltar a"6:36
En este vídeo vamos a ver por qué son importantes los enlaces “saltar a” en una página web. Las Pautas de Accesibilidad al Contenido en la Web 2.0 (WCAG 2.0) indican en el criterio de conformidad 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web.
- Enlaces "saltar a"
- Navegación por teclado. Problemas habituales con el foco7:42
Uno de los requisitos más relevantes para asegurar la navegación accesible de un sitio web, es que pueda ser navegable por teclado, puesto que para muchas personas es el único o el principal medio de interacción con las páginas.
En esta lección nos vamos a centrar en cuatro problemas habituales que dificultan o impiden la navegación por las páginas mediante el teclado y que están relacionados con el foco:
- El foco no está visible
- El orden del foco no tiene sentido
- Trampas para el foco
- Recibir el foco provoca un cambio de contexto
- Navegación por teclado. Problemas habituales con el foco
- Múltiples vías, ubicación y consistencia (1)3:35
En la serie "Múltiples vías, ubicación y consistencia" vamos a repasar varios requisitos de accesibilidad que harán que la navegación por tu sitio sea más sencilla, más rápida y más acorde con las diferentes necesidades de las personas que acceden a él.
En esta lección nos centraremos en la necesidad de ofrecer múltiples vías para localizar el contenido, permitiendo así a los usuarios navegar por el sitio de diferentes maneras que satisfagan sus diferentes necesidades.
- Múltiples vías, ubicación y consistencia (2)5:46
En esta lección nos centraremos en otros dos requisitos de una navegación más accesibles.
- Facilitar la ubicación del usuario, que en todo momento puede contestar a la pregunta "¿Dónde estoy?".
- Mantener la consistencia, tanto en la presentación y la maquetación, como en la identificación de los componentes que tienen la misma funcionalidad.
- Múltiples vías, ubicación y consistencia
- Barra de navegación como una lista de enlaces (1)3:46
En este vídeo vamos a ver cómo se debe crear una barra de navegación en una página web para que sea accesible.
La mayoría de los sitios web posee alguna barra de navegación o en muchas ocasiones más de una barra de navegación que permite al usuario navegar por las diferentes páginas que componen el sitio web.
Una barra de navegación es un conjunto de enlaces, en definitiva, una lista de enlaces. Por tanto, se deben emplear las etiquetas de HTML para crear una barra de navegación: ul, ol y li.
- Barra de navegación como una lista de enlaces (2)5:16
En este vídeo vamos a ver cómo se debe crear una barra de navegación en una página web para que sea accesible. En concreto, vamos a ver el código HTML y CSS que permite crear una barra de navegación vertical u horizontal a partir de una lista de elementos.
- Barra de navegación como una lista de enlaces (3)4:49
En este vídeo vamos a ver cómo se debe crear una barra de navegación en una página web para que sea accesible. En concreto, vamos a escuchar cómo se navega por una barra de navegación mediante un lector de pantallas.
- Barra de navegación como una lista de enlaces (4)7:08
En este vídeo vamos a ver cómo se debe crear una barra de navegación en una página web para que sea accesible. En concreto, vamos a ver como el uso de la etiqueta nav de HTML5 mejora el uso de la barra de navegación cuando se emplea un lector de pantallas.
- Barra de navegación como una lista de enlaces
- Navegación accesible
- Diseño accesible. Introducción0:21
- Contraste7:40
En este vídeo vamos a ver que el bajo contraste de los colores puede ser una barrera de accesibilidad para algunos grupos de usuarios. Una combinación de colores de alto contraste puede ayudar a todos los usuarios.
- Contraste
- Color6:50
Una persona con ceguera al color (daltonismo) tiene dificultad para ver los colores y su brillo en la forma usual y también tiene problemas para establecer la diferencia entre sombras del mismo color o de colores similares. La solución consiste en proporcionar diferentes combinaciones de colores para el diseño de un sitio web.
- Color
- Tipografía y dislexia (1)4:58
En este vídeo vamos a ver cómo la tipografía puede ser una barrera de accesibilidad para algunos grupos de usuarios. En concreto, vamos a ver los problemas que puede causar la elección de una mala tipografía entre las personas con dislexia. La dislexia ocasiona problemas para aprender palabras nuevas, lo que supone un impedimento para la correcta comprensión y expresión y dificulta el proceso de aprendizaje en general.
- Tipografía y dislexia (2)5:45
En este vídeo vamos a ver cómo la tipografía puede ser una barrera de accesibilidad para algunos grupos de usuarios. En esta segunda parte se proporcionan unos consejos para evitar o reducir los problemas que pueden afectar a las personas con dislexia en las páginas web.
- Tipografía y dislexia
- Otros requisitos de accesibilidad relacionados con el estilo del texto2:19
En esta lección repasamos otros requisitos de accesibilidad relacionados con el estilo del texto, como los referentes al cambio de tamaño o la presentación visual.
- Diseño web adaptable (responsive web design)2:16
- Responsive design y accesibilidad. Buenas y malas prácticas. Errores comunes30:00
En esta lección aprenderemos qué es Responsive Design y su relación con la accesibilidad web. Repasaremos además una serie de buenas y malas prácticas así como los errores de accesibilidad más comunes en desarrollos Responsive Design.
- Responsive Design y accesibilidad
- Diseño accesible
- Interacción accesible. Introducción0:43
- JavaScript y accesibilidad (1)7:33
En esta sección aprenderemos cómo hacer que la interacción en nuestras páginas sea más accesible y cómo hacer que el código JavaScript que incluimos en ellas no suponga una barrera de accesibilidad para ningún usuario.
En esta lección hablaremos de la independencia del dispositivo, de cómo usar correctamente los manejadores de eventos JavaScript y del atributo tabindex.
También explicaremos qué es DOM y qué tipo de funciones usar para insertar, modificar o eliminar contenido dinámicamente.
- JavaScript y accesibilidad (2)8:25
En esta lección nos centramos en el concepto de JavaScript no intrusivo y el principio de Mejora Progresiva.
- JavaScript y accesibilidad
- Introducción a WAI-ARIA (1)6:09En esta clase vamos a ver cómo la especificación del W3C, WAI-ARIA, nos permite incluir información semántica sobre la estructura de la página y sobre los componentes de la interfaz, su comportamiento y la relación entre los mismos. De manera que esta información pueda ser transmitida a los usuarios que utilizan productos de apoyo, como un lector de pantalla, y facilitarles así la comprensión de la página y su interacción con la misma. Aprenderemos qué es un rol y los diferentes tipos que existen; y veremos diferentes ejemplos y recursos para que puedas ampliar tus conocimiento sobre el tema.
- Introducción a WAI-ARIA (2)4:57En esta clase vamos a ver más ejemplos de roles y propiedades WAI-ARIA. Abordaremos también las "live regions", o zonas de la página que se modifican y actualizan automáticamente sin intervención del usuario, y cómo WAI-ARIA permite que estos cambio sean anunciados a los usuarios de productos de apoyo como un lector de pantalla. Encontrarás, además, diferentes recursos para que sigas ampliando tus conocimientos sobre el tema.
- WAI-ARIA
- Interacción accesible
- Introducción al posicionamiento (SEO): conceptos básicos6:14Para abordar la relación entre dos disciplinas que en un principio parecen tan diferentes, como es el caso de la Accesibilidad Web y el Posicionamiento en buscadores (SEO), es necesario comenzar explicando los conceptos básicos de esta disciplina.
- Introducción al posicionamiento (SEO): técnicas básicas (1)7:29En esta lección vamos a aprender 4 técnicas básicas de posicionamiento en buscadores. Verás que las recomendaciones que se ofrecen no difieren en muchas casos de las técnicas que aplicamos en accesibilidad para que las páginas sean accesibles para todas las personas.
- Introducción al posicionamiento (SEO): técnicas básicas (2)6:35En esta lección seguimos repasando más técnicas básicas de posicionamiento en buscadores. De nuevo observarás que muchas de ellas son comunes a las técnicas que aplicamos en la accesibilidad web.
- SEO y accesibilidad21:00Ahora que ya conoces los conceptos básicos del Posicionamiento en buscadores y las técnicas que se aplican, vamos a repasar y comparar detenidamente todas las técnicas comunes de la Accesibilidad Web y el SEO. Comprobaremos que ambas disciplinas tienen muchos puntos de encuentro y cómo mejorar la accesibilidad de un sitio web implica mejorar también su posicionamiento.
- Accesibilidad y posicionamiento
- Metodología de evaluación: WCAG-EM18:51
La "Metodología de Evaluación de Conformidad con la Accesibilidad en sitios Web (WCAG-EM)" es un documento del W3C que pretende proporcionar una metodología armonizada internacionalmente para la evaluación de todo tipo de sitios web de acuerdo con las WCAG 2.0.
Debido a que generalmente no es factible evaluar cada una de las páginas de un sitio web, resulta fundamental emplear un método fiable para determinar el nivel de accesibilidad, de forma global, de un sitio web completo.
En esta lección repasaremos los diferentes pasos que propone la metodología: las buenas prácticas para definir el alcance de la evaluación, explorar el sitio, seleccionar una muestra representativa cuando no es factible evaluar todo el sitio, auditar la muestra seleccionada y reportar los resultados de la evaluación mediante informes estructurados y uniformes.
- Herramientas de evaluación automática21:00Las herramientas de evaluación automática son muy útiles para facilitar el trabajo de revisión de la accesibilidad de un sitio web, aunque es importante recordar que nunca sustituyen a la evaluación manual por parte de un experto. En esta clase te recomendamos una recopilación de herramientas gratuitas y recursos donde puedes consultar otras muchas.
- Análisis de accesibilidad con TAW5:42
En este vídeo se explica el funcionamiento de la herramienta de evaluación automática de la accesibilidad web llamada TAW.
Puedes acceder a esta herramienta online desde http://www.tawdis.net para seguir las indicaciones mostradas en el vídeo.
- Análisis de accesibilidad con Web Developer Toolbar y WAVE6:00
En esta clase se explican las barras de herramientas Web Developer Toolbar y WAVE para realizar la evaluación de algunos de los elementos vistos en este curso. En concreto:
- Orden lógico de lectura.
- Imágenes.
- Enlaces.
- Encabezados.
- Listas.
- Citas.
- Abreviaturas de acrónimos.
Ambas herramientas son muy útiles para analizar la accesibilidad de los contenidos de nuestras páginas web. Te recomiendo que te las descargues, las pruebes e investigues nuevas funcionalidades, ya que pueden ser de gran ayuda en tus análisis.
Para cada una de las barra de herramientas existe una versión para Firefox y otra para Chrome.
- Análisis y evaluación de la accesibilidad
Requirements
- Ya deberías estar familiarizado con las tecnologías de desarrollo web, como HTML, CSS, JavaScript y DOM.
Description
El objetivo de este curso es proporcionar una introducción a la accesibilidad web que ofrezca una visión general de los diferentes componentes: contenido, navegación, diseño e interacción. La accesibilidad junto con la usabilidad son los dos componentes principales de la experiencia de usuario (user experience).
Al finalizar el curso serás capaz de crear sitios web accesibles para todos los usuarios, para todos los dispositivos y mejor posicionados.
Este curso tiene un enfoque practico. Contiene más de 6 horas de vídeos y más de 40 ejercicios de tipo test para evaluar el aprendizaje.
Para aprovechar totalmente este curso es necesario estar familiarizado con las tecnologías de desarrollo web actuales, como HTML, CSS, JavaScript y DOM.
El curso contiene numerosos ejemplos reales de sitios web accesibles y no accesibles.
Este curso está dirigido a diseñadores y desarrolladores web que deseen mejorar la calidad de sus sitios web.
Los profesores del curso poseen una amplia experiencia en el desarrollo de sitios web accesibles para todos los usuarios.
Who this course is for:
- Este curso de introducción a la accesibilidad web es adecuado para estudiantes que estén familiarizados o se dediquen al desarrollo web y que buscan tener unos conocimientos básicos sobre la accesibilidad web.
- Este curso probablemente no es adecuado para estudiantes que ya tengan conocimientos sobre accesibilidad web, sepan desarrollar páginas web accesibles y lo que desean es ampliar sus conocimientos o aprender técnicas avanzadas y complejas de accesibilidad web.