WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos.

WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos Nota: Los iconos utilizados tienen Licencia Creative Commons Attribution 2.0 (http://icons.anatom5.de, http://www.natko.de)http://icons.anatom5.dehttp://www.natko.de Autor: Adelaida Delgado --- URL: http://servidorti.uib.es/adelaida/accesibilidad/WCAG20.ppthttp://servidorti.uib.es/adelaida/accesibilidad/WCAG20.ppt

WCAG 2.0. Bibliografía* W3C. Web Content Accessibility Guidelines (WCAG) 2.0 [HTML]. Ben Caldwell, Michael Cooper, Loretta Guarino Reid, Gregg Vanderheiden. W3C (MIT, ERCIM, Keio): W3C, 11 de diciembre de 2008, [Consulta: noviembre de 2009]. Recomendación W3C. Disponible en:.http://www.w3.org/TR/WCAG/ W3C. Understanding WCAG 2.0 [HTML]. Ben Caldwell, Michael Cooper, Loretta Guarino Reid, Gregg Vanderheiden. W3C (MIT, ERCIM, Keio): W3C, 11 de diciembre de 2008, [Consulta: noviembre de 2009]. Nota del Grupo de Trabajo del W3C. Disponible en:.http://www.w3.org/TR/UNDERSTANDING-WCAG20/ W3C. Techniques for WCAG 2.0 [HTML]. Ben Caldwell, Michael Cooper, Loretta Guarino Reid, Gregg Vanderheiden. W3C (MIT, ERCIM, Keio): W3C, 11 de diciembre de 2008, [Consulta: noviembre de 2009]. Nota del Grupo de Trabajo del W3C. Disponible en:.http://www.w3.org/TR/WCAG20-TECHS/ W3C. How to Meet WCAG 2.0 [HTML]. Gregg Vanderheiden, Loretta Guarino Reid, Ben Caldwell, Shawn Lawton Henry. W3C (MIT, ERCIM, Keio): W3C, 1 de diciembre de 2008, [Consulta: noviembre de 2009]. Referencia rápida de los requisitos de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0. Disponible en:.http://www.w3.org/WAI/WCAG20/quickref/ Documentación del curso [W20.FC02] - Accesibilidad Web WCAG 2.0 impartido por Andrés Berdasco de la Fundación CTIC *Estas diapositivas están elaboradas a partir de tal documentación elaborada por el W3C, la cual está sujeta a Copyright ©2008 W3C y de la elaborada por el CTIC, también sujeta a Copyright © 2010 Fundación CTIC

WCAG 2.0  Principio 1: Perceptible  Principio 2: Operable  Principio 3: Comprensible  Principio 4: Robusto

 Pauta 1.1: Alternativas textuales  Pauta 1.2: Medios Tempodependientes  Pauta 1.3: Adaptable  Pauta 1.4: Distinguible Principio 1: Perceptible

Pauta 1.1: Alternativas textuales Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple

Pauta 1.1: Alternativas textuales Criterio de conformidad 1.1.1: Contenido no textual Criterio de conformidad 1.1.1: Contenido no textual A 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:  Controles, Entrada de datos  Contenido multimedia tempodependiente  Pruebas  Sensorial  CAPTCHA  Decoración, Formato, Invisible 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:  Controles, Entrada de datos  Contenido multimedia tempodependiente  Pruebas  Sensorial  CAPTCHA  Decoración, Formato, Invisible Beneficiarios: Objetivo: Hacer que la información transmitida mediante contenido no textual sea accesible a través de alternativas textuales

1.1.1.Contenido no textual ALTERNATIVA TEXTUAL CORTA Proporcionar una alternativa textual corta para el contenido no textual que cumpla la misma función y presente la misma información que el contenido textual  Usar el atributo alt en los elementos  Usar una alternativa textual en una imagen perteneciente a un grupo de imágenes de forma que describa a todo el grupo  Si una imagen funciona como enlace, describir su propósito  Combinar imágenes y enlaces contiguos al mismo recurso A

1.1.1.Contenido no textual  Usar el atributo alt de las imágenes usadas como botones de envío de formularios ( de tipo “image”)  Proporcionar alternativas textuales para las zonas activas de los mapas de imagen  Proporcionar alternativas textuales para ASCII art, emoticones y “leetspeak”  Usar el cuerpo del elemento  Proporcionar alternativas textuales para los elementos A

1.1.1.Contenido no textual ALTERNATIVA TEXTUAL LARGA Proporcionar una descripción larga para el contenido no textual que cumpla la misma función y presente la misma información usando alguna técnica específica para descripciones largas  Usar el atributo longdesc del elemento  Usar el cuerpo del elemento Proporcionar una descripción larga cerca del contenido no textual, incluyendo una referencia a su ubicación en la descripción corta Proporcionar una descripción larga en otra ubicación incluyendo un enlace a la misma junto al contenido no textual A

CONTROLES DE FORMULARIO Proporcionar una alternativa textual que identifique el propósito del contenido no textual Usar elementos para asociar las etiquetas con los controles de formulario Usar el atributo title para identificar los controles de formulario cuando no se pueda usar el elemento A 1.1.1.Contenido no textual

MULTIMEDIA, TEST O CONTENIDO SENSORIAL Proporcionar una etiqueta descriptiva usando alguna técnica de descripción corta vista anteriormente Proporcionar una alternativa textual corta para el contenido no textual con el nombre aceptado o un nombre descriptivo Proporcionar una etiqueta descriptiva que describa el propósito del contenido que es “sólo audio” y “sólo vídeo” en directo usando alguna de las técnicas para alternativas textuales cortas A 1.1.1.Contenido no textual

CAPTCHAs Proporcionar una alternativa textual que describa el propósito del CAPTCHA y asegurar que la página web contiene otro CAPTCHA con el mismo propósito pero en una modalidad sensorial diferente A 1.1.1.Contenido no textual

CONTENIDO DECORATIVO Marcar el contenido no textual de forma que sea ignorado por los productos de apoyo usando alguna de las siguientes técnicas:  Usar el texto alternativo vacío y no usar el atributo title de los elementos para aquellas imágenes que deban ser ignoradas por los productos de apoyo (imágenes decorativas)  Usar CSS para incluir las imágenes decorativas A 1.1.1.Contenido no textual

Pauta 1.2: Medios Tempodependientes Proporcionar alternativas para los medios tempodependientes

Para contenido sólo audio grabado y contenido sólo vídeo grabado, se cumple lo siguiente, excepto cuando el audio o 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 tempo-dependientes que presenta información equivalente para el contenido sólo audio grabado  Sólo vídeo grabado: Se proporciona una alternativa para los medios tempo-dependientes o se proporciona una pista sonora que presente información equivalente al contenido del medio de 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 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 tempo-dependientes que presenta información equivalente para el contenido sólo audio grabado  Sólo vídeo grabado: Se proporciona una alternativa para los medios tempo-dependientes o se proporciona una pista sonora que presente información equivalente al contenido del medio de sólo vídeo grabado Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.1: Sólo audio y sólo vídeo (grabado) Criterio de conformidad 1.2.1: Sólo audio y sólo vídeo (grabado) A Objetivo: Permitir a personas con discapacidades auditivas ver la presentación multimedia original sin perder información Beneficiarios:

1.2.1. Sólo audio y sólo vídeo (grabado) TRANSCRIPCIÓN TEXTUAL Transcripción textual para el contenido que es sólo audio  Incluir los diálogos y sonidos más significativos (risas, aplausos, música, etc.)  Identificar a cada hablante en los diálogos Transcripción textual para el contenido que es sólo vídeo  Incluir descripciones de todo el contenido visual importante (acciones, personas, expresiones corporales, escenarios, texto en pantalla, etc. A

Se proporcionan subtítulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentación es un contenido multimedia alternativo al texto y está claramente indicado como tal. Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.2: Subtítulos (grabados) Criterio de conformidad 1.2.2: Subtítulos (grabados) A Beneficiarios: Objetivo: Permitir a personas con discapacidades auditivas ver la presentación multimedia original sin perder información

1.2.2. Subtítulos (grabados) SUBTITULADO PARA SORDOS (CAPTIONING) Incluyen todos los contenidos sonoros, tanto los diálogos como los sonidos ambientales y todo sonido significativo necesario para comprender el contenido multimedia  Si el contenido multimedia tiene varias pistas de audio en diferentes idiomas deberíamos proporcionar subtítulos para todos los idiomas usados Tipos de subtítulos  Abiertos: Son aquellos que no se pueden desactivar y están disponibles para todo el mundo, generalmente incrustados en el propio vídeo  Cerrados: Se pueden activar y desactivar. Diferentes tecnologías (SMIL 1.0, SMIL 2.0) A

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. Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.3: Audiodescripción o Medio Alternativo (grabado) Criterio de conformidad 1.2.3: Audiodescripción o Medio Alternativo (grabado) A Beneficiarios: Objetivo: Permitir a personas con discapacidades visuales acceder a la presentación multimedia sin perder información o, al menos dispongan de una transcripción textual completa.

1.2.3. Audiodescripción o Medio Alternativo (grabado) AUDIODESCRIPCIÓN Narración con información sobre los elementos visuales clave de la presentación multimedia (acciones, escenarios, lenguaje corporal, gráficos y texto mostrado, etc.)  Las descripciones auditivas están sincronizadas con la banda visual  No ha de interferir con el audio original (aprovechar los silencios)  Se pueden proporcionar en una segunda pista de audio  Si no se pueden utilizar tecnologías de sincronización se pueden proporcionar dos versiones de la presentación multimedia, la versión normal y la versión con la audiodescripción  Un caso especial son las alternativas en audio para dar alternativas auditivas a contenido que es sólo vídeo. El enlace al archivo de audio debe estar inmediatamente antes o después del vídeo A

1.2.3. Audiodescripción o Medio Alternativo (grabado) TRANSCRIPCIÓN TEXTUAL Transcripción textual para el contenido que es multimedia sincronizado  Incluir descripciones de todo el contenido visual y auditivo A

Se proporcionan subtítulos para todo el contenido de audio en directo de los multimedia sincronizados Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.4: Subtítulos (directo) Criterio de conformidad 1.2.4: Subtítulos (directo) AA Beneficiarios: Objetivo: Permitir a personas con discapacidades auditivas ver presentaciones en directo sin perder información.

Se proporciona una audiodescripción para todo el contenido de vídeo grabado dentro de contenido multimedia sincronizado Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.5: Audiodescripción (grabado) Criterio de conformidad 1.2.5: Audiodescripción (grabado) AA Beneficiarios: Objetivo: Permitir a personas con discapacidades auditivas ver presentaciones en directo sin perder información.

Se proporciona una interpretación en lengua de señas para todo el contenido de audio grabado dentro de contenido multimedia sincronizado Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.6: Lengua de señas (grabado) Criterio de conformidad 1.2.6: Lengua de señas (grabado) AAA Beneficiarios: Objetivo: Permitir a las personas sordas cuya lengua principal es la lengua de signos entender el contenido de presentaciones multimedia. El lenguaje de signos permite transmitir entonación y emoción.

1.2.6. Lengua de señas (grabado) LENGUA DE SEÑAS  Permite transmitir entonación y emoción  Deben transmitir los diálogos y los sonidos más significativos necesarios para comprender el contenido multimedia  Se pueden incluir en la pista de vídeo de la presentación multimedia original  Otra posibilidad es incluirlo en otra pista de vídeo sincronizada con la presentación multimedia (en un área de visualización aparte o superpuesta). Recomendable que se pueda redimensionar. AAA

Cuando las pausas en el audio de primer plano son insuficientes para permitir que la audiodescripción comunique el significado del vídeo, se proporciona una audiodescripción ampliada para todos los contenidos de vídeo grabado dentro de contenido multimedia sincronizado. Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.7: Audiodescripción ampliada (grabada) Criterio de conformidad 1.2.7: Audiodescripción ampliada (grabada) AAA Beneficiarios: Objetivo: Permitir a las personas con discapacidades visuales acceder a la presentación multimedia sin perder información y más fielmente que con una audiodescripción estándar.

Se proporciona una alternativa para los medios tempodependientes, tanto para todos los contenidos multimedia sincronizados grabados como para todos los medios de sólo vídeo grabado. Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.8: Medio alternativo (grabado) Criterio de conformidad 1.2.8: Medio alternativo (grabado) AAA Beneficiarios: Objetivo: Lograr que el contenido visual y auditivo esté disponible para usuarios con baja visión que tienen dificultades para leer los subtítulos y, por otro lado, para quienes tienen problemas auditivos que les dificultan oír los diálogos o las audiodescripciones

Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido de sólo audio en directo Pauta 1.2: Medios Tempodependientes Criterio de conformidad 1.2.9: Sólo audio (directo) Criterio de conformidad 1.2.9: Sólo audio (directo) AAA Beneficiarios: Objetivo: Hacer que la información de audio en directo, como conferencias, charlas en directo, radio webcast, etc. Esté disponible para personas con capacidades auditivas.

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

La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto Pauta 1.3: Adaptable Criterio de conformidad 1.3.1: Información y relaciones Criterio de conformidad 1.3.1: Información y relaciones A Objetivo: Que los agentes de usuario, productos de apoyo y otras aplicaciones sean capaces de reconocer la estructura y semántica del contenido para transmitirla a los usuarios Beneficiarios:

1.3.1. Información y relaciones En (X)HTML proporcionar la información y las relaciones entre el contenido usando las siguientes técnicas:  Usar - para identificar los encabezados  Usar,, para las listas  Usar marcado de tablas para presentar la información tabular  Asociar las celdas de encabezado y las celdas de datos en las tablas de datos mediante el atributo scope  Asociar las celdas de encabezado y las celdas de datos en las tablas de datos mediante los atributos id y headers  Usar el elementos para asociar las tablas de datos con su título A

 Usar el atributo summary para dar una visión general de las tablas de datos  Usar el elemento para asociar las etiquetas con los controles de formulario  Usar el atributo title para identificar los controles de formulario cuando no se pueda usar el elemento  Proporcionar una descripción para grupos de controles de formulario mediante los elementos y  Usar para agrupar los elementos option dentro de un  Usar marcado semántico cuando se emplea el color como pista  Usar funciones DOM en caso de usar scripts para añadir contenido a la página A 1.3.1. Información y relaciones

Tecnologías diferentes de (X)HTML  Siempre que la tecnología empleada lo permita hemos de usar las características disponibles para proporcionar la información estructural y semántica de forma que pueda ser reconocida mediante software  Si la tecnología NO permite el marcado estructural y semántico:  Proporcionar la información en texto  Usar convenciones para dar formato al texto plano (TXT):  Transmitir la estructura del contenido mediante encabezados  Facilitar el reconocimiento de párrafos  Crear listas sencillas A 1.3.1. Información y relaciones

Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software una secuencia correcta de lectura. Pauta 1.3: Adaptable Criterio de conformidad 1.3.2: Secuencia significativa Criterio de conformidad 1.3.2: Secuencia significativa A Objetivo: Asegurarnos que el significado del contenido original se mantendrá cuando se usen presentaciones alternativas Beneficiarios:

1.3.2. Secuencia significativa Ordenar todo el contenido dentro de las secuencias significativas  Proporcionar el contenido basándose en el marcado estructural y respetando el orden dentro de las secuencias significativas Hacer que coincida el orden DOM con el orden visual Marcar secuencias dentro del contenido como significativas  Atributo dir para indicar los cambios anidados en la dirección de lectura del texto  Marca Unicode para indicar la dirección de lectura en los textos de los idiomas mezclados:  Izqda a drcha: ‎ o ‎  Drcha a izqda: ‏ o ‏ A

Las instrucciones proporcionadas para entender y operar el contenido no dependen exclusivamente de las características sensoriales de los componentes como su forma, tamaño, ubicación visual, orientación o sonido Pauta 1.3: Adaptable Criterio de conformidad 1.3.3: Características sensoriales Criterio de conformidad 1.3.3: Características sensoriales A Objetivo: Asegurar que todos los usuarios pueden acceder al contenido y comprender las instrucciones para usarlo, incluso cuando no puedan percibir la forma, tamaño o información sobre la localización espacial u orientación Beneficiarios:

1.3.3. Características sensoriales Proporcionar una identificación textual de los elementos que de otra manera dependerían únicamente de información sensorial para poder comprenderlos  No hacer referencia a elementos de la página web únicamente en función de su forma, tamaño, posición, orientación o sonido  Ej: Al hacer referencia a un botón de formulario se puede mencionar su función o la etiqueta que lo describe en vez de dar únicamente información sensorial como su forma o color A

Pauta 1.4: Distinguible Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre en primer plano y el fondo

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 Pauta 1.4: Distinguible Criterio de conformidad 1.4.1: Uso del color Criterio de conformidad 1.4.1: Uso del color A Objetivo: Asegurar que todos los usuarios pueden acceder a la información que se transmite por el color. No impide el uso del color para transmitir información siempre y cuando no sea éste el único medio empleado. Beneficiarios:

1.4.1. Uso del color Uso del color del texto, fondos u otro contenido para proporcionar información  Asegurar que la información transmitida por diferencias de color está además disponible en el texto  Ej: En un formulario podemos indicar los campos obligatorios incluyendo la palabra “obligatorio” en las etiquetas correspondientes. O emplear “pistas” como asteriscos, explicando antes del formulario, que “los campos obligatorios están marcados con un asterisco”  Asegurar que hay pistas visuales adicionales cuando se usa el color del texto para transmitir información  Ej: Utilizar variaciones en el estilo del texto (tamaño, negrita,, itálica, subrayado, etc.) para destacar los enlaces dentro de bloques de texto A

 Si se emplea únicamente el color para identificar los enlaces y controles, usar un contraste de al menos 3:1 con el texto que los rodea y pistas visuales adicionales cuando reciben el foco Uso del color en imágenes para proporcionar información  Usar patrones (formas, diferentes trazos de líneas, etc.) de forma que se pueda percibir la información sin necesidad de reconocer los colores  Asegurar que la información transmitida por diferencias de color también está disponible en texto  Ej: Utilizar leyendas asociadas a cada una de las secciones de una gráfica A 1.4.1. Uso del color

Si el audio de una página web suena automáticamente durante más de 3 segundos, se proporciona ya sea un mecanismo para pausar o detener el audio, o un mecanismo para controlar el volumen del sonido que es independiente del nivel de volumen global del sistema. Pauta 1.4: Distinguible Criterio de conformidad 1.4.2: Control del audio Criterio de conformidad 1.4.2: Control del audio A Objetivo: Evitar interferencias entre el sonido de la página y la lectura por parte del lector de pantalla. Beneficiarios:

1.4.2. Control del audio Apagar automáticamente el sonido al cabo de 3 seg., o Proporcionar un control al comienzo de la página que permita apagar los sonidos reproducidos automáticamente, o  El control debe ser operable mediante teclado y estar correctamente etiquetado con un texto que explique claramente su función Reproducir los sonidos sólo bajo demanda de los usuarios  El sonido debe estar inicialmente apagado  Hay que proporcionar controles para iniciar y detener el sonido.  Si se incluye un control para manejar el volumen ha de ser independiente del volumen del sistema para no disminuir también el volumen del lector de pantalla A

La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4:5:1, excepto en los siguientes casos:  Textos grandes: los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1  Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste  Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de 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, excepto en los siguientes casos:  Textos grandes: los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1  Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste  Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo. Pauta 1.4: Distinguible Criterio de conformidad 1.4.3: Contraste (mínimo) Criterio de conformidad 1.4.3: Contraste (mínimo) AA Beneficiarios: Objetivo: Proporcionar el suficiente contraste entre el primer plano y el fondo para que las personas con baja visión puedan leer el contenido

1.4.3. Contraste (mínimo) Excepciones:  Texto puramente decorativo  Componentes de interfaz de usuario inactivos  Imágenes con texto y otro contenido visual relevante  Logotipos Asegurar que el contraste entre el texto (e imágenes de texto) y el fondo detrás del texto es suficiente.  Texto normal (menor de 18pt o 14pt y negrita): contraste mínimo de 4:5:1  Texto grande (al menos 18pt o 14pt y negrita): contraste mínimo de 3:1 AA

Herramienta: Contrast AnalyzerContrast Analyzer AA Proporcionar un control con un contraste suficiente que permita a los usuarios cambiar a una presentación que tenga un contraste suficiente  La versión alternativa se puede crear mediante una hoja de estilo alternativa 1.4.3. Contraste (mínimo)

A excepción de los subtítulos y las imágenes del texto todo el texto puede ser ajustado sin ayudas técnicas hasta un 200% sin que se pierdan el contenido o la funcionalidad Pauta 1.4: Distinguible Criterio de conformidad 1.4.4: Cambio de tamaño del texto Criterio de conformidad 1.4.4: Cambio de tamaño del texto AA Beneficiarios: Objetivo: Asegurar que el texto renderizado visualmente, incluidos los controles basados en texto, se pueden redimensionar de forma que puedan ser leídos por personas con problemas de visión sin necesidad del uso de ayudas técnicas como magnificadores de pantalla.

1.4.4. Cambio de tamaño del texto Usar una tecnología que disponga de agentes de usuario de uso común que soporten zoom, o  Navegadores: IE7, Firefox 3, Opera 9 Usar unidades de medida relativas para el contenido y asegurar que los contenedores redimensionan con el texto, o  Para el tamaño de la fuente:  %  Unidad em  Nombres para el tamaño de la fuente (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) AA

 Para los contenedores:  Maquetación líquida (ancho de los contenedores en % y flotado de elementos)  Maquetación estática (ancho y/o alto de los contenedores en unidad em) Proporcionar controles en la página para que los usuarios puedan aumentar el tamaño del texto hasta un 200%, o  Utilizar controles visibles e incluidos directamente en la página AA 1.4.4. Cambio de tamaño del texto

AA Asegurar que no se pierde contenido o funcionalidad cuando se redimensione el texto y los contenedores no redimensionen  No se han de producir desbordamientos o solapamientos de contenido que dificulten su percepción al aumentar el tamaño del texto hasta un 200% 1.4.4. Cambio de tamaño del 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, excepto en los siguientes casos:  Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario  Esencial: Una forma particular de presentación del texto resulta esencial para la información que se transmite Nota: los logotipos se consideran esenciales 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, excepto en los siguientes casos:  Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario  Esencial: Una forma particular de presentación del texto resulta esencial para la información que se transmite Nota: los logotipos se consideran esenciales Pauta 1.4: Distinguible Criterio de conformidad 1.4.5: Imágenes de texto Criterio de conformidad 1.4.5: Imágenes de texto AA Beneficiarios: Objetivo: Crear presentaciones para formatos específicos de texto de forma que los usuarios que necesiten una presentación determinada del texto la puedan ajustar a sus necesidades.

1.4.5. Imágenes de texto Excepciones:  La presentación del texto es esencial para transmitir la información (Ej.: un logotipo, la hoja de un periódico impreso, una carta manuscrita, etc. Cuya presentación original forma parte de su valor documental o la presentación de diferentes tipografías de ejemplo)  Se puede configurar la imagen de texto (fuente, tamaño o color de primer plano o fondo) por ejemplo generando dinámicamente las imágenes de texto con scripts en el servidor y dando a los usuarios las opciones de configuración necesarias. AA

1.4.5. Imágenes de texto Usar CSS para controlar la presentación del texto  Propiedades: color, font-family, text-align, font-size, font-style, font- weight, line-height, text-transform, letter-spacing, background-image  Pseudoclases: first-line, first-letter, before, after  Uso de fuentes ampliamente disponibles o proporcionar fuentes alternativas Si finalmente usamos imágenes de texto, usar alguna técnica de reemplazo de texto por imágenes de texto  Incluir un control que permita a los usuarios cambiar entre los dos tipos de presentación, texto e imágenes de texto AA

La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos 7:1, excepto en los siguientes casos:  Textos grandes: Los textos de gran tamaño y las imágenes de textos de gran tamaño tienen una relación de contraste de, al menos 4:5:1  Incidental: Los textos o imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste  Logotipos: El textos que forma parte de un logo o nombre de marca no tienen requisito de contraste mínimo. La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos 7:1, excepto en los siguientes casos:  Textos grandes: Los textos de gran tamaño y las imágenes de textos de gran tamaño tienen una relación de contraste de, al menos 4:5:1  Incidental: Los textos o imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste  Logotipos: El textos que forma parte de un logo o nombre de marca no tienen requisito de contraste mínimo. Pauta 1.4: Distinguible Criterio de conformidad 1.4.6: Contraste (mejorado) Criterio de conformidad 1.4.6: Contraste (mejorado) AAA Beneficiarios: Objetivo: Proporcionar el suficiente contraste entre el primer plano y el fondo para que las personas con baja visión puedan leer el contenido

Para el contenido de sólo audio grabado que (1) contiene habla de primer plano, (2) no es un CAPTCHA sonoro o un audiologo, y (3) que no es una vocalización cuyo intención principal es servir como expresión musical (como el canto o el rap), se cumple al menos uno de los siguientes casos:  Ningún sonido de fondo: El audio no contiene sonidos de fondo  Apagar: Los sonidos de fondo pueden ser apagados  20 dB: Los sonidos de fondo son, al menos, 20 decibelios más bajos que el discurso en primer plano, con la excepción de sonidos ocasionales que duran solamente uno o dos segundos Para el contenido de sólo audio grabado que (1) contiene habla de primer plano, (2) no es un CAPTCHA sonoro o un audiologo, y (3) que no es una vocalización cuyo intención principal es servir como expresión musical (como el canto o el rap), se cumple al menos uno de los siguientes casos:  Ningún sonido de fondo: El audio no contiene sonidos de fondo  Apagar: Los sonidos de fondo pueden ser apagados  20 dB: Los sonidos de fondo son, al menos, 20 decibelios más bajos que el discurso en primer plano, con la excepción de sonidos ocasionales que duran solamente uno o dos segundos Pauta 1.4: Distinguible Criterio de conformidad 1.4.7: Sonido de fondo bajo o ausente Criterio de conformidad 1.4.7: Sonido de fondo bajo o ausente AAA Beneficiarios: Objetivo: Asegurar que los sonidos de fondo son lo suficientemente bajos para que las personas con problemas de audición puedan diferenciar las voces del resto de sonidos.

1.4.7. Sonido de fondo bajo o ausente Mezclar los archivos de audio de forma que los sonidos sean al menos 20 dB más bajos que las voces  Comprobarlo con algún programa de edición de audio AAA

En la presentación visual de bloques de texto, se proporciona algún mecanismo para lograr lo siguiente: 1. Los colores de fondo y primer plano pueden ser elegidos por el usuario 2. El ancho no es mayor de 30 caracteres o signos (40 si es CJK) 3. El texto no está justificado 4. El espaciado 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 % de modo que no requiere un desplazamiento horizontal para leer una línea de texto en una ventana a pantalla completa En la presentación visual de bloques de texto, se proporciona algún mecanismo para lograr lo siguiente: 1. Los colores de fondo y primer plano pueden ser elegidos por el usuario 2. El ancho no es mayor de 30 caracteres o signos (40 si es CJK) 3. El texto no está justificado 4. El espaciado 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 % de modo que no requiere un desplazamiento horizontal para leer una línea de texto en una ventana a pantalla completa Pauta 1.4: Distinguible Criterio de conformidad 1.4.8: Presentación visual Criterio de conformidad 1.4.8: Presentación visual AAA Beneficiarios: Objetivo: Asegurar que el texto se presenta visualmente de forma que se puede percibir sin que su disposición interfiera con la legibilidad del mismo

1.4.8. Presentación visual Asegurar que los usuarios pueden seleccionar el color de primer plano y el color de fondo AAA  Proporcionar en la página una herramienta de selección de los colores de primer plano y de fondo, o  Usar una tecnología que disponga de agentes de usuario de uso común que permitan cambiar el color de primer plano y del fondo de los bloques de texto (si usamos (X)HTML los navegadores ya permiten esta funcionalidad)

1.4.8. Presentación visual Asegurar que el ancho no es mayor de 80 caracteres  No interferir en la reubicación del texto cuando se disminuye el tamaño de la ventana (hasta ¼ parte del ancho de la pantalla).  Se trata de conseguir un ancho de línea ideal sin que se produzca un desplazamiento horizontal para leer una línea de texto  Usar unidades de medida relativas para definir el ancho de los contenedores principales del contenido textual de la página  Ej: Uso de % para la propiedad width en las CSS y unidades em para la propiedad max-width en las CSS  Se pueden usar maquetaciones mixtas en las que se combinen unidades absolutas para menús, columnas de anuncios, etc. AAA

1.4.8. Presentación visual Asegurar que el texto no está justificado  Text-align: left; o tetx-align: right; Asegurar que el espacio entre líneas es al menos de 1’5 dentro del párrafo, y el espacio entre párrafos es al menos 1’5 veces mayor que el espacio entre líneas  Especificar el espaciado entre líneas en la CSS (line-height entre 1’5 y 2 espacios)  Especificar el espaciado entre párrafos con sus márgenes en la CSS (margin, margin-top, margin-bottom)  Ej: p {line-height: 150%; margin-bottom: 2em;} AAA

1.4.8. Presentación visual Asegurar que se pueda redimensionar el texto sin ayudas técnicas hasta un 200% de forma que no haya desplazamiento horizontal para leer una línea de texto en una ventana a pantalla completa  Usar %, em o nombres para especificar el tamaño del texto  Usar % para el tamaño de los contenedores AAA

Las imágenes de texto sólo se utilizan como simple decoración o cuando una forma de presentación particular del texto resulta esencial para la información transmitida. Nota: Los logotipos se consideran esenciales Las imágenes de texto sólo se utilizan como simple decoración o cuando una forma de presentación particular del texto resulta esencial para la información transmitida. Nota: Los logotipos se consideran esenciales Pauta 1.4: Distinguible Criterio de conformidad 1.4.9: Imágenes de texto (sin excepciones) Criterio de conformidad 1.4.9: Imágenes de texto (sin excepciones) AAA Beneficiarios: Objetivo: Crear presentaciones para formatos específicos de texto de forma que los usuarios que necesiten una presentación determinada del texto la puedan ajustar a sus necesidades

1.4.9. Imágenes de texto (sin excepciones) Las mismas técnicas que para el criterio 1.2.4. pero sin contemplar el uso de imágenes de texto para lograr presentaciones del texto no reproducibles mediante CSS AAA

 Pauta 2.1: Accesible por teclado  Pauta 2.2: Tiempo suficiente  Pauta 2.3: Convulsiones  Pauta 2.4: Navegable Principio 2: Operable

Pauta 2.1: Accesible por teclado Proporcionar acceso a toda la funcionalidad mediante el teclado

Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final Pauta 2.1: Accesible por teclado Criterio de conformidad 2.1.1: Teclado Criterio de conformidad 2.1.1: Teclado A Objetivo: Asegurar que, siempre que sea posible, se pueda operar el contenido a través de teclado o de un interfaz de teclado (de forma que los usuarios puedan usar un teclado alternativo) Beneficiarios:

2.1.1. Teclado A Al poder operarse mediante una interfaz de teclado los usuarios podrán usar un teclado alternativo que se adapte a sus necesidades aunque el dispositivo no disponga de teclado de forma nativa (teclado acoplado, teclado en pantalla, etc.) Para tener acceso al teclado en pantalla de Windows, ir a Inicio, hacer click en Ejecutar y escribir osk

2.1.1. Teclado A Excepciones:  Dibujar a mano alzada (requiere una entrada dependiente del trazo)  Dibujar con acuarela (depende de una ruta y de la presión y/o velocidad del trazo)  Pilotar un simulador de vuelo

2.1.1. Teclado A Asegurar el control con el teclado usando enlaces y controles de formulario estándar de (X)HTML En los scripts y elementos de programación usar manejadores de evento que puedan lanzarse mediante teclado  Usando funciones para el teclado además de para otros dispositivos  onkeydown equivale a onmousedown  onkeyup equivale a onmouseup  onfocus equivale a onmouseover  onblur equivale a onmouseout  dbclick y mousemove son específicos de ratón y deben evitarse  Usando el evento onclick de enlaces y botones para hacer las acciones accesibles mediante teclado

Si es posible mover el foco a un componente de la página usando una interfaz de teclado, entonces el foco se puede quitar de ese componente usando sólo la interfaz de teclado y, si se requiere algo más que las teclas de dirección o de tabulación, se informa al usuario el método apropiado para mover el foco. Criterio de conformidad 2.1.2: Sin trampas para el foco de teclado Criterio de conformidad 2.1.2: Sin trampas para el foco de teclado A Objetivo: Asegurar que la navegación mediante el tabulador no queda atrapada en parte del contenido de la página Beneficiarios: Pauta 2.1: Accesible por teclado

2.1.2. Sin trampas para el foco de teclado A Asegurar que los usuarios no son atrapados en el contenido  Asegurar que la forma usada para avanzar el foco (generalmente la tecla de tabulación) sale de la sección de contenido una vez que llega al final de su navegación interna y sigue recorriendo normalmente el resto de la página  Proporcionar una función de teclado para sacar el foco de la sección de contenido. Se debe informar claramente, dentro de la sección de contenido, sobre cuál es la forma de sacar el foco (tecla o combinación de teclas)  Si la tecnología usada para incluir el contenido proporciona de forma nativa un mecanismo de teclado para devolver el foco al elemento padre (por ejemplo, la tecla ESC) entonces debemos documentarlo para que los usuarios sepan cómo salir de la sección de contenido

Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir una determinada velocidad en la pulsación de las teclas Criterio de conformidad 2.1.3: Teclado (sin excepciones) Criterio de conformidad 2.1.3: Teclado (sin excepciones) Objetivo: Asegurar que todo el contenido se puede manejar con un teclado o interfaz de teclado Beneficiarios: AAA Pauta 2.1: Accesible por teclado

2.1.3. Teclado (sin excepciones) AAA Seguir las técnicas indicadas en el criterio de conformidad 2.1.1.

Pauta 2.2: Tiempo suficiente Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido

Para cada límite de tiempo impuesto por el contenido, se cumple al menos uno de los siguientes casos:  Apagar: El usuario puede detener el límite de tiempo antes de alcanzar el límite de tiempo; o  Ajustar: El usuario puede ajustar el límite de tiempo antes de alcanzar dicho límite en un rango amplio que es, al menos, diez veces mayor al tiempo fijado originalmente; o  Extender: Se advierte al usuario antes de que el tiempo expire y se le conceden al menos 20 seg para extender el límite temporal con una acción simple y el usuario puede extender ese límite de tiempo al monos 10 veces; o  Excepción de tiempo real: El límite de tiempo es un requisito que forma parte de un evento de tiempo real y no resulta posible ofrecer una alternativa al límite de tiempo; o  Excepción por ser esencial: El límite de tiempo es esencial, y si se extendiera invalidaría la actividad; o  Excepción de 20 horas: El límite de tiempo es mayor a 20h Para cada límite de tiempo impuesto por el contenido, se cumple al menos uno de los siguientes casos:  Apagar: El usuario puede detener el límite de tiempo antes de alcanzar el límite de tiempo; o  Ajustar: El usuario puede ajustar el límite de tiempo antes de alcanzar dicho límite en un rango amplio que es, al menos, diez veces mayor al tiempo fijado originalmente; o  Extender: Se advierte al usuario antes de que el tiempo expire y se le conceden al menos 20 seg para extender el límite temporal con una acción simple y el usuario puede extender ese límite de tiempo al monos 10 veces; o  Excepción de tiempo real: El límite de tiempo es un requisito que forma parte de un evento de tiempo real y no resulta posible ofrecer una alternativa al límite de tiempo; o  Excepción por ser esencial: El límite de tiempo es esencial, y si se extendiera invalidaría la actividad; o  Excepción de 20 horas: El límite de tiempo es mayor a 20h Pauta 2.2: Tiempo suficiente Criterio de conformidad 2.2.1: Tiempo ajustable Criterio de conformidad 2.2.1: Tiempo ajustable A Objetivo: Dar a los usuarios con discapacidad el tiempo suficiente para interactuar con la página web Beneficiarios:

2.2.1. Tiempo ajustable A Excepciones:  Si el límite forma parte de un evento en tiempo real y no es posible una alternativa. Ej: una subasta  Si el límite de tiempo se considera esencial y su modificación invalidaría la actividad  Si el límite de tiempo es superior a 20h Si existen límites de tiempo de sesiones  Proporcionar una casilla de verificación en la 1ª página de los formularios de varios pasos que permita a los usuarios solicitar una ampliación o desactivación del límite de tiempo

2.2.1. Tiempo ajustable A Si el límite de tiempo está controlado por un script:  Proporcionar un medio que permita configurar el límite de tiempo hasta al menos 10 veces más que el límite de tiempo por defecto  Proporcionar un script que avise de que el límite de tiempo está a punto de terminar y además permitir al usuario ampliar el límite establecido por defecto.  El mensaje de aviso debe mostrarse al menos 20 seg. antes Si existe un límite de tiempo de lectura  Proporcionar un mecanismo para que los usuarios puedan pausarlo y reanudarlo desde donde se detuvo

2.2.1. Tiempo ajustable A Fallos comunes:  Usar redirecciones junto con un límite de tiempo  Usar actualizaciones periódicas de la página completa

Para la información que tiene movimiento, parpadeo, se desplaza o se actualiza automáticamente, se cumplen todos los casos siguientes:  Movimiento, parpadeo, desplazamiento: Para toda información que se mueve, parpadea o se desplaza, que (1) comienza automáticamente, (2) dura más de 5 seg. Y (3) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener y ocultar, a menos que el movimiento, parpadeo o desplazamiento sea parte esencial de una actividad, y  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 Para la información que tiene movimiento, parpadeo, se desplaza o se actualiza automáticamente, se cumplen todos los casos siguientes:  Movimiento, parpadeo, desplazamiento: Para toda información que se mueve, parpadea o se desplaza, que (1) comienza automáticamente, (2) dura más de 5 seg. Y (3) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener y ocultar, a menos que el movimiento, parpadeo o desplazamiento sea parte esencial de una actividad, y  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 Criterio de conformidad 2.2.2: Poner en pausa, detener, ocultar Criterio de conformidad 2.2.2: Poner en pausa, detener, ocultar A Objetivo: Evitar que se distraigan los usuarios mientras interactúan con la página Beneficiarios: Pauta 2.2: Tiempo suficiente

2.2.2. Poner en pausa, detener, ocultar A Excepción  Casos donde el movimiento, parpadeo desplazamiento o actualización es parte esencial para una actividad. Ej.: una animación de precarga de un contenido Permitir pausar y reanudar el contenido desde donde se detuvo  Pueden ser botones interactivos o atajos de teclado siempre que estén debidamente documentados

2.2.2. Poner en pausa, detener, ocultar A Emplear un control en la página que permita parar el movimiento, parpadeo o actualización automática del contenido  Se puede usar un único control para detener todo el contenido (situado al principio de la página) o bien usar un control para cada parte del contenido con movimiento, parpadeo o actualización (situado junto a él) Proporcionar un enlace, botón u otro mecanismo para recargar la página sin el contenido parpadeante  La página sin el contenido parpadeante debe contener toda la información y funcionalidad de la página original

2.2.2. Poner en pausa, detener, ocultar A Crear el contenido que parpadea de forma que dure menos de 5 seg. o bien que lo puedan detener los usuarios  Configurar los GIF animados para que se detengan después de n ciclos (antes de 5 segundos)  Utilizar scripts para controlar el parpadeo y detenerlo en 5 segundos o menos  setTimeout()  Utilizar una tecnología para incluir contenido parpadeante de forma que se pueda detener usando el agente de usuario  Algunos navegadores permiten detener las imágenes PNG animadas con la tecla ESC Fallos comunes:  Usar el elemento  Usar text-decoration:blink en las CSS

El tiempo no es parte esencial del evento o actividad presentada por el contenido, exceptuando las presentaciones multimedia no interactivas y los eventos en tiempo real Criterio de conformidad 2.2.3: Sin tiempo Criterio de conformidad 2.2.3: Sin tiempo Objetivo: Reducir los contenidos que requieren interacciones con límites de tiempo Beneficiarios: AAA Pauta 2.2: Tiempo suficiente

2.2.3. Sin tiempo AAA Permitir a los usuarios completar una actividad sin límites de tiempo

El usuario puede postergar o suprimir interrupciones, excepto cuando las interrupciones implican una emergencia Criterio de conformidad 2.2.4: Interrupciones Criterio de conformidad 2.2.4: Interrupciones Objetivo: Permitir a los usuarios detener las actualizaciones (de cliente o servidor) excepto en el caso de emergencias Beneficiarios: AAA Pauta 2.2: Tiempo suficiente

2.2.4. Interrupciones AAA Proporcionar un mecanismo para posponer una actualización de contenido  A través de una configuración de las preferencias de la página  Avisando a los usuarios de que se va a producir una actualización y permitir que la puedan desactivar Proporcionar un mecanismo para solicitar la actualización de los contenidos en lugar de actualizar automáticamente  Incluir por ejemplo un enlace a la misma página (“Actualizar esta página”)  No usar actualizaciones ni redirecciones con un límite de tiempo

2.2.4. Interrupciones AAA Si se usan alertas mediante scripts, permitir que las alertas no esenciales sean opcionales  Botón, casilla de verificación o similar que active y desactive la visualización de alertas no relacionadas con emergencias (desactivadas por defecto)

Cuando expira una sesión autentificada, el usuario puede continuar la actividad sin pérdida de datos tras volver a identificarse Criterio de conformidad 2.2.5: Re-autentificación Criterio de conformidad 2.2.5: Re-autentificación Objetivo: Permitir completar transacciones autentificadas que tengan un límite de inactividad u otra circunstancia que pueda causar la desconexión a mitad de la transacción Beneficiarios: AAA Pauta 2.2: Tiempo suficiente

2.2.5. Re-autentificación AAA Guardar la información de modo que pueda ser utilizada después de que el usuario haya vuelto a autentificarse  Almacenar los datos temporalmente en el servidor  Cuando el usuario se haya reautentificado, recuperar los datos de la caché y procesar el formulario como si no se hubiese terminado la sesión Codificar los datos del usuario como ocultos o encriptados en una página de reautentificación  Si almacenar la información del usuario en un servidor supone un riesgo legal o de seguridad o no hay capacidad técnica para el almacenamiento de datos:  Pasar la información como datos ocultos a la página de reautentificación

Pauta 2.3: Convulsiones No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones

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 Pauta 2.3: Convulsiones Criterio de conformidad 2.3.1: Umbral de 3 destellos o menos Criterio de conformidad 2.3.1: Umbral de 3 destellos o menos A Objetivo: Permitir que los usuarios accedan a todo el contenido sin que éste les cause ataques fotosensitivos Beneficiarios: Personas con trastornos fotosensitivos

2.3.1. Umbral de 3 destellos o menos A Asegurar que ningún contenido tiene destellos con una frecuencia superior a 3 destellos por segundo  Para calcular el nº de destellos se cuentan los cambios de luz a oscuridad y viceversa y se dividen entre dos. Mantener el área con destellos lo suficientemente pequeña  El área segura se corresponde con un 25% de un campo de visión de 10º a una distancia habitual de visionado  Para una resolución estándar de 1024x768 píseles y a una distancia de visión entre 11 y 26 pulgadas se corresponde a un cuadrado de 148 píxeles de lado

Las páginas web no contienen nada que destelle más de tres veces en un segundo Criterio de conformidad 2.3.2: Tres destellos Criterio de conformidad 2.3.2: Tres destellos Objetivo: Reducir al máximo las posibilidades de producir ataques Beneficiarios: Personas con trastornos fotosensitivos AAA Pauta 2.3: Convulsiones

Pauta 2.4: Navegable Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran

Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web Pauta 2.4: Navegable Criterio de conformidad 2.4.1: Evitar bloques Criterio de conformidad 2.4.1: Evitar bloques A Objetivo: Permitir a quienes naveguen de forma secuencial acceder de forma directa al contenido principal Beneficiarios:

2.4.1. Evitar bloques A Agrupar los bloques de material repetido de forma que se puedan saltar  Proporcionar elementos de encabezado al comienzo de cada sección del contenido  Los lectores de pantalla permiten obtener un mapa del documento en base a los encabezados y navegar usando ese mapa. Y también permiten saltar entre los encabezados  Agrupar enlaces mediante elementos estructurales  Utilizar listas u, o el elemento para identificar los listados de enlaces como menús de navegación (luego se pueden utilizar estilos para obtener el aspecto visual deseado)

2.4.1. Evitar bloques A  Cuando empleemos marcos para agrupar bloques de material repetido, usar el atributo title de los elementos e para identificar su contenido  No se recomienda el uso de marcos para estructurar o presentar las páginas  Usar un menú desplegable para saltar bloques de contenido repetido  Cuando el menú esté desplegado, su contenido debe poder determinarse por software y estar situado en un orden de lectura correcto  Cuando el menú esté colapsado, su contenido no debe ser visible para los agentes de usuario y productos de apoyo

2.4.1. Evitar bloques A  Podemos usar DOM scripting para generar el contenido y para eliminarlo  También la propiedad display de CSS (con los valores block y none)  O implementar el menú desplegable mediante scripts de servidor y recargar una versión modificada de la página, u otra página, cuando despleguemos o colapsemos el menú Crear enlaces para saltar bloques de material repetido  Enlace al comienzo que vaya al área del contenido principal  Debe ser el primer elemento en recibir el foco  Debe ser siempre visible o, al menos, ser visible cuando recibe el foco

2.4.1. Evitar bloques A  Enlaces de salto al comienzo de bloques de contenido repetido para ir al final del bloque  Han de estar situados justo antes de los bloques de contenido repetido  Deben ser siempre visibles o, al menos, ser visibles cuando reciben el foco  Enlaces al comienzo de la página que vayan a cada área de contenido  Han de ser los primeros controles del documento, a modo de tabla de contenidos  Deben ser siempre visibles o, al menos, ser visibles cuando reciben el foco

Las páginas web tienen títulos que describen su temática o propósito Criterio de conformidad 2.4.2: Titulado de páginas Criterio de conformidad 2.4.2: Titulado de páginas A Objetivo: Ayudar a los usuarios a encontrar el contenido y orientarse asegurándonos que cada página tiene un título descriptivo Beneficiarios: Pauta 2.4: Navegable

2.4.2. Titulado de páginas A Proporcionar títulos descriptivos para las páginas web mediante el elemento  El título ha de identificar el contenido de la página web  Ha de tener sentido fuera de contexto  Ha de ser corto  Se recomienda que identifique el sitio web al que pertenece la página

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 operatividad Criterio de conformidad 2.4.3: Orden del foco Criterio de conformidad 2.4.3: Orden del foco A Objetivo: Asegurar que los usuarios pueden interactuar mediante el teclado, navegar secuencialmente por el contenido y encontrar la información en el orden correcto Beneficiarios: Pauta 2.4: Navegable

2.4.3. Orden del foco A Ubicar los elementos de interacción en un orden que siga las secuencias y las relaciones del contenido  Organizar el contenido en el código (X)HTML de forma que el orden por defecto sea el correcto Si cambiamos el orden del foco por defecto, crear un orden lógico que siga las secuencias y relaciones del contenido  En (X)HTML usaremos el atributo tabindex en aquellos elementos de interacción para los que queramos modificar su orden  Valor entre 0 y 32767  1º se tabulan los elementos con un valor de tabindex>0, siguiendo el orden de sus valores  2º, los elementos sin tabindex o =0, siguiendo el orden en el código

2.4.3. Orden del foco A Si cambiamos una página dinámicamente, hacerlo de forma que el orden del foco siga teniendo sentido  Debemos insertar el contenido dinámico en el DOM justo a continuación del elemento que lo lanza (enlace o botón).  El evento que lo lanza debe ser onclick  Al cerrar un contenido dinámico (menú o diálogo) hay que devolver el foco al siguiente elemento

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 Criterio de conformidad 2.4.4: Propósito de los enlaces (en contexto) Criterio de conformidad 2.4.4: Propósito de los enlaces (en contexto) A Objetivo: Ayudar a los usuarios a comprender el propósito de cada enlace de forma que puedan decidir seguir el enlace o no Beneficiarios: Pauta 2.4: Navegable

2.4.4. Propósito de los enlaces (en contexto) A Usar el propio texto del enlace para describir su propósito  Usar un texto descriptivo para los elementos  Usar alternativas textuales (atributo alt) descriptivas para los elementos de los mapas de imagen Proporcionar una descripción adicional al texto del enlace  Usar CSS para ocultar parte del texto del enlace (posicionar de forma absoluta el elemento fuera de la pantalla), pero visible para los lectores de pantalla  Complementar el texto del enlace con el atributo title  Avisar de la apertura de nuevas ventanas  Informar sobre el formato del documento de destino

2.4.4. Propósito de los enlaces (en contexto) A Identificar el propósito del enlace usando su texto combinado con el texto de la frase que lo contiene  La información de contexto debe estar situada antes de los enlaces Identificar el propósito del enlace usando el texto del enlace combinado con el contexto determinado por software  Elemento de lista ( ) que contiene el enlace  En listas anidadas, elemento de la lista padre ( ) que contiene la lista en la que se encuentra el enlace  Párrafo ( ) que contiene el enlace  Celda ( ) de la tabla que contiene al enlace y sus encabezados asociados ( )  Elemento de encabezado anterior ( - )

2.4.4. Propósito de los enlaces (en contexto) A Permitir a los usuarios escoger entre enlaces largos o cortos  Ofrecer dos versiones de la página, una en la que los textos de los enlaces sean cortos y otra con textos descriptivos  Utilizar un control al comienzo de la página que permita cambiar el texto de los enlaces:  Usando CSS alternativas  Usando scripts para cambiar el texto de los enlaces  Se recomienda guardar las preferencias del usuario

Se proporciona más de un camino para localizar una página web dentro de un conjunto de páginas web, excepto cuando la pátina es el resultado, o un paso intermedio, de un proceso Criterio de conformidad 2.4.5: Múltiples vías Criterio de conformidad 2.4.5: Múltiples vías Objetivo: Asegurar que los usuarios puedan localizar el contenido de la forma que mejor satisfaga sus necesidades Beneficiarios: AA Pauta 2.4: Navegable

2.4.5. Múltiples vías AA (cumplir 2 ó más técnicas) Proporcionar enlaces a páginas relacionadas Proporcionar una tabla de contenidos de los documentos  Menú de enlaces a secciones y subsecciones en el mismo documento Proporcionar un mapa del sitio  Ha de incluir enlaces a las diferentes secciones del sitio web  Debe estar enlazado, al menos, desde cada una de las páginas que se listan en el mapa web  Todas las páginas del sitio web debe ser accesibles, directa o indirectamente, desde el mapa web

2.4.5. Múltiples vías AA Proporcionar funciones de búsqueda  Campo de búsqueda presente en todas las páginas del sitio o página propia para el buscador y sus opciones  Si es posible, proporcionar una búsqueda avanzada  Por diferentes secciones del sitio web  Por tipologías de contenido  Con corrección ortográfica  Por sinónimos, terminaciones de palabras similares, similitud entre palabras Proporcionar una lista de enlaces al resto de páginas web Enlazar a todas las páginas del sitio desde la página de inicio

Los encabezados y etiquetas describen el tema o propósito Criterio de conformidad 2.4.6: Encabezados y etiquetas Criterio de conformidad 2.4.6: Encabezados y etiquetas Objetivo: Ayudar a los usuarios a comprender qué información está contenida en la página web y cómo se organiza dicha información Beneficiarios: AA Pauta 2.4: Navegable

2.4.6. Encabezados y etiquetas AA Proporcionar encabezados significativos  Han de identificar la sección de contenido que encabezan  Han de ser claros y breves Proporcionar etiquetas significativas para los elementos de interacción de la página

Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la cual el indicador del foco del teclado resulta visible Criterio de conformidad 2.4.7: Foco visible Criterio de conformidad 2.4.7: Foco visible Objetivo: Asegurar que el indicador del foco del teclado se puede localizar visualmente Beneficiarios: AA Pauta 2.4: Navegable

2.4.7. Foco visible AA Usar componentes de interfaz de usuario que son resaltados por el agente de usuario al recibir el foco Usar el indicador de foco por defecto de la plataforma Crear un indicador de foco altamente visible  Usando CSS para modificar la presentación de un componente de interfaz de usuario cuando recibe el foco  Modificando el color de fondo o los bordes mediante las pseudoclases :over, :active, :focus  Usando scripts para cambiar el color de fondo o bordes de los elementos con foco

Se proporciona información acerca de la ubicación del usuario dentro de un conjunto de páginas web Criterio de conformidad 2.4.8: Ubicación Criterio de conformidad 2.4.8: Ubicación Objetivo: Proporcionar un mecanismo para que el usuario sea capaz de orientarse respecto a un conjunto de páginas, un sitio web o una aplicación web y sea capaz de encontrar información relacionada Beneficiarios: AAA Pauta 2.4: Navegable

2.4.8. Ubicación AAA Migas de pan  Permiten indicar la ubicación actual de una página pudiendo navegar jerárquicamente por la estructura que la contiene  Están formadas por enlaces y han de estar situadas en el mismo lugar en todas las páginas  Se pueden usar separadores visuales  Se pueden estructurar mediante listas usando la propiedad de CSS display:inline para mostrarlas en una línea Mapa del sitio Indicar la situación actual dentro de las barras de navegación  Usar iconos, textos o cambios de forma o estado del elemento actual en menús, pestañas, pasos de un proceso, etc.

2.4.8. Ubicación AAA En una colección de páginas relacionadas, indicar la relación con la página actual  En X(HTML) el elemento sirve para enlazar entre sí una colección de documentos relacionados, y con el atributo rel podemos indicar el tipo de vínculo existente: start, next, prev, contents, index, glossary, chapter, section, subsection, appendix, help  En vez de link se puede usar el título de la página para indicar su relación con el resto (puede incluir el nombre de cada sección)

Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuario en general Criterio de conformidad 2.4.9: Propósito de los enlaces (sólo enlaces) Criterio de conformidad 2.4.9: Propósito de los enlaces (sólo enlaces) Objetivo: Ayudar a los usuarios a comprender el propósito de cada enlace del contenido, sin depender del contexto Beneficiarios: AAA Pauta 2.4: Navegable

2.4.9. Propósito de los enlaces (sólo enlaces) AAA Usar el propio texto del enlace para describir su propósito Proporcionar una descripción adicional al texto del enlace Permitir a los usuarios escoger entre enlaces largos o cortos

Se usan encabezados de sección para organizar el contenido Criterio de conformidad 2.4.10: Encabezados de sección Criterio de conformidad 2.4.10: Encabezados de sección Objetivo: Proporcionar encabezados para las secciones de una página web, cuando ésta se organiza en secciones Beneficiarios: AAA Pauta 2.4: Navegable

2.4.10. Encabezados de sección AAA Organizar una página usando encabezados

 Pauta 3.1: Legible  Pauta 3.2: Predecible  Pauta 3.3: Entrada de datos asistida Principio 3: Comprensible

Pauta 3.1: Legible Hacer que los contenidos textuales resulten legibles y comprensibles

El idioma predeterminado de cada página web puede ser determinado por software Pauta 3.1: Legible Criterio de conformidad 3.1.1: Idioma de la página Criterio de conformidad 3.1.1: Idioma de la página A Objetivo: Proporcionar la información necesaria para que los agentes de usuarios puedan presentar el texto y otro contenido lingüístico de forma correcta Beneficiarios:

3.1.1. Idioma de la página AAA Identificar el idioma del documento mediante el uso de los atributos lang y/o xml:lang  En HTML usar el atributo lang y un código de idioma  En XHTML 1.0 servido como text/html usar xml:lang junto con lang  En XHTML 1.0 y 1.1 servido como XML usar sólo xml:lang

El idioma de cada pasaje o frase en el contenido puede ser determinado por software, excepto los nombres propios, términos técnicos, palabras en un idioma indeterminado y palabras o frases que se hayan convertido en parte natural del texto que las rodea Pauta 3.1: Legible Criterio de conformidad 3.1.2: Idioma de las partes Criterio de conformidad 3.1.2: Idioma de las partes Objetivo: Asegurar que los agentes de usuario y productos de apoyo presentan correctamente el contenido en múltiples idiomas Beneficiarios: AA

3.1.2. Idioma de las partes AAA Identificar los cambios de idioma respecto al principal mediante el uso de los atributos lang y/o xml:lang  Excepciones: los nombres propios, términos técnicos y títulos o términos de uso común (adoptados en el idioma) con pronunciación similar en el idioma principal del documento

Se proporciona un mecanismo para identificar las definiciones específicas de palabras o frases usadas de modo inusual o restringido, incluyendo expresiones idiomáticas y jerga Criterio de conformidad 3.1.3: Palabras inusuales Criterio de conformidad 3.1.3: Palabras inusuales Objetivo: Favorecer la comprensión del documento a personas con dificultad para entender el uso de palabras de forma no literal, usos o palabras especializadas, el lenguaje figurado y otros usos especializados Beneficiarios: AAA Pauta 3.1: Legible

3.1.3. Palabras inusuales AAA Si la palabra o frase tiene un significado único en la página web, proporcionar la definición la 1ª vez que aparezca  Usar un enlace a la definición  Crear definiciones usando listas de definición: (término) y (definición)  Utilizar el elemento con el atributo rel=“glossary” para enlazar con el glosario  Proporcionar definiciones en línea, en el propio texto de la página  Podemos indicar que un término tiene una definición asociada si lo marcamos con el elemento  Glosario  Función de búsqueda en un diccionario online

3.1.3. Palabras inusuales AAA Si la palabra o frase tiene varios significados en la página web, proporcionar la definición cada vez que aparezca  Usar un enlace a la definición  Proporcionar definiciones en línea, en el propio texto de la página  No se puede usar un Glosario  No se puede usar una función de búsqueda en un diccionario online

Se proporciona un mecanismo para identificar la forma expandida o el significado de las abreviaturas Criterio de conformidad 3.1.4: Abreviaturas Criterio de conformidad 3.1.4: Abreviaturas Objetivo: Asegurarnos que los usuarios pueden conocer la expansión de las formas abreviadas Beneficiarios: AAA Pauta 3.1: Legible

3.1.4. Abreviaturas AAA Si la abreviatura tiene un significado único en la página web, proporcionar la expansión o explicación la 1ª vez que aparezca  En el texto, antes de la forma abreviada  Usar un enlace a la definición  Mediante los elementos y  La expansión se proporciona en el atributo title de dichos elementos  Glosario  Función de búsqueda en un diccionario online

3.1.4. Abreviaturas AAA Si la abreviatura tiene varios significados en la página web, proporcionar la expansión o explicación cada vez que aparezca  Usar un enlace a la definición  Proporcionar definiciones en línea, en el propio texto de la página  No se puede usar un Glosario  No se puede usar una función de búsqueda en un diccionario online

Cuando un texto requiere un nivel de lectura más avanzado que el nivel mínimo de educación secundaria una vez que se han eliminado nombres propios y títulos, se proporciona un contenido suplementario o una versión que no requiere un nivel de lectura mayor a ese nivel educativo Criterio de conformidad 3.1.5: Nivel de lectura Criterio de conformidad 3.1.5: Nivel de lectura Objetivo: Asegurar que existe contenido adicional para comprender textos complejos y difíciles y establecer una medida testeable para saber cuándo es necesario ese contenido adicional Beneficiarios: AAA Pauta 3.1: Legible

3.1.5. Nivel de lectura AAA Ilustraciones o imágenes que ayuden a explicar ideas, procesos, etc Resumen del texto de forma que requiera un nivel de lectura menor  Proporcionar un resumen breve con la información e ideas más importantes Hacer el texto más fácil de leer  Limitar los párrafos a una única idea principal  Utilizar oraciones cortas y con una estructura sencilla  Dividir las frases largas en dos  Evitar frases con más de dos conjunciones y subordinadas  Emplear palabras sencillas y relativas al lenguaje cotidiano

3.1.5. Nivel de lectura AAA  Evitar el uso de jergas  No emplear palabras en otro idioma  Eliminar palabras redundantes que no afectan al significado  Usar verbos precisos para describir acciones  Usar preferiblemente la voz activa a la pasiva  No emplear el subjuntivo Versión hablada de texto  Contenido estático: proporcionar una lectura en voz del texto o bien una sintetización automática (indicar el formato en el enlace del archivo)  Contenido dinámico: Proporcionar un método de servidor para ofrecer la versión hablada

3.1.5. Nivel de lectura AAA Versiones en lengua de señas de la información, ideas y procesos que deban ser entendidos para usar el contenido

Se proporciona un mecanismo para identificar la pronunciación específica de las palabras cuando el significado de esas palabras, dentro del contexto, resulta ambiguo si no se conoce su pronunciación Criterio de conformidad 3.1.6: Pronunciación Criterio de conformidad 3.1.6: Pronunciación Objetivo: Ayudar a personas ciegas, con baja visión o con dificultades de lectura a comprender el contenido cuando su significado depende de la pronunciación Beneficiarios: AAA Pauta 3.1: Legible

3.1.6. Pronunciación AAA Indicar la pronunciación tras la palabra  Entre paréntesis Enlazar a las pronunciaciones Glosario Indicar la pronunciación usando una técnica específica de las siguientes:  Elemento de XHTML 1.1  indica el texto original, indica la pronunciación y indica entre paréntesis la pronunciación para aquellos agentes de usuario que no soporten el elemento  Marcas diacríticas

Pauta 3.2: Predecible Hacer que las páginas web aparezcan y operen de manera predecible

Cuando cualquier componente recibe el foco, no inicia ningún cambio en el contexto Pauta 3.2: Predecible Criterio de conformidad 3.2.1: Al recibir el foco Criterio de conformidad 3.2.1: Al recibir el foco A Objetivo: Asegurar que la funcionalidad es predecible cuando se navega por los documentos Beneficiarios:

3.2.1. Al recibir el foco A Usar una acción en vez del foco para cambios de contexto  Por ejemplo hacer click en un enlace o presionar un botón de envío

El cambio de estado en cualquier componente de la interfaz de usuario no provoca automáticamente un cambio en el contexto a menos que el usuario haya sido advertido de ese comportamiento antes de usar el componente Criterio de conformidad 3.2.2: Al recibir entradas Criterio de conformidad 3.2.2: Al recibir entradas A Objetivo: Asegurar que introducir datos o seleccionar un control tiene efectos predecibles Beneficiarios: Pauta 3.2: Predecible

3.2.2. Al recibir entradas A Usar un botón de envío para iniciar un cambio de contexto  Botón de envío en HTML para enviar formularios  tipo “submit” o “image”, tipo “submit”  Botón junto a para realizar una acción  Evitar los eventos onfocus y onchange porque provocan un cambio de contexto no esperado y se disparan al navegar entre las opciones mediante teclado Describir previamente lo que ocurrirá  Si no incluimos botón de envío, debemos incluir una descripción de lo que ocurrirá antes de que el control de formulario provoque el cambio de contexto

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 Criterio de conformidad 3.2.3: Navegación coherente Criterio de conformidad 3.2.3: Navegación coherente Objetivo: Asegurar que la presentación y la maquetación son consistentes a lo largo de todo el sitio web Beneficiarios: AA Pauta 3.2: Predecible

3.2.3. Navegación coherente AA Mantener el mismo orden relativo para los elementos que se repitan a lo largo del sitio

Los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas web son identificados de manera coherente Criterio de conformidad 3.2.4: Identificación coherente Criterio de conformidad 3.2.4: Identificación coherente Objetivo: Identificar de forma consistente los componentes funcionales que se repiten en un conjunto de páginas web. Si la misma función tiene diferentes etiquetas a lo largo del sitio, el sitio es mucho más difícil de usar Beneficiarios: AA Pauta 3.2: Predecible

3.2.4. Identificación coherente AA Etiquetas, nombres y alternativas textuales consistentes para contenido con la misma funcionalidad  Usar las mismas etiquetas para los mismos controles de formulario  En los enlaces usar el mismo texto para el mismo destino  Usar textos consistentes para destinos similares

Los cambios en el contexto son iniciados únicamente a solicitud del usuario o se proporciona un mecanismo para detener tales cambios Criterio de conformidad 3.2.5: Cambios a petición Criterio de conformidad 3.2.5: Cambios a petición Objetivo: Evitar la confusión que producen los cambios de contexto inesperados dando a los usuarios un control total sobre los mismos Beneficiarios: AAA Pauta 3.2: Predecible

3.2.5. Cambios a petición AAA Mecanismo para solicitar actualizaciones de página Redirecciones de página transparentes a los usuarios  Redirecciones automáticas de servidor (preferibles)  Redirecciones en el cliente instantáneas Avisar de la apertura de ventanas emergentes  Usar el atributo target y avisar en el texto del enlace  La apertura de nuevas ventanas del navegador siempre bajo petición de los usuarios  Scripts como mejora progresiva  El código del script lo enlazaremos desde la cabecera y lo cargaremos junto con el documento mediante el evento onload

3.2.5. Cambios a petición AAA Evento onchange en un elemento sin provocar un cambio de contexto

Pauta 3.3: Entrada de datos asistida Ayudar a los usuarios a evitar y corregir los errores

Si se detecta automáticamente un error en la entrada de datos, el elemento erróneo es identificado y el error se describe al usuario mediante un texto Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.1: Identificación de errores Criterio de conformidad 3.3.1: Identificación de errores A Objetivo: Asegurar que los usuarios se percatan de que se ha producido un error y dónde Beneficiarios:

3.3.1. Identificación de errores A Proporcionar descripciones textuales que identifiquen los campos no completados  Validar en el lado del cliente y mostrar un mensaje en texto o una ventana de alerta con la información necesaria  Validar en el lado del servidor y mostrar de nuevo el formulario informando al inicio cuáles son los campos que faltan por completar.  En el formulario se deben incluir todos los datos que ya se han introducido correctamente Proporcionar un texto descriptivo que indique al usuario que ha introducido un dato que no está en la lista de valores permitidos  Validar (cliente y/o servidor) e informar mediante texto de los errores existentes, al comienzo del formulario

3.3.1. Identificación de errores A  Describir la naturaleza del problema y proporcionar un medio para localizar rápidamente los campos con error  Si es posible, indicar los valores posibles o sugerir un valor de entre los permitidos que se asemeje al introducido Proporcionar un texto descriptivo que indique al usuario que ha introducido un dato que no cumple el formato requerido  Describir el error, cómo es el formato requerido y dar instrucciones para introducir el dato de forma correcta  Si es posible, dar ejemplos de datos correctos y sugerir algunos posibles similares al introducido

3.3.1. Identificación de errores A Ventana de alerta avisando del error cuando se usa validación de cliente Avisar de los errores mediante el uso del DOM cuando se usa validación de cliente

Se proporcionan etiquetas o instrucciones cuando el contenido requiere la introducción de datos por parte del usuario Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.2: Etiquetas o instrucciones Criterio de conformidad 3.3.2: Etiquetas o instrucciones A Objetivo: Evitar que se produzcan errores al introducir datos Beneficiarios:

3.3.2. Etiquetas o instrucciones A Proporcionar etiquetas descriptivas  Indicar el formato de los datos y un ejemplo  Proporcionar instrucciones textuales al comienzo del formulario o grupo de controles describiendo las restricciones de los campos  Situar las etiquetas de forma que las relaciones sean obvias  Para los botones de radio y casillas de verificación, inmediatamente a continuación  Para el resto, antes del campo  Proporcionar descripciones textuales que identifiquen los campos no completados

3.3.2. Etiquetas o instrucciones A Usar elementos para asociar las etiquetas con los controles de formulario mediante el atributo for  Se usa para los elementos, e de tipo “text”, “checkbox”, “radio”, “file” y “password”  El elemento se sitúa  Antes del control para elementos de tipo “text”, “file”, “password” y para y  Después del control para elementos de tipo “checkbox” y “radio” Usar el atributo title para identificar los controles de formulario cuando no se pueda usar el elemento

3.3.2. Etiquetas o instrucciones A Proporcionar una descripción de los grupos de controles de formulario usando los elementos y  El elemento muestra por defecto una línea que rodea a los controles para que se puedan reconocer visualmente. Su presentación se puede modificar con CSS Usar un botón adyacente para identificar el propósito del campo  Por ejemplo el botón del buscador puede servir como etiqueta

Si se detecta automáticamente un error en la entrada de datos y se dispone de sugerencias para hacer la corrección, entonces se presentan las sugerencias al usuario, a menos que esto ponga en riesgo la seguridad o el propósito del contenido Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.3: Sugerencias ante errores Criterio de conformidad 3.3.3: Sugerencias ante errores Objetivo: Asegurar, siempre que sea posible que los usuarios reciben sugerencias adecuadas para corregir errores al introducir datos Beneficiarios: AA

3.3.3. Sugerencias ante errores AA Sugerir un texto con la corrección  Correcciones ortográficas  Valor similar dentro de un conjunto de valores posibles  Preguntas adicionales para refinar datos ambiguos  Alternativas similares para evitar repetición de valores

Para las páginas web que representan para el usuario compromisos legales o transacciones financieras; que modifican o eliminan datos controlables por el usuario en sistemas de almacenamiento de datos; o que envían las respuestas del usuario a una prueba, se cumple al menos uno de los siguientes casos:  Reversible : El envío es reversible  Revisado: Se verifica la información para detectar errores en la entrada de datos y se proporciona al usuario una oportunidad de corregirlos  Confirmado: Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de los datos Para las páginas web que representan para el usuario compromisos legales o transacciones financieras; que modifican o eliminan datos controlables por el usuario en sistemas de almacenamiento de datos; o que envían las respuestas del usuario a una prueba, se cumple al menos uno de los siguientes casos:  Reversible : El envío es reversible  Revisado: Se verifica la información para detectar errores en la entrada de datos y se proporciona al usuario una oportunidad de corregirlos  Confirmado: Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de los datos Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.4: Prevención de errores (legales, financieros, datos) Criterio de conformidad 3.3.4: Prevención de errores (legales, financieros, datos) Objetivo: Evitar graves consecuencias como resultado de un error al realizar una acción que no se puede deshacer Beneficiarios: AA

3.3.4. Prevención de errores (legales, financieros, datos) AA En transacciones de carácter legal o económico  Ofrecer un período de tiempo tras el envío durante el cual se pueda modificar o cancelar por el usuario  Informar del tiempo disponible para realizar las modificaciones  Describir el proceso necesario para modificar o cancelar el pedido  La cancelación o modificación no tiene porqué ser en línea  Permitir a los usuarios revisar y corregir los datos antes del envío  Si los formularios son de varios pasos :

3.3.4. Prevención de errores (legales, financieros, datos) AA  Almacenar los datos en cada paso y permitir a los usuarios retroceder a un paso anterior para ver y/o modificar los datos introducidos  Al terminar el último paso, proporcionar un resumen con todos los datos antes de realizar la transacción, sugerir al usuario que los revise y permitirle corregir los errores si es necesario  Proporcionar, además del botón de envío, una casilla de verificación para confirmar  El texto usado para la casilla de verificación puede ser algo así “He revisado los datos y confirmo que son correctos”

3.3.4. Prevención de errores (legales, financieros, datos) AA Si la acción implica el borrado de datos  Ofrecer la posibilidad de recuperar la información borrada  Retrasar el borrado efectivo (papelera de reciclaje)  Guardar los datos eliminados manteniendo un control de cambios  Solicitar una confirmación para continuar con la acción  “Confirmar” o “Cancelar”  Proporcionar, además del botón de envío, una casilla de verificación para confirmar  Se ha de marcar la casilla de verificación para indicar que han revisado los datos. Inicialmente deseleccionada.

3.3.4. Prevención de errores (legales, financieros, datos) AA Si se trata de una aplicación de evaluación  Permitir a los usuarios revisar y corregir los datos antes del envío  Solicitar una confirmación para continuar con la acción

Se proporciona ayuda dependiente del contexto Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.5: Ayuda Criterio de conformidad 3.3.5: Ayuda Objetivo: Proporcionar ayuda a los usuarios para evitar que cometan errores Beneficiarios: AAA

3.3.5. Ayuda AAA Enlace de ayuda en cada página  Proporcionar al menos un enlace a la información de ayuda sobre cómo completar el formulario  Proporcionar un enlace antes o después de cada campo de formulario con información específica sobre dicho campo  Al seguir los enlaces a la ayuda no se deben perder los datos ya introducidos Proporcionar ayuda mediante un asistente Corrector ortográfico que ofrezca sugerencias

Para las páginas web que requieren al usuario el envío de información, se cumple al menos uno de los siguientes casos:  Reversible : El envío es reversible  Controlado: Se verifica la información para detectar errores en la entrada de datos y se proporciona al usuario una oportunidad de corregirlos  Confirmado: Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de los datos Para las páginas web que requieren al usuario el envío de información, se cumple al menos uno de los siguientes casos:  Reversible : El envío es reversible  Controlado: Se verifica la información para detectar errores en la entrada de datos y se proporciona al usuario una oportunidad de corregirlos  Confirmado: Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de los datos Pauta 3.3: Entrada de datos asistida Criterio de conformidad 3.3.6: Prevención de errores (todos) Criterio de conformidad 3.3.6: Prevención de errores (todos) Objetivo: Evitar las consecuencias de cometer un error al enviar los datos de un formulario Beneficiarios: AAA

3.3.6. Prevención de errores (todos) AAA Mismas técnicas indicadas en el criterio de conformidad 3.3.4., salvo que ahora se aplican siempre que los usuarios envíen información de cualquier tipo

 Pauta 4.1: Compatible Principio 4: Robusto

Pauta 4.1: Compatible Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas

En los contenidos implementados mediante el uso de lenguajes de marcas, los elementos tienen las etiquetas de apertura y cierre completas; los elementos están anidados de acuerdo a sus especificaciones; los elementos no contienen atributos duplicados y los ID son únicos, excepto cuando las especificaciones permitan estas características Pauta 4.1: Compatible Criterio de conformidad 4.1.1: Procesamiento Criterio de conformidad 4.1.1: Procesamiento A Objetivo: Asegurar que los agentes de usuario y productos de apoyo puedan interpretar correctamente y procesar (parsear) el contenido

4.1.1. Procesamiento A Asegurar que las páginas web puedan ser procesadas  En HTML, asegurar que la apertura y cierre de etiquetas sigue la especificación  En XHTML, asegurar que las páginas web están bien formadas Validar las páginas web  Se eliminan las ambigüedades que se pueden producir por el uso de código incorrecto  Gramáticas formales para HTML 4.0:  HTML “strict”  HTML “Transitional”  HTML “Frameset”

4.1.1. Procesamiento A  Gramáticas formales para XHTML 1.0:  XHTML “strict”  XHTML “Transitional”  XHTML “Frameset”

4.1.1. Procesamiento A  Validador HTML Validador HTML  Validador CSS Validador CSS

4.1.1. Procesamiento A Usar el lenguaje de acuerdo a la especificación  Usar únicamente características definidas en la especificación  Asegurar que el contenido se pueda procesar (parsear)  Usar las características según se indica en la especificación

Para todos los componentes de la interfaz de usuario (incluyendo, pero no limitado a: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser asignados por el usuario pueden ser especificados por software; y los cambios de estos elementos se encuentran disponibles para su consulta por las aplicaciones de usuario, incluyendo las ayudas técnicas Criterio de conformidad 4.1.2: Nombre, función, valor Criterio de conformidad 4.1.2: Nombre, función, valor A Objetivo: Asegurar que los productos de apoyo puedan obtener información, interactuar y estar al corriente del estado de los controles de interfaz de usuario Pauta 4.1: Compatible

4.1.2. Nombre, función, valor A Si usamos componentes de interacción estándar  Usar enlaces y controles de formulario HTML  Usar el elemento para asociar etiquetas a los controles de formulario o, en su defecto, el atributo title  Usar el atributo title en marcos y marcos en línea  Usar HTML de acuerdo a la especificación  Usar funciones DOM para añadir contenidos a la página Si usamos scripts para modificar un componente de interacción estándar  Usar funciones DOM para añadir contenidos a la página

4.1.2. Nombre, función, valor A Si usamos componentes de interacción en una tecnología de programación  Usar sus componentes de interacción estándar y las características de accesibilidad de la API de dichas tecnologías  La accesibilidad en los objetos Flash está soportada a través de Microsoft Active Accessibility (MSAA) Microsoft Active Accessibility  Para JAVA debemos emplear la API de Accesibilidad de Java, JAAPI Si creamos componentes de interacción propios con un lenguaje de programación  Aplicaciones Ricas de Internet Accesible  Especificaciones WAI-ARIA

WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos.

Presentaciones similares

Presentación del tema: "WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos.

Presentaciones similares

Presentación del tema: "WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora CegueraBaja visiónBaja audiciónSordera Problemas cognitivosPersonas mayoresTodos."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback