Accesibilidad en los materiales educativos y divulgativos by José Adrián Gómez Montero

Accesibilidad en los materiales educativos y divulgativos

2014

¿Qué es accesibilidad? La accesibilidad de un producto o sitio web es deﬁnida como:

La accesibilidad es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas.

Importancia â&#x20AC;&#x153;Todos tenemos derecho a ser autĂłnomos en internet independientemente de la diversidad funcional y entorno de uso.â&#x20AC;? Olga Revilla.

Pautas de accesibilidad Son una serie de recomendaciones cuya función es guiar el diseño de páginas web hacia un diseño accesible, reduciendo de esta forma barreras a la información Accesible

Los principios Son 4 principios, no evaluables:

Perceptible

Comprensible

Operable

Robusto

Perceptible

Perceptible Pauta 1:

Alternativa textuales Se reﬁere a que los contenidos no textuales deben de tener una opción para convertir a formato textual Imagen

Alternativa textual La imagen muestra a una gárgola de piedra de la iglesia de Notre Dame en París. Se visualizan de perﬁl, y la parte superior de su cuerpo (medio cuerpo). Se observan sus dos alas, dos cachos y su ancha nariz. Además su cara tiene una expresión como de burla.

Perceptible 1. Alternativa textuales

Excepciones

No se debe dar una alternativa textual cuando:

Controles o mecanismo para que el usuario introduzca datos Pruebas o ejercicios que no serían válidos si se presentara en forma de texto

Inciar sesión: Nombre de usuario walshy Contraseña •••••••••••••••

¿Cuál es el valor aproximado del símbolo anterior? (A) 5,879... (B) 3,190833 (C) 3,1416... (D) Ninguna de las anteriores

Perceptible 1. Alternativa textuales Excepciones

Contenidos cuyo objetivo principal es ofrecer una experiencia sensorial especíﬁca Las CAPTCHAS u otro método de conﬁrmación

Contenido decorativo

¿Qué sienta al ver esta imagen?

Perceptible Pauta 2:

Alternativas a los medios tempodependientes Tempodependientes tanto grabados como en vivo. Estos pueden ser:

Video solo

Audio solo

Video y audio

Sonido y/o video con interacci贸n

Perceptible 2. Alternativas a los medios tempodependientes

Documento alternativo tempo dependiente, que presente la información que el audio da Documento alternativo tempo dependiente, que presente la información que las imágenes representan

Ponerle subtítulos al video. Agregar audio descriptivo de las imágenes que se ven

Perceptible 2. Alternativas a los medios tempodependientes

Los subtítulos

hay dos tipos:

Generales: que son los que acompañan los diálogos de los personajes Para sordos: incluyen información sobre los sonidos que suceden (murmullos, un texto que indica cuando alguien grita o está llorando). Estos sonidos contextualizan la escena

Perceptible 2. Alternativas a los medios tempodependientes

Sonido grabado en lengua de signos Son muy buenos para personas sordas, ya que tienen acceso a las imรกgenes, gestos y paisajes de manera simultรกnea con lo que se dice. Se recomienda que la posiciรณn del video de signos sea en la esquina inferior derecha o a la par del video.

Perceptible Pauta 3:

Adaptable Ofrecer diferentes presentaciones para un mismo contenido puede ayudar a las personas a seleccionar la que mรกs se adecue a las necesidades personales.

Perceptible 3. Adaptable

El contenido debe de ser accesible para diferentes dispositivos y los robots (motores de bĂşsqueda, traductores, por ejemplo).

Responsive design

Responsive design Responsive design

Perceptible Pauta 4:

Distinguible Separa el fondo del primer plano Las tipografĂas Use tipografĂas legibles, preferiblemente sin serifas

Sin serifas Arial Century Gothic

Con serifas Times New Roma Trajan Pro

Perceptible 4. Distinguible

Texto sobre las imágenes Cuando el texto se escribe sobre una imagen, debe ser incluso más grande de lo que sería si no tuviera la imagen de fondo (no menor a 14pts)

