Guía accesibilidad web

Guías para la accesibilidad
en contenidos web
Web Content Accessibility Guidelines. WCAG 2.1.
Discusión por Jaime Cortés

Qué es accesibilidad?
Según RAE (2020)
1. adj. Que tiene acceso.
2. adj. De fácil acceso o trato.
3. adj. De fácil comprensión, inteligible.

Accesibilidad
●Permite que cualquier persona pueda disponer y utilizar las
edificaciones, servicios o productos en igualdad de condiciones
que los demás.
●Relación con las tres formas básicas de actividad humana:
movilidad, comunicación y comprensión; las tres sujetas a
limitación como consecuencia de la existencia de barreras
(Alonso 2002; Alonso 2003).
●Proporciona flexibilidad al acomodarse a las necesidades de
cada usuario y está dirigida a que el sistema esté elaborado al
más amplio número de usuarios.

Accesibilidad
●Se abre la posibilidad de que pueda ser accedido y
usado por el mayor número posible
de personas, indiferentemente de las
limitaciones propias del individuo o
de las derivadas del contexto de uso.

WCAG 2.0 y WCAG 2.1 son estándares
técnicos estables y de referencia. Contienen 12-
13 pautas que se agrupan en cuatro principios:
perceptible, operable, comprensible y
robusto.
Cada pauta incluye criterios de conformidad,
que se pueden comprobar y que se clasifican en
tres niveles:
A
AA
AAA.
Prefiero el término
Recomendaciones

Aunque las recomendaciones hablan
de contenidos para la web, son usadas
(deberían serlo mucho más) en el
mundo del diseño para la construcción
de sitios web, blogs, tiendas y aulas
virtuales, entre otras

Contenido web es (mas que diseño web):
●Texto
●Imágenes (gráficos, formas, fotografías, etc)
●Material audiovisual (videos, audios)
●Material interactivo (formularios, desafíos, “arrastrar y soltar”…)
●Documentos creados con otros programas para
luego ser publicados en un sitio web (Archivos
PDF, Presentaciones, hojas de cálculo, mapas,
etc)

Los principios:
perceptible, operable,
comprensible y
robusto.

Principios
Perceptible
●Proporcione alternativas textuales para contenido no
textual.
●Proporcione subtítulos y otras alternativas para
multimedia.
●Cree contenido que se pueda presentar de diferentes
formas, incluyendo a las tecnologías de apoyo, sin
perder información.
●Facilite que los usuarios puedan ver y oír el
contenido.
Flor de rosa blanca en un jardín natural

Operable
●Proporcione acceso a todas las funcionalidades
mediante el teclado.
●Conceda a los usuarios tiempo suficiente para leer y
usar el contenido.
●No use contenido que pudiera causar convulsiones o
reacciones físicas.
●Ayude a los usuarios a navegar y encontrar el
contenido.
●Facilite métodos de entrada diferentes al teclado.
Principios

Comprensible
●Proporcione texto legible y comprensible.
●Proporcione contenido que sea predecible en
apariencia y operación.
●Ayude a los usuarios a evitar y corregir
errores.
Principios

Robusto
●Maximice la compatibilidad con
herramientas de usuario actuales y futuras.
Principios

Glosario
●HTML. Lenguaje de Marcación de Hipertextos. (la versión actual es 5)
●CSS. Hojas de estilo en cascada (La versión actual es 3)
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de código</title>
</head>
<body class="elduro">
<div class="papa">
<header>
<div
class="titulo">Este es el titulo</div>
<nav>aquí
el menú</nav>
</header>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
CSS:
body{
background-color: green;
}
.elduro{
width: 100%;
}
.papa{
width: 90%;
margin:0 auto;
padding: 0;
}

