consejos de accesibilidad para diseñadores web · la norma nte inen-iso/iec 40500 se organiza en 4...
TRANSCRIPT
Consejos de accesibilidad para diseñadores web
Sergio Luján Mora
@sergiolujanmora
Versión 1.0 (01/03/2015)
Contenido
Resumen ....................................................................................................................................................... 2
Pautas ........................................................................................................................................................... 5
Principio 1: Perceptible - La información y los componentes de la interfaz de usuario deben ser
presentados a los usuarios de modo que ellos puedan percibirlos. ........................................................ 5
Pauta 1.2 Medios tempodependientes: Proporcionar alternativas para los medios
tempodependientes. ............................................................................................................................ 5
Pauta 1.3 Adaptable: Crear contenido que pueda presentarse de diferentes formas (por ejemplo,
con una disposición más simple) sin perder información o estructura. ............................................... 6
Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre
el primer plano y el fondo. ................................................................................................................... 7
Principio 2: Operable - Los componentes de la interfaz de usuario y la navegación deben ser
operables. ................................................................................................................................................. 8
Pauta 2.2 Tiempo suficiente: Proporcionar a los usuarios el tiempo suficiente para leer y usar el
contenido. ............................................................................................................................................ 8
Pauta 2.3 Convulsiones: No diseñar contenido de un modo que se sepa podría provocar ataques,
espasmos o convulsiones. .................................................................................................................... 9
Pauta 2.4 Navegable: Proporcionar medios para ayudar a los usuarios a navegar, encontrar
contenido y determinar dónde se encuentran. .................................................................................... 9
Principio 3: Comprensible - La información y el manejo de la interfaz de usuario deben ser
comprensibles. ....................................................................................................................................... 10
Pauta 3.2 Predecible: Hacer que las páginas web aparezcan y operen de manera predecible. ........ 10
Referencias ................................................................................................................................................. 11
Resumen
Este documento recoge los criterios de conformidad de la Norma Técnica Ecuatoriana NTE INEN-ISO/IEC
40500 que se deben tener en cuenta durante la fase de diseño de un sitio web. Estos criterios se deben
tener en cuenta antes de la codificación de una página web, durante su diseño visual mediante la
creación de prototipos visuales (mockups).
Los problemas de accesibilidad que pueden surgir en la fase de diseño afectan principalmente a las
personas con problemas de visión (ceguera, baja visión), ya que son los problemas asociados a la
percepción visual de la página web.
La Norma NTE INEN-ISO/IEC 40500 se organiza en 4 principios que proporcionan los fundamentos de la
accesibilidad web:
1. Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados
a los usuarios de modo que ellos puedan percibirlos.
2. Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables.
3. Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles.
4. 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.
Estos 4 principios se componen de 12 pautas que a su vez se componen de 61 criterios de conformidad
que son verificables. Los criterios se organizan en tres niveles de conformidad: A (el más bajo), AA y AAA
(el más alto). Excepto en algún caso particular, en este documento sólo se han tenido en cuenta los
criterios de conformidad A y AA ya que normalmente no se suele exigir alcanzar el nivel AAA.
El siguiente gráfico resume la organización de la Norma Técnica Ecuatoriana NTE INEN-ISO/IEC 40500:
En la siguiente tabla se resumen los 61 criterios de conformidad con su nivel de conformidad. Se han
resaltado los criterios que se deben tener en cuenta durante la fase de diseño de una página web.
Principio 1: Perceptible A AA AAA
1.1.1 Contenido no textual X
1.2.1 Sólo audio y sólo vídeo (grabado) X
1.2.2 Subtítulos (grabados) X
1.2.3 Audiodescripción o Medio Alternativo (grabado) X
1.2.4 Subtítulos (en directo) X
1.2.5 Audiodescripción (grabado) X
1.2.6 Lengua de señas (grabado X
1.2.7 Audiodescripción ampliada (grabada) X
1.2.8 Medio alternativo (grabado) X
1.2.9 Sólo audio (en directo) X
1.3.1 Información y relaciones X
1.3.2 Secuencia significativa X
1.3.3 Características sensoriales X
1.4.1 Uso del color X
1.4.2 Control del audio X
1.4.3 Contraste (mínimo) X
1.4.4 Cambio de tamaño del texto X
1.4.5 Imágenes de texto X
1.4.6 Contraste (mejorado) X
1.4.7 Sonido de fondo bajo o ausente X
1.4.8 Presentación visual X
1.4.9 Imágenes de texto (sin excepciones) X
TOTAL 9 5 8
Principio 2: Operable A AA AAA
2.1.1 Teclado X
2.1.2 Sin trampas para el foco del teclado X
2.1.3 Teclado (sin excepciones) X
2.2.1 Tiempo adjustable X
2.2.2 Poner en pausa, detener, ocultar X
2.2.3 Sin tiempo X
2.2.4 Interrupciones X
2.2.5 Re-autentificación X
2.3.1 Umbral de tres destellos o menos X
2.3.2 Tres destellos X
2.4.1 Evitar bloques X
2.4.2 Titulado de páginas X
2.4.3 Orden del foco X
2.4.4 Propósito de los enlaces (en contexto) X
2.4.5 Múltiples vías X
2.4.6 Encabezados y etiquetas X
2.4.7 Foco visible X
2.4.8 Ubicación X
2.4.9 Propósito de los enlaces (sólo enlaces) X
2.4.10 Encabezados de sección X
TOTAL 9 3 8
Principio 3: Comprensible A AA AAA
3.1.1 Idioma de la página X
3.1.2 Idioma de las partes X
3.1.3 Palabras inusuales X
3.1.4 Abreviaturas X
3.1.5 Nivel de lectura X
3.1.6 Pronunciación X
3.2.1 Al recibir el foco X
3.2.2 Al recibir entradas X
3.2.3 Navegación coherente X
3.2.4 Identificación coherente X
3.2.5 Cambios a petición X
3.3.1 Identificación de errors X
3.3.2 Etiquetas o instrucciones X
3.3.3 Sugerencias ante errors X
3.3.4 Prevención de errores (legales, financieros, datos) X
3.3.5 Ayuda: Se proporciona ayuda dependiente del contexto X
3.3.6 Prevención de errores (todos) X
TOTAL 5 5 7
Principio 4: Robusto A AA AAA
4.1.1 Procesamiento X
4.1.2 Nombre, función, valor X
TOTAL 2 0 0
TOTAL 4 PRINCIPIOS 25 13 23
Pautas
Principio 1: Perceptible - La información y los componentes de la interfaz
de usuario deben ser presentados a los usuarios de modo que ellos puedan
percibirlos.
Pauta 1.2 Medios tempodependientes: Proporcionar alternativas para los medios tempodependientes.
1.2.1 Sólo audio y sólo vídeo (grabado): Para contenido sólo audio grabado y contenido sólo vídeo
grabado se proporciona una alternativa que presenta información equivalente al contenido, excepto
cuando el audio o el vídeo es un contenido multimedia alternativo al texto y está claramente
identificado como tal. (Nivel A)
Para el audio (por ejemplo, un podcast) o para el vídeo (por ejemplo, un vídeo) se debe proporcionar
una transcripción textual que incluya toda la información importante que se transmite a través del audio
del vídeo.
Para el vídeo se debe proporcionar subtítulos sincronizados, es decir subtítulos que se muestran al
mismo ritmo que lo que se dice. Por ejemplo, en la siguiente imagen se muestra un vídeo
(http://youtu.be/bVqfcEP7zQs) alojado en YouTube que posee subtítulos y una transcripción completa
que está sincronizada con el vídeo:
Figura 1: Vídeo en YouTube
Por tanto, en el diseño de una página web se debe contemplar la existencia de la
transcripción asociada a todo contenido de sólo audio o vídeo. Por ejemplo, si
se incluye un vídeo en una página web, debe existir la transcripción asociada en
la misma página web o un enlace a otra página que contenga la transcripción.
1.2.3 Audiodescripción o Medio Alternativo (grabado): Se proporciona una alternativa para los medios
tempodependientes o una audiodescripción para el contenido de vídeo grabado en los multimedia
sincronizados, excepto cuando ese contenido es un contenido multimedia alternativo al texto y está
claramente identificado como tal. (Nivel A)
Para el vídeo grabado se proporciona una transcripción textual o una audiodescripción que describe el
vídeo.
Una audiodescripción, también llamada videodescripción, es un sistema de apoyo a la comunicación que
tiene como objetivo compensar la carencia de captación de la parte visual contenida en cualquier tipo
de mensaje, suministrando una adecuada información sonora que la traduce o explica, de manera que el
posible receptor discapacitado visual perciba dicho mensaje de la forma más parecida a como lo percibe
una persona que ve. Su finalidad es proporcionar información sobre la situación espacial, gestos,
actitudes, paisajes, vestuario, etc., de lo que se ve. La audiodescripción debe aportar los datos
necesarios para que una obra audiovisual se comprenda lo más perfectamente posible.
Por tanto, en el diseño de una página web se debe contemplar la existencia de la
audiodescripción asociada a todo contenido de multimedia o de vídeo. Por
ejemplo, si se incluye un vídeo en una página web, debe existir la
audiodescripción asociada en la misma página web o un enlace a otra página
que contenga la audiodescripción.
1.2.5 Audiodescripción (grabado): Se proporciona una audiodescripción para todo el contenido de
vídeo grabado dentro de contenido multimedia sincronizado. (Nivel AA)
Para el vídeo grabado se proporciona una audiodescripción si el contenido transmite información visual
importante que no se transmite a través del audio del vídeo.
Igual que el criterio de conformidad 1.2.3.
Pauta 1.3 Adaptable: Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.
1.3.2 Secuencia significativa: Cuando la secuencia en que se presenta el contenido afecta a su
significado, se puede determinar por software la secuencia correcta de lectura. (Nivel A)
El orden de lectura y navegación por la página web es lógico e intuitivo. El orden de lectura se debe
corresponder con el orden visual. Por ejemplo, el orden de navegación por los enlaces de una página
web y los controles de un formulario se puede establecer con el atributo tabindex.
Lo mejor es que la disposición del contenido en una página web se corresponda
con el orden que el contenido tendrá en el código HTML, es decir, el orden
normal de lectura de izquierda a derecha y de arriba abajo. Si se modifica este
orden se debe emplear tabindex para indicar el orden correcto.
Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.
1.4.1 Uso del color: El color no se usa como único medio visual para transmitir la información, indicar
una acción, solicitar una respuesta o distinguir un elemento visual. (Nivel A)
El color es un factor importante en el diseño visual de una página. Se pueden usar los colores, pero se
debe evitar transmitir información sólo a través del color. Por ejemplo, si en un formulario se emplea el
color rojo para indicar los controles que es obligatorio completar se debe transmitir esa misma
información mediante un mecanismo alternativo, ya que las personas ciegas no pueden ver los colores.
Si se usa el color para transmitir información se debe emplear alguna
alternativa textual para transmitir la misma información.
1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de
contraste de, al menos, 4.5:1 para el texto normal y 3:1 para el texto grande. (Nivel AA)
Se diferencian dos umbrales de contraste según el tamaño del texto. Se considera texto grande al que
tiene como mínimo un tamaño de 18 puntos o 14 puntos y está en negrita. Hay que tener mucho
cuidado con los degradados y las escalas de grises.
Para calcular el contraste entre dos colores se puede emplear alguna herramienta como WebAim Color
Contrast Checker (http://webaim.org/resources/contrastchecker/).
Los colores que se emplean para el texto (color del texto y color del fondo del
texto) deben tener el suficiente contraste para que lo puedan leer todas las
personas.
1.4.4 Cambio de tamaño del texto: A excepción de los subtítulos y las imágenes de texto, todo el texto
puede ser ajustado sin ayudas técnicas hasta un 200 por ciento sin que se pierdan el contenido o la
funcionalidad. (Nivel AA)
Los navegadores web actuales ofrecen una opción para aumentar el tamaño de una página.
Si se realiza un correcto diseño adaptable (responsive design) este problema
está totalmente resuelto, ya que aumentar el tamaño de una página web (“hacer
zoom”) equivale a visualizar la página web en un dispositivo con una pantalla
pequeña.
1.4.5 Imágenes de texto: Si con las tecnologías que se están utilizando se puede conseguir la
presentación visual deseada, se utiliza texto para transmitir la información en vez de imágenes de
texto. (Nivel AA)
El texto en imágenes origina varios problemas de accesibilidad. Por ejemplo, para las personas con baja
visión supone un problema porque al aumentarse el tamaño de página (“hacer zoom”) el texto puede
aparecer pixelado ya que no es texto sino una imagen.
Además, el texto real se carga antes que el texto en imágenes, la página web es más fácil de mantener,
ayuda al posicionamiento e incluso se puede traducir a otros idiomas con herramientas como Google
Translator.
Se debe evitar usar texto en imágenes. Si se necesita utilizar un tipo de letra
concreto se puede emplear un servicio como Google Fonts
(http://www.google.com/fonts/) y @font-face para transmitir al usuario el
tipo de letra necesario.
1.4.8 Presentación visual: En la presentación visual de bloques de texto, se proporciona algún
mecanismo para lograr lo siguiente: (Nivel AAA)
1. Los colores de fondo y primer plano pueden ser elegidos por el usuario.
2. El ancho no es mayor de 80 caracteres o signos (40 si es CJK).
3. El texto no está justificado (alineado a los márgenes izquierdo y derecho a la vez).
4. El espacio entre líneas (interlineado) es de, al menos, un espacio y medio dentro de los
párrafos y el espacio entre párrafos es, al menos, 1.5 veces mayor que el espacio entre líneas.
5. El texto se ajusta sin ayudas técnicas hasta un 200 por ciento de modo tal que no requiere un
desplazamiento horizontal para leer una línea de texto en una ventana a pantalla completa.
El problema 1 se resuelve ofreciendo hojas de estilo alternativo de alto
contraste.
El problema 3 se resuelve evitando el uso de text-align: justify en CSS.
Si se realiza un correcto diseño adaptable (responsive design), los problemas 2,
4 y 5 están totalmente resueltos, ya que aumentar el tamaño de una página web
(“hacer zoom”) equivale a visualizar la página web en un dispositivo con una
pantalla pequeña.
Principio 2: Operable - Los componentes de la interfaz de usuario y la
navegación deben ser operables.
Pauta 2.2 Tiempo suficiente: Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.
2.2.2 Poner en pausa, detener, ocultar: Para la información que tiene movimiento, parpadeo, se
desplaza o se actualiza automáticamente, se cumplen todos los casos siguientes: (Nivel A)
1. Movimiento, parpadeo, desplazamiento: Para toda información que se mueve, parpadea o se
desplaza, que (1) comienza automáticamente, (2) dura más de cinco segundos y (3) se
presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda
poner en pausa, detener u ocultar, a menos que el movimiento, parpadeo o desplazamiento
sea parte esencial de una actividad; y
2. Actualización automática: Para toda información que se actualiza automáticamente, que (1)
se inicia automáticamente y (2) se presenta en paralelo con otro contenido, existe un
mecanismo para que el usuario la pueda poner en pausa, detener u ocultar, o controlar la
frecuencia de actualización a menos que la actualización automática sea parte esencial de
una actividad.
En el interfaz de usuario se deben proporcionar mecanismos para controlar los
elementos multimedia o los elementos en movimiento como animaciones,
vídeos o carruseles (sliders) de imágenes.
Pauta 2.3 Convulsiones: No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.
2.3.1 Umbral de tres destellos o menos: Las páginas web no contienen nada que destelle más de tres
veces en un segundo, o el destello está por debajo del umbral de destello general y de destello rojo.
(Nivel A)
Ningún contenido de la página parpadea más de tres veces por segundo, a menos que el contenido sea
muy pequeño y los parpadeos tengan un contraste bajo o no contengan mucho rojo.
Se debe evitar el contenido que parpadea. Si hay contenido que parpadea, su
frecuencia no debe ser superior a 3 Hz.
Pauta 2.4 Navegable: Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.
2.4.3 Orden del foco: Si se puede navegar secuencialmente por una página web y la secuencia de
navegación afecta su significado o su operación, los componentes que pueden recibir el foco lo hacen
en un orden que preserva su significado y operabilidad. (Nivel A)
El orden de navegación por los elementos de una página (enlaces, controles de formulario) es lógico e
intuitivo.
Relacionado con 1.3.2.
2.4.4 Propósito de los enlaces (en contexto): El propósito de cada enlace puede ser determinado con
sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por
software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general.
(Nivel A)
Los usuarios ciegos navegan a través de la lista de enlaces de una página web. Por ello los enlaces deben
ser significativos por ellos mismos, fuera de contexto.
El texto del enlace debe indicar claramente su propósito. Se deben evitar los
enlaces del tipo “Leer más”, “Noticia completa”, “Pulsa aquí” o “Más
información” repetidos varias veces en una misma página web. Se pueden
emplear esos enlaces pero se debe ampliar su contenido con texto oculto.
2.4.7 Foco visible: Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la
cual el indicador del foco del teclado resulta visible. (Nivel AA)
Algunos usuarios, como las personas con movilidad reducida, utilizan el teclado para interactuar con una
página web. Para desplazarse de un enlace a otro enlace o entre los controles de un formulario emplean
la tecla tabulador.
Cuando un elemento del interfaz de usuario, como por ejemplo un enlace o un
control de un formulario, recibe el foco debe destacar claramente para que el
usuario perciba donde está el foco.
2.4.8 Ubicación: Se proporciona información acerca de la ubicación del usuario dentro de un conjunto
de páginas web. (Nivel AAA)
Algunos usuarios con problemas cognitivos como falta de atención o problemas con la memoria a corto
plazo se pueden sentir perdidos al navegar entre las páginas de un sitio web.
Se proporciona un mecanismo para indicar la posición de la página actual en el
sitio web, como por ejemplo, migas de pan o “paso X de Y”.
Principio 3: Comprensible - La información y el manejo de la interfaz de
usuario deben ser comprensibles.
Pauta 3.2 Predecible: Hacer que las páginas web aparezcan y operen de manera predecible.
3.2.3 Navegación coherente: Los mecanismos de navegación que se repiten en múltiples páginas web
dentro de un conjunto de páginas web aparecen siempre en el mismo orden relativo cada vez que se
repiten, a menos que el cambio sea provocado por el propio usuario. (Nivel AA)
Algunos usuarios con baja visión que emplean un magnificador de pantalla pueden tener problemas si el
diseño de un sitio web no se mantiene constante entre diferentes páginas web.
Los enlaces y otros elementos de navegación que se repiten entre diferentes
páginas de un mismo sitio web no cambian de posición y orden cuando se
navega entre las páginas.
3.2.4 Identificación coherente: Los componentes que tienen la misma funcionalidad dentro de un
conjunto de páginas web son identificados de manera coherente. (Nivel AA)
Algunos usuarios, como los usuarios ciegos o con baja visión, esperan encontrar los mismos elementos
con la misma función en la misma posición de las páginas web que componen un sitio web.
Los enlaces y otros elementos de navegación que se repiten entre diferentes
páginas de un mismo sitio web no cambian de posición y orden cuando se
navega entre las páginas.
Otros consejos
Los siguientes consejos no están recogidos explícitamente en la Norma NTE INEN-ISO/IEC 40500:
Se debe separar totalmente la estructura y contenido (HTML) de la presentación (CSS).
El contenido y la función de la página web debe ser utilizable en ausencia de la presentación
(CSS).
El contenido y la función de la página web debe primar sobre el diseño. Se debe evitar todo
aquello que dificulte el entendimiento, la legibilidad y el uso de la página web.
Todo un texto en mayúsculas (por ejemplo, un párrafo) es difícil de leer y puede producir que
sea leído de forma incorrecta por un lector de pantallas.
Un tamaño de letra pequeño es un problema para la mayoría de usuarios, con o sin
discapacidad. El tamaño mínimo no debe ser inferior a 12 puntos.
Los enlaces deben ser claramente distinguibles: es mejor que los enlaces conserven el
subrayado para que se identifiquen claramente. Si no se usa el subrayado o algún otro
elemento como una marca, entonces el color del enlace debe tener el suficiente contraste
(criterio de conformidad 1.4.3) respecto al color de fondo y respecto al color del texto que
rodea al enlace.
Al principio de la página se debe incluir un enlace “Saltar al contenido principal” para facilitar la
navegación a los usuarios que emplean el teclado.
Los controles de un formulario deben tener etiquetas asociadas significativas.
Se tiene que evitar:
o El texto sobre imágenes o degradados de color.
o El texto en cursiva.
o Los tipos de letra estrechos (narrow o condensed).
o Los tipos de letra complicados.
Se tiene que dejar un margen suficiente entre los elementos de la página para que sean
claramente distinguibles y fáciles de leer.
Referencias
Web Accessibility for Designers: http://webaim.org/resources/designers/
Effective Color Contrast: http://www.lighthouse.org/accessibility/design/accessible-print-
design/effective-color-contrast/
Making Text Legible: http://www.lighthouse.org/accessibility/design/accessible-print-
design/making-text-legible/
A complete guide to web accessibility for designers:
http://www.accessiq.org/create/content/a-complete-guide-to-web-accessibility-for-designers