La playa, el mar azul

Perceptible 4. Distinguible

Uso de la negrita La utilización de la negrita para crear el contraste entre el fondo y el texto es un mecanismo efectivo. Incluso, si el texto está en negrita el tamaño de la letra podría ser menor y ser legible.

Texto en negrita (14 pts)

Texto light (18 pts)

Perceptible 4. Distinguible

Aumento del tama単o del texto Todo texto debe de poder aumentarse hasta un 200%

El texto (100%)

El texto (150%)

El texto (200%)

Perceptible 4. Distinguible

Orientaci贸n del texto La escritura y lectura, todos los textos se escriben de derecha a izquierda de arriba hacia abajo. 1

Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellus condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula, sodales non neque at, vehicula laoreet purus. Nunc vitae tellus aliquam, aliquet nunc dignissim, commodo dui. Proin pulvinar, lorem eu sollicitudin lacinia, ante dui aliquet odio, ut vehicula lorem lacus in erat. Integer sodales mauris sit amet est tempor, vel laoreet eros interdum.

Perceptible 4. Distinguible

JustiďŹ caciĂłn 1. Alineado a la izquierda Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellus condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula, sodales non neque at, vehicula laoreet purus. Nunc vitae tellus aliquam, aliquet nunc dignissim, commodo dui.

3. Alineado al centro

1. Alineado a la derecha Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellus condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula, sodales non neque at, vehicula laoreet purus. Nunc vitae tellus aliquam, aliquet nunc dignissim, commodo dui.

4. JustiďŹ cado

Praesent ac laoreet libero, vitae facilisis diam. Morbi

eleifend nunc quis tellus condimentum, a tempus

eleifend nunc quis tellus condimentum, a tempus lorem

lorem luctus. Donec mattis tortor aliquet, semper risus

luctus. Donec mattis tortor aliquet, semper risus et,

et, commodo velit. Suspendisse felis ligula, sodales

commodo velit. Suspendisse felis ligula, sodales non

non neque at, vehicula laoreet purus. Nunc vitae tellus

neque at, vehicula laoreet purus. Nunc vitae tellus

aliquam, aliquet nunc dignissim, commodo dui.

Perceptible 4. Distinguible

Ancho de las columnas Cuando las líneas son muy largas el lector tiende a confundir las líneas. Cada columna debería tener alrededor de 80 caracteres por línea. Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellu condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula, sodales non neque at, vehicula laoreet purus. Nunc vitae tellus aliquam, aliquet nunc dignissim, commodo dui. Proin pulvinar, lorem eu sollicitudin lacinia

Perceptible 4. Distinguible

Interlineado Las lĂneas dentro de un pĂĄrrafo deben de tener un interlineado de 1.5 o doble. El interlineado entre pĂĄrrafos debe de ser doble para que no hayan confusiones entre ideas

Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellu condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula, sodales non neque

Perceptible 4. Distinguible

Distinguir elementos en el texto Se deben de resaltar solo las palabras que son claves y desencadenan las demรกs ideas. No todas las ideas. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Perceptible 4. Distinguible

Uso de itรกlica y negrita Si todo el texto es en itรกlica o negrita el lector no notarรก el resalte en un determinado momento. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt

Perceptible 4. Distinguible

Uso del color Al igual que los ejemplos anteriores, mucho color, no destaca como deberĂa de hacerlo Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellus condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et, commodo velit. Suspendisse felis ligula.

Perceptible 4. Distinguible

Uso de las mayúsculas Resaltar párrafos completos con mayúscula no solo es un error gramatical, sino que la velocidad de lectura así como la legibilidad del texto se ven afectados. Praesent ac laoreet libero, vitae facilisis diam. Morbi eleifend nunc quis tellus condimentum, a tempus lorem luctus. Donec mattis tortor aliquet, semper risus et.