Glosario
●Actuación por movimiento. Comportamiento de los contenidos a partir del
movimiento del dispositivo (como cuando cambiamos a horizontal en el
celular)
●Audiodescripción. Información en texto que es leída por una voz y describe
una imagen en movimiento. Se utiliza para dar información a las personas
ciegas sobre lo que está pasando en un video o una película.
●Encabezados. Nombres principales en un medio de comunicación. En un sitio
web se refiere al nombre de una página y/o un sitio web.
●Entradas. La información que las personas colocamos en los sitios web o
similares mediante teclados, cámaras o grabadoras.
●Foco. Identificación visual evidente para saber dónde se puede hacer clic o en
donde está el punto de navegación. Ejemplo

Glosario
●Procesamiento. Es la acción que realiza el navegador al
interpretar el código fuente de un sitio web.
●Secuencia significativa. Es el orden de navegación y lectura
(determinado por el orden en el código fuente) lógico. (En
occidente leemos de izquierda a derecha y de arriba hacia
abajo)
●Subtítulos. Información en texto que se extrae de los audios y
acciones en una pieza audiovisual. Sirven también para traducir
las conversaciones.
Header
Footer
Content

Nivel de conformidad A
1.1.1 Contenido no textual
1.2.1 Sólo audio y sólo vídeo (grabado)
1.2.2 Subtítulos (grabados)
1.2.3 Audiodescripción o Medio Alternativo (grab
1.3.1 Información y relaciones
1.3.2 Secuencia significativa.
1.3.3 Características sensoriales
1.4.1 Uso del color.
1.4.2 Control del audio.
Perceptible

2.1.1 Teclado.
2.1.2 Sin trampas para el foco del teclado.
2.1.4 Atajos de teclado (Nueva WCAG 2.1)
2.2.1 Tiempo ajustable
2.2.2 Poner en pausa, detener, ocultar
2.3.1 Umbral de tres destellos o menos.
2.4.1 Evitar bloques
2.4.2 Título de la página.
2.4.3 Orden del foco.
2.4.4 Propósito de los enlaces (en su contexto).
2.5.1 Gestos del puntero (Nueva WCAG 2.1)
2.5.2 Cancelación del puntero (Nueva WCAG 2.1)
2.5.3 Nombre en la etiqueta (Nueva WCAG 2.1)
2.5.4 Actuación por movimiento (Nueva WCAG 2.1)
Operable

3.1.1 Idioma de la página.
3.2.1 Al recibir el foco.
3.2.2 Al recibir entradas.
3.3.1 Identificación de errores.
3.3.2 Etiquetas o instrucciones.
Comprensible

4.1.1 Procesamiento.
4.1.2 Nombre, función, valor.
Robusto

Nivel de conformidad AA
1.2.4 Subtítulos (en directo).
1.2.5 Audiodescripción (grabado).
1.3.4 Orientación de la pantalla (Nueva WCAG 2.1)
1.3.5 Identificación del propósito del campo (Nueva W
1.4.3 Contraste (mínimo).
1.4.4 Cambio de tamaño del texto.
1.4.5 Imágenes de texto
1.4.10 Reajuste de elementos (Nueva WCAG 2.1)
1.4.11 Contraste no textual (Nueva WCAG 2.1)
1.4.12 Espaciado del texto (Nueva WCAG 2.1)
1.4.13 Contenido en hover o focus (Nueva WCAG 2.1
Perceptible

2.4.5 Múltiples vías.
2.4.6 Encabezados y etiquetas.
2.4.7 Visibilidad del foco.
Operable

3.1.2 Idioma de las partes
3.2.3 Navegación consistente.
3.2.4 Identificación consistente.
3.3.3 Sugerencias ante error.
3.3.4 Prevención de errores
(Legales, financieros, de datos).
Comprensible

4.1.3 Mensajes de estado (Nueva WCAG 2
Robusto

No olvide colocar la descripción de las
imágenes que cargue en el aula virtual.
El texto que escriba aquí, será leído
por los lectores virtuales de pantalla
que utiliza la población ciega. De lo
que aquí se escriba, dependerá la
comprensión por parte de muchos
estudiantes
SIEMPRE utilizar textos alternativo

Si usa material audiovisual, que
permita activar los subtítulos
(aunque no todos funcionan).
Ofrecer alternativas textuales

Video publicado por el INSOR Evaluación
Nacional de Intérpretes de Lengua de Señas
Colombiana, Español.
Resumen:
El video muestra a dos personas hablando con
Lengua de Señas Colombiana explicando cómo
funciona la evaluación nacional de intérpretes
de LSC.
Fue...
Material audiovisual Descripción del Material audiovisual
Ofrecer alternativas textuales

Es importante acompañar todos los contenidos
audiovisuales con descripciones y transcripciones en
texto por varias razones:
1)En casos en donde no hay interpretación o subtítulos,
es una oportunidad para que el estudiante pueda
comprender la intención del material pedagógico.
2)En caso de tener problemas técnicos (mala conexión a
internet o uso de software desactualizado), el texto con
seguridad va a aparecer en la pantalla antes que el
contenido audiovisual.
3)Sirve para copiar y pegar en otros documentos de
estudio.

Archivos PDF accesibles
Que és un PDF accesible
Un PDF accesible es aquel cuyo contenido es accesible para
todos los usuarios independientemente de su discapacidad o
contexto de uso.
Muchas de las acciones están pensadas para las personas que
utilizan un lector de pantalla. Por ello, la mayoría de las
modificaciones no son apreciables visualmente, y puede no
haber diferencias visuales entre la versión del PDF antes de
hacerlo accesible y la versión del PDF accesible.

Algunas de las acciones más importantes:
●Indicar el idioma del documento, e indicar el idioma de cada contenido que esté en un
idioma diferente al principal. De este modo el lector de pantalla podrá leer el documento
adecuadamente.
●Incluir texto alternativo a las imágenes informativas para que el lector de pantalla pueda leer
al usuario la información que transmiten. Y por el contrario, indicar qué imágenes son
decorativas (artefacto) para que no las anuncie.
●Etiquetar el documento correctamente, es decir, indicar internamente de que tipo es cada
contenido (un encabezado, una tabla, una lista, etc.) Así el lector de pantalla anuncia
adecuadamente cada contenido y el usuario puede "ojear" el documento saltando de un tipo de
elemento al siguiente mediante atajos de teclado.

Más acciones más importantes:
●Revisar el orden de lectura interno que no siempre coincide con el visual, lo cual
provocará que el lector de pantalla lea el documento en desorden y por tanto sea
incomprensible.
●Revisar la paginación interna del documento.
●Incluir un índice de marcadores para facilitar la navegación por el documento.
●Incluir un texto alternativo a los enlaces cuando no es claro su destino, o si estamos
cumpliendo el nivel AAA, también a las abreviaturas y acrónimos en determinados casos, de
manera que el lector de pantalla lea este texto en vez del enlace o la abreviatura.
●Asegurar un orden de tabulación (foco) coherente entre los elementos interactivos.
●Asegurar que la configuración de seguridad no interfiere con el acceso a la información
por parte del lector de pantalla.

●Garantizar el acceso a la información y los servicios de
las aulas virtuales.
●Permitir la participación de todos.
●Entender las diferencias en las maneras como se navega y
se usa la web.
●Establecer garantías de interacción real entre:
✔Usuarios finales,
✔diseñadoras/es,
✔Software y sistemas,
✔Artefactos (dispositivos).
●Impulsar el desarrollo de interfaces (no solo visuales)
que permitan la inclusión a todo nivel.

Samuel Maslow. Pirámide de necesidades
Psicología Usabilidad - accesibilidad

Preguntas, comentarios, observaciones,
anécdotas… Algo para agregar?

Bibliografía, página 1 de 3
Abou-Zahra, S. (2018). 2018 Update on W3C/WAI Accessibility Conformance Testing (ACT) for
WCAG. ICT Accessibility Testing Symposium: Mobile Testing, 508 Revision, and Beyond, 93.
Alonso L., F. (dir.). 2002. Libro Verde de la Accesibilidad en España. Diagnóstico y bases para un plan
integral de supresión de barreras. Inserso. ISBN: 84-8446-048-7.
Alonso L., F. (dir.). 2003. Acceplan. Plan de accesibilidad 2003-2010. Libro Blanco. Ceapat.
Caldwell, B., Cooper, M., Reid, L. G., & Vanderheiden, G. (2008). Web content accessibility
guidelines (WCAG) 2.0. WWW Consortium (W3C).
Dirección General de Modernización Administrativa, Procedimientos e Impulso de la Administración,
& Electrónica. (2014). Guía de Accesibilidad en Sedes Electrónicas (Ministerio de Hacienda y
Administraciones Públicas Secretaría General Técnica Subdirección General de Información,
Documentación y Publicaciones Centro de Publicaciones).
Duarte Ramírez, C. P., Zapata Botero, J. C., & Cadena Celis, H. I. (2019). Implementar accesibilidad
para discapacidades auditiva y visual a sistemas de la CNSC. Universidad Piloto de Colombia.
Hernández Galán, J. (2011). Accesibilidad universal y diseño para todos. Arquitectura y urbanismo.
Fundación ONCE.

Hilera, J. R., Amado-Salvatierra, H., Martínez, D., Viera, J., & Pestana, L. (2014). Accesibilidad web:
Estudio de un caso con evaluación automática y evaluación de usuarios. Actas del VI Congreso
Internacional sobre Aplicación de Tecnologías de la Información y Comunicaciones Avanzadas (ATICA
2014).
Initiative (WAI), W. W. A. (s/f). Web Content Accessibility Guidelines (WCAG) Overview. Web
Accessibility Initiative (WAI). Recuperado el 5 de agosto de 2020, de
https://www.w3.org/WAI/standards-guidelines/wcag/
López J., J. W. (2018, junio 18). Accesibilidad en el campus virtual Uniminuto [Presencial].
Luján-Mora, S. (2008). Accesibilidad en la Web: De WCAG 1.0 a WCAG 2.0.
Luján-Mora, S. (2020). Accesibilidad Web: Diferencias WCAG 2.0—WCAG 2.1 (en inglés)
[Informativa]. Portal universitario. http://accesibilidadweb.dlsi.ua.es/?menu=diferencias-2.0-2.1-en
Mariño, S. I., Alfonzo, P. L., Giménez, I., & Godoy, M. V. (2014). La accesibilidad web como aspecto
de calidad en el desarrollo de software. Experiencia de un taller como espacio de actualización de
conocimientos.

NTC 6304, Pub. L. No. NTC 6304 (2018). https://www.mineducacion.gov.co/1759/w3-article-
390083.html?_noredirect=1
Observatorio de la accesibilidad. (s/f). Breve historia. Recuperado el 6 de febrero de 2020, de
https://observatoriodelaaccesibilidad.es/archivos/261
Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0. (s/f). Recuperado el 29 de febrero de
2020, de http://www.sidar.org/traducciones/wcag20/es/
Ruelas-Barajas, E. (2011). Calidad y accesibilidad. Gac Med Mex, 147(6), 510–513.
Sandoval, C. de los A. V., & Gómez, G. M. M. (2017). Accesibilidad en web para personas con
discapacidad visual. Síntesis Tecnológica, 2(1), 1–10.
Silva, Á., González-Bañales, D., Bermeo-Andrade, H., & García, C. D. (2010). Accesibilidad Web: Un
criterio clave para la integración de internet en la estrategia de negocio en empresas de servicios.
Análisis del caso del sector hotelero en el Tolima, Colombia. Revista Avances en Sistemas e
Informática, 7(2), 47–52.
Urgilés, C., Célleri-Pacheco, J., & Jorge, M.-C. (2017). Accesibilidad web: Un desafío para los
desarrolladores de América Latina. Conference Proceedings, 1(1).

Soy Jaime E. Cortés Fandiño
Profesor e Investigador sobre diseños web incluyentes
jcortes@uniminuto.edu
jcortesf@uniminuto.edu.co

Guía accesibilidad web

Recomendados

Recomendados

Más contenido relacionado

Similar a Guía accesibilidad web

Similar a Guía accesibilidad web (20)

Último

Último (20)

Guía accesibilidad web