PRAESENT AC LAOREET LIBERO, VITAE FACILISIS DIAM. MORBI ELEIFEND NUNC QUIS TELLUS CONDIMENTUM, A TEMPUS LOREM LUCTUS. DONEC MATTIS TORTOR ALIQUET, SEMPER RISUS ET.

Perceptible 4. Distinguible

Estándares para los hipervínculos El formato es subrayado y en color así, tal y como se muestra en el siguiente ejemplo: http://www.w3.org/TR/WCAG20/

Las listas Las listas deberían de hacerse utilizando las viñetas que los procesadores de texto proporcionan • Perro • Gato • Conejo

1. Perro 2. Gato 3. Conejo

Perceptible 4. Distinguible

Contraste texto fondo Los colores que contrastan son aquellos que se encuentran en posiciones opuestas en el cĂrculo cromĂĄtico.

Perceptible 4. Distinguible

Los botones Los enlaces y controles se debe de destacar cuando reciben el foco del teclado o del mouse

botón

botón estático

botón presionado

botón botón activo

Perceptible 4. Distinguible

Zoom a las imágenes Las imágenes y elementos multimedia deberían de tener un mecanismo programado que permita el aumento de su dimensión, sin que pierdan calidad

Perceptible 4. Distinguible

Combinaci贸n de audios La m煤sica de fondo debe de escucharse 20 decibeles 贸 4 veces menos que la voz

Operable

Operable Pauta 1:

Manejo del teclado Se fomenta a que todos los comandos se puedan manejar por teclado, tambiĂŠn se alienta a que los comandos se puedan manejar por voz

Operable Pauta 2:

Da tiempo suﬁciente El tiempo de lectura y análisis de un contenido depende de cada usuario, por lo que limitarlo, podría causar que el usuario no comprenda bien la información

Operable 2. Da tiempo suﬁciente

Si el contenido requiere limite de tiempo se debe de considerar habilitar:

Un control que elimine el límite de tiempo Advertencia que indique al usuario que su tiempo se está agotando Un control para aumentar el limite de tiempo Un mecanismo que permita pausar el tiempo y luego continuar Notiﬁcaciones del tiempo restante para el usuario

Operable 2. Da tiempo suﬁciente

Las advertencias

El usuario tendrá control sobre las advertencias

No podrá bloquear aquellas que indican emergencia

Operable Pauta 3:

Tenga cuidado con los destellos

Si un contenido virtual tiene una animaci贸n en forma de destello, esta podr铆a causar convulsiones, espamos o ataques al usuario

Operable 3. Tenga cuidado con los destellos

Si es necesario el uso de destellos y parpadeos se debe considerar:

Que no destellen más de 3 veces por segundo Que no ocupen un espacio mayor a 21px cuadrados Que el contraste de los elementos sea el mínimo Evitar la utilización del color rojo Que se ofrezca un mecanismo que lo apague o detenga

Operable

Pauta 4:

Céntrese en la arquitectura de la información para que sea fácilmente navegable

Operable 4. Céntrese en la arquitectura de la información

Recomendaciones Dosiﬁcar la información Limitar el número de enlaces por página Ofrecer un mecanismo reconocible para navegar Evitar repetir bloques de contenido Ofrecer un mecanismo para ir al inicio y al ﬁnal del contenido de forma rápida.

Operable 4. Céntrese en la arquitectura de la información

Recomendaciones El usuario debe conocer donde está y hacia donde puede ir Nombre de la página La evolución de la Administración de Proyectos en la historia

Nombre de la unidad Introducción a la APP

Operable 4. Céntrese en la arquitectura de la información

Recomendaciones Habilitar un buscador podría ayudar al usuario a encontrar los contenidos más fácilmente

Buscar

Operable 4. Céntrese en la arquitectura de la información

Recomendaciones Otro sistema útil que se puede proporcionar para páginas Web son los “breadcrumbs” o camino de migajas de pan, que es todo el recorrido del usuario Primer nivel

Dropbox

Segundo nivel

TEC Digital

Tercer nivel

Recursos

Ubicación

Iconos

Operable 4. Céntrese en la arquitectura de la información

Recomendaciones Si el contenido es muy extenso, es una buena opción ofrecer resumen acompañado un enlace de “leer más” o “ampliar”

Lorem ipsum dolor sit amet, eu massa, libero ut suspendisse tincidunt. Quisque interdum at magnis, donec arcu, in quam tincidunt, pellentesque imperdiet. Enim libero nullam dolor molestie in, sit faucibus mattis, tellus taciti donec neque praesent sit accumsan, nec suspendisse bibendum nibh, elit ut. Sed nisl velit ante, odio libero tellus id blandit arcu laoreet, sit vivamus mi habitasse aptent fringilla auctor, libero ligula euismod pharetra urna neque dictum. Leer más...

Comprensible

Comprensible Pauta 1:

Fรกcil de leer y comprender

El contenido debe de ser lo mรกs entendible para la diversidad de usuarios, de lo contrario, el usuario no tendrรก problemas en desechar la aplicaciรณn, objeto de aprendizaje, o cualquiera que sea su elemento Web.

Comprensible 1. FĂĄcil de leer y comprender

Recomendaciones No decore Utilice las alineaciones a la izquierda o derecha Utilice el lenguaje apropiado para el contenido Ofrecer un glosario con deďŹ niciones poco comunes Utilizar varias tĂŠcnicas para explicar un mismo contenido

Comprensible Pauta 2:

Hรกgala predecible, no reinvente los estรกndares de navegaciรณn Recomendaciones La funciรณn de los botones que cambien la pรกgina o el contenido, debe realizarse al dar clic y no con un rollover.

Comprensible Pauta 3:

Ayude en la introducción de datos Recomendaciones Anunciar el posible error (nota textual) Identiﬁcar los espacios vacíos

Nombre Nombre

Apellido

No puede dejar este campo en blanco

Elige tu nombre de usuario @gmail.com No puede dejar este campo en blanco

Comprensible 3. Ayude en la introducción de datos

Recomendaciones

Identiﬁque cuales casillas son indispensables u obligatoria

Generalidades de la encuesta ¿Para cuál sede trabaja? * Sede Central Cartago * Espacio obligatorio

Comprensible 3. Ayude en la introducción de datos

Recomendaciones Anuncie cuando alguna casilla requiere de una información especial Nombre Nombre

Apellido

Elige tu nombre de usuario

Seguridad de contraseña Usa al menos ocho caracteres. No uses la contraseña de otro sitio ni una demasiado obvia, como el nombre de tu mascota.

user11 Usa entre 6 y 30 caracteres

Crea una contraseña

@gmail.com

Comprensible 3. Ayude en la introducción de datos

Recomendaciones Informe sobre el estado, para alcanzar el punto deseado o recomendado de las casillas que requieren información especial Nombre Nombre

Seguridad de contraseña Demasiado corta

Elige tu nombre de usuario user11 Usa entre 6 y 30 caracteres

Usa al menos ocho caracteres. No uses la contraseña de otro sitio ni una demasiado obvia, como el nombre de tu mascota.

Apellido

Crea una contraseña

@gmail.com

Comprensible 3. Ayude en la introducción de datos

Recomendaciones Si va a haber una acción irreversible, notiﬁque al usuario. Para las casillas que el usuario debe de introducir números (tal como el teléfono), se recomienda que se haga una separación cada cuatro dígitos Teléfono ejemplo: 4444 - 4444

Comprensible 3. Ayude en la introducción de datos

Recomendaciones Coloque los caracteres que indudablemente el usuario tendrá que ingresar. Por ejemplo: E-mail @

ejemplo: email@gmail.com

Colocar ejemplos también ayuda a que el usuario sepa que se le está solicitando.

Robusto

Es el principio que depende mĂĄs de la tecnologĂa, ya que su enfoque se centra en como interpretan los contenidos los diferentes programas que muestran contenido en internet

Robusto Pauta 1:

Compatible

Tiene que ver con la optimizaci贸n del c贸digo para que todos los programas comprendan la informaci贸n tal y como deseamos