WCAG 2.0: Pautas de Accesibilidad al Contenido Web

182
WCAG 2.0 Pautas de Accesibilidad al Contenido Web 2.0 Discapacidad motora Ceguera Baja visión Baja audición Sordera Problemas cognitivosPersonas mayores Todos Nota: Los iconos utilizados tienen Licencia Creative Commons Attribution 2.0 ( http://icons.anatom5.de , http://www.natko.de ) Autor: Adelaida Delgado --- URL: http://servidorti.uib.es/adelaida/accesibilidad/WCAG20.ppt
  • date post

    19-Oct-2014
  • Category

    Technology

  • view

    1.532
  • download

    2

description

 

Transcript of WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Page 1: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

WCAG 2.0

Pautas de Accesibilidad al Contenido Web 2.0

Discapacidad motora

Ceguera Baja visión Baja audiciónSordera

Problemas cognitivos Personas mayores Todos

Nota: Los iconos utilizados tienen Licencia Creative Commons Attribution 2.0 (http://icons.anatom5.de , http://www.natko.de)

Autor: Adelaida Delgado --- URL: http://servidorti.uib.es/adelaida/accesibilidad/WCAG20.ppt

Page 2: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

Page 3: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

WCAG 2.0

Principio 1: PerceptiblePrincipio 2: OperablePrincipio 3: ComprensiblePrincipio 4: Robusto

Page 4: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 1.1: Alternativas textualesPauta 1.2: Medios TempodependientesPauta 1.3: AdaptablePauta 1.4: Distinguible

Principio 1: Perceptible

Page 5: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

Page 6: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 1.1: Alternativas textuales 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

Page 7: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.1.1.Contenido no textual1.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 <img>

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

Page 8: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.1.1.Contenido no textual1.1.1.Contenido no textual

Usar el atributo alt de las imágenes usadas como botones de envío

de formularios (<input> 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 <object>

Proporcionar alternativas textuales para los elementos <applet>

A

Page 9: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.1.1.Contenido no textual1.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 <img>

Usar el cuerpo del elemento <object>

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

Page 10: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

CONTROLES DE FORMULARIO

Proporcionar una alternativa textual que identifique el propósito del

contenido no textual

Usar elementos <label> 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 <label>

A

1.1.1.Contenido no textual1.1.1.Contenido no textual

Page 11: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 textual1.1.1.Contenido no textual

Page 12: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 textual1.1.1.Contenido no textual

Page 13: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 <img> 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 textual1.1.1.Contenido no textual

Page 14: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 1.2: Medios Tempodependientes

Proporcionar alternativas para los medios tempodependientes

Page 15: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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:

Page 16: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.2.1. Sólo audio y sólo vídeo (grabado)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

Page 17: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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.

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 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

Page 18: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.2.2. Subtítulos (grabados) 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 multimediaSi el contenido multimedia tiene varias pistas de audio en diferentes idiomas

deberíamos proporcionar subtítulos para todos los idiomas usados

Tipos de subtítulosAbiertos: 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

Page 19: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona una alternativa para los medios tempo-

dependientes 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.

Se proporciona una alternativa para los medios tempo-

dependientes 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 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.

Page 20: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.2.3. Audiodescripción o Medio Alternativo (grabado) 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

Page 21: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.2.3. Audiodescripción o Medio Alternativo (grabado) 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

Page 22: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporcionan subtítulos para todo el contenido de

audio en directo de los multimedia sincronizados

Se proporcionan subtítulos para todo el contenido de

audio en directo de los multimedia sincronizados

Pauta 1.2: Medios Tempodependientes 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.

Page 23: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona una audiodescripción para todo el

contenido de vídeo grabado dentro de contenido

multimedia sincronizado

Se proporciona una audiodescripción para todo el

contenido de vídeo grabado dentro de contenido

multimedia sincronizado

Pauta 1.2: Medios Tempodependientes 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.

Page 24: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona una interpretación en lengua de

señas para todo el contenido de audio grabado

dentro de contenido multimedia sincronizado

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 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.

Page 25: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.2.6. Lengua de señas (grabado)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

Page 26: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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.

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 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.

Page 27: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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.

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 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

Page 28: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona una alternativa para los medios

tempodependientes que presenta información

equivalente para el contenido de sólo audio en

directo

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 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.

Page 29: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

Page 30: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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:

Page 31: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.3.1. Información y relaciones 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 <h1> - <h6> para identificar los encabezados

Usar <ol>, <ul>, <dl> 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 <caption> para asociar las tablas de datos con su

título

A

Page 32: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Usar el atributo summary para dar una visión general de las tablas de datos

Usar el elemento <label> 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 <label>

Proporcionar una descripción para grupos de controles de formulario

mediante los elementos <fieldset> y <legend>

Usar <optgroup> para agrupar los elementos option dentro de un <select>

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 1.3.1. Información y relaciones

Page 33: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 1.3.1. Información y relaciones

Page 34: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Cuando la secuencia en que se presenta el contenido afecta

a su significado, se puede determinar por software una

secuencia correcta de lectura.

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 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:

Page 35: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.3.2. Secuencia significativa 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: &lrm; o &#x200e;

Drcha a izqda: &rlm; o &#x200f;

A

Page 36: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 1.3: Adaptable

Criterio de conformidad 1.3.3: Características sensorialesCriterio 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:

Page 37: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.3.3. Características sensoriales 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

Page 38: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

Page 39: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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:

Page 40: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.1. Uso del color 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 textoEj: 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ónEj: Utilizar variaciones en el estilo del texto (tamaño, negrita,, itálica,

subrayado, etc.) para destacar los enlaces dentro de bloques de texto

A

Page 41: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 textoEj: Utilizar leyendas asociadas a cada una de las secciones de una

gráfica

A

1.4.1. Uso del color 1.4.1. Uso del color

Page 42: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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.

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 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:

Page 43: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.2. Control del audio 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

Page 44: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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

Page 45: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.3. Contraste (mínimo)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

Page 46: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Herramienta: Contrast 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)1.4.3. Contraste (mínimo)

Page 47: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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.

Page 48: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.4. Cambio de tamaño del texto1.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

Page 49: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 texto1.4.4. Cambio de tamaño del texto

Page 50: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 texto1.4.4. Cambio de tamaño del texto

Page 51: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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.

Page 52: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.5. Imágenes de texto 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

Page 53: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.5. Imágenes de texto 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

Page 54: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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

Page 55: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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.

Page 56: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.7. Sonido de fondo bajo o ausente1.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

Page 57: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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

Page 58: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.8. Presentación visual1.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)

Page 59: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.8. Presentación visual1.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

Page 60: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.8. Presentación visual1.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

Page 61: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.8. Presentación visual1.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

Page 62: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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

Page 63: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

1.4.9. Imágenes de texto (sin excepciones)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

Page 64: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 2.1: Accesible por tecladoPauta 2.2: Tiempo suficientePauta 2.3: ConvulsionesPauta 2.4: Navegable

Principio 2: Operable

Page 65: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 2.1: Accesible por teclado

Proporcionar acceso a toda la funcionalidad mediante el teclado

Page 66: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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:

Page 67: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.1.1. Teclado2.1.1. TecladoA

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

Page 68: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.1.1. Teclado2.1.1. TecladoA

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

Page 69: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.1.1. Teclado2.1.1. TecladoA

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

Page 70: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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.

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 Pauta 2.1: Accesible por teclado

Page 71: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.1.2. Sin trampas para el foco de teclado2.1.2. Sin trampas para el foco de tecladoA

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

Page 72: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 2.1: Accesible por teclado

Page 73: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.1.3. Teclado (sin excepciones) 2.1.3. Teclado (sin excepciones) AAA

Seguir las técnicas indicadas en el criterio de conformidad 2.1.1.

Page 74: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 2.2: Tiempo suficiente

Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido

Page 75: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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:

Page 76: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.1. Tiempo ajustable2.2.1. Tiempo ajustableA

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

Page 77: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.1. Tiempo ajustable2.2.1. Tiempo ajustableA

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

Page 78: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.1. Tiempo ajustable2.2.1. Tiempo ajustableA

Fallos comunes:

Usar redirecciones junto con un límite de tiempo

Usar actualizaciones periódicas de la página completa

Page 79: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 Pauta 2.2: Tiempo suficiente

Page 80: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.2. Poner en pausa, detener, ocultar2.2.2. Poner en pausa, detener, ocultarA

ExcepciónCasos 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 detuvoPueden ser botones interactivos o atajos de teclado siempre que estén

debidamente documentados

Page 81: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.2. Poner en pausa, detener, ocultar2.2.2. Poner en pausa, detener, ocultarA

Emplear un control en la página que permita parar el movimiento,

parpadeo o actualización automática del contenidoSe 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 parpadeanteLa página sin el contenido parpadeante debe contener toda la información y

funcionalidad de la página original

Page 82: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.2. Poner en pausa, detener, ocultar2.2.2. Poner en pausa, detener, ocultarA

Crear el contenido que parpadea de forma que dure menos de 5 seg. o

bien que lo puedan detener los usuariosConfigurar 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 <blink>

Usar text-decoration:blink en las CSS

Page 83: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 2.2: Tiempo suficiente

Page 84: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.3. Sin tiempo2.2.3. Sin tiempoAAA

Permitir a los usuarios completar una actividad sin límites de tiempo

Page 85: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

El usuario puede postergar o suprimir interrupciones,

excepto cuando las interrupciones implican una

emergencia

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 Pauta 2.2: Tiempo suficiente

Page 86: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.4. Interrupciones2.2.4. InterrupcionesAAA

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

Page 87: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.4. Interrupciones2.2.4. InterrupcionesAAA

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)

Page 88: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Cuando expira una sesión autentificada, el usuario

puede continuar la actividad sin pérdida de datos

tras volver a identificarse

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 Pauta 2.2: Tiempo suficiente

Page 89: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.2.5. Re-autentificación 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

Page 90: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 2.3: Convulsiones

No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o

convulsiones

Page 91: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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

Page 92: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.3.1. Umbral de 3 destellos o menos 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

Page 93: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Las páginas web no contienen nada que destelle

más de tres veces en un segundo

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.3: Convulsiones

Page 94: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 2.4: Navegable

Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y

determinar dónde se encuentran

Page 95: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Existe un mecanismo para evitar los bloques

de contenido que se repiten en múltiples

páginas web

Existe un mecanismo para evitar los bloques

de contenido que se repiten en múltiples

páginas web

Pauta 2.4: Navegable 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:

Page 96: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.1. Evitar bloques2.4.1. Evitar bloquesA

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 <ul> u <ol>, o el elemento <map> para identificar

los listados de enlaces como menús de navegación (luego se

pueden utilizar estilos para obtener el aspecto visual deseado)

Page 97: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.1. Evitar bloques2.4.1. Evitar bloquesA

Cuando empleemos marcos para agrupar bloques de material

repetido, usar el atributo title de los elementos <frame> e <iframe>

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

Page 98: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.1. Evitar bloques2.4.1. Evitar bloquesA

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

Page 99: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.1. Evitar bloques2.4.1. Evitar bloquesA

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

Page 100: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Las páginas web tienen títulos que describen

su temática o propósito

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 Pauta 2.4: Navegable

Page 101: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.2. Titulado de páginas2.4.2. Titulado de páginasA

Proporcionar títulos descriptivos para las páginas web mediante el

elemento <title>

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

Page 102: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 correctoBeneficiarios:

Pauta 2.4: Navegable Pauta 2.4: Navegable

Page 103: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.3. Orden del foco2.4.3. Orden del focoA

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 ordenValor 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

Page 104: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.3. Orden del foco2.4.3. Orden del focoA

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

Page 105: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 2.4: Navegable

Page 106: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.4. Propósito de los enlaces (en contexto)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 <a>

Usar alternativas textuales (atributo alt) descriptivas para los

elementos <area> 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

Page 107: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.4. Propósito de los enlaces (en contexto)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 (<li>) que contiene el enlace

En listas anidadas, elemento de la lista padre (<li>) que contiene la

lista en la que se encuentra el enlace

Párrafo (<p>) que contiene el enlace

Celda (<td>) de la tabla que contiene al enlace y sus encabezados

asociados (<th>)

Elemento de encabezado anterior (<h1> - <h6>)

Page 108: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.4. Propósito de los enlaces (en contexto)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

Page 109: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 2.4: Navegable

Page 110: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.5. Múltiples vías2.4.5. Múltiples víasAA

(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

Page 111: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.5. Múltiples vías2.4.5. Múltiples víasAA

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

Page 112: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Los encabezados y etiquetas describen

el tema o propósito

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 Pauta 2.4: Navegable

Page 113: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.6. Encabezados y etiquetas2.4.6. Encabezados y etiquetasAA

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

Page 114: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Cualquier interfaz de usuario operable por

teclado tiene una forma de operar en la cual el

indicador del foco del teclado resulta visible

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 Pauta 2.4: Navegable

Page 115: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.7. Foco visible2.4.7. Foco visibleAA

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

Page 116: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona información acerca de la

ubicación del usuario dentro de un conjunto

de páginas web

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 relacionadaBeneficiarios:

AAA

Pauta 2.4: Navegable Pauta 2.4: Navegable

Page 117: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.8. Ubicación2.4.8. UbicaciónAAA

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áginasSe 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.

Page 118: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.8. Ubicación2.4.8. UbicaciónAAA

En una colección de páginas relacionadas, indicar la relación con la

página actual

En X(HTML) el elemento <link> 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 <title> para indicar

su relación con el resto (puede incluir el nombre de cada sección)

Page 119: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 2.4: Navegable

Page 120: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.9. Propósito de los enlaces (sólo enlaces)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

Page 121: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se usan encabezados de sección

para organizar el contenido

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 Pauta 2.4: Navegable

Page 122: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

2.4.10. Encabezados de sección2.4.10. Encabezados de secciónAAA

Organizar una página usando encabezados

Page 123: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 3.1: LegiblePauta 3.2: PredeciblePauta 3.3: Entrada de datos asistida

Principio 3: Comprensible

Page 124: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 3.1: Legible

Hacer que los contenidos textuales resulten legibles y comprensibles

Page 125: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

El idioma predeterminado de cada

página web puede ser determinado por

software

El idioma predeterminado de cada

página web puede ser determinado por

software

Pauta 3.1: Legible 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

correctaBeneficiarios:

Page 126: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.1. Idioma de la página3.1.1. Idioma de la páginaAAA

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

Page 127: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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

Page 128: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.2. Idioma de las partes3.1.2. Idioma de las partesAAA

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

Page 129: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 especializadosBeneficiarios:

AAA

Pauta 3.1: Legible Pauta 3.1: Legible

Page 130: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.3. Palabras inusuales3.1.3. Palabras inusualesAAA

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: <dt> (término) y

<dd> (definición)

Utilizar el elemento <link> 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 <dfn>

Glosario

Función de búsqueda en un diccionario online

Page 131: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.3. Palabras inusuales3.1.3. Palabras inusualesAAA

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

Page 132: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona un mecanismo para identificar

la forma expandida o el significado de las

abreviaturas

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 Pauta 3.1: Legible

Page 133: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.4. Abreviaturas3.1.4. AbreviaturasAAA

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 <abbr> y <acronym>

La expansión se proporciona en el atributo title de dichos

elementos

Glosario

Función de búsqueda en un diccionario online

Page 134: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.4. Abreviaturas3.1.4. AbreviaturasAAA

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

Page 135: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 adicionalBeneficiarios:

AAA

Pauta 3.1: Legible Pauta 3.1: Legible

Page 136: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.5. Nivel de lectura3.1.5. Nivel de lecturaAAA

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

Page 137: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.5. Nivel de lectura3.1.5. Nivel de lecturaAAA

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 textoContenido 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

Page 138: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.5. Nivel de lectura3.1.5. Nivel de lecturaAAA

Versiones en lengua de señas de la información, ideas y procesos

que deban ser entendidos para usar el contenido

Page 139: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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ónBeneficiarios:

AAA

Pauta 3.1: Legible Pauta 3.1: Legible

Page 140: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.1.6. Pronunciación3.1.6. PronunciaciónAAA

Indicar la pronunciación tras la palabraEntre paréntesis

Enlazar a las pronunciaciones

Glosario

Indicar la pronunciación usando una técnica específica de las

siguientes:

Elemento <ruby> de XHTML 1.1<rb> indica el texto original, <rt> indica la pronunciación y <rp> indica entre

paréntesis la pronunciación para aquellos agentes de usuario que no soporten

el elemento <ruby>

Marcas diacríticas

Page 141: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 3.2: Predecible

Hacer que las páginas web aparezcan y operen de manera predecible

Page 142: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Cuando cualquier componente recibe el

foco, no inicia ningún cambio en el

contexto

Cuando cualquier componente recibe el

foco, no inicia ningún cambio en el

contexto

Pauta 3.2: Predecible 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:

Page 143: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.1. Al recibir el foco3.2.1. Al recibir el focoA

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

Page 144: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 3.2: Predecible

Page 145: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.2. Al recibir entradas3.2.2. Al recibir entradasA

Usar un botón de envío para iniciar un cambio de contexto

Botón de envío en HTML para enviar formularios

<input> tipo “submit” o “image”, <button> tipo “submit”

Botón junto a <select> 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

Page 146: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 3.2: Predecible

Page 147: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.3. Navegación coherente3.2.3. Navegación coherenteAA

Mantener el mismo orden relativo para los elementos que se repitan a

lo largo del sitio

Page 148: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Los componentes que tienen la misma funcionalidad

dentro de un conjunto de páginas web son

identificados de manera coherente

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 usarBeneficiarios:

AA

Pauta 3.2: Predecible Pauta 3.2: Predecible

Page 149: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.4. Identificación coherente3.2.4. Identificación coherenteAA

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

Page 150: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Los cambios en el contexto son iniciados

únicamente a solicitud del usuario o se proporciona

un mecanismo para detener tales cambios

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 Pauta 3.2: Predecible

Page 151: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.5. Cambios a petición3.2.5. Cambios a peticiónAAA

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

Page 152: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.2.5. Cambios a petición3.2.5. Cambios a peticiónAAA

Evento onchange en un elemento <select> sin provocar un cambio de

contexto

Page 153: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 3.3: Entrada de datos asistida

Ayudar a los usuarios a evitar y corregir los errores

Page 154: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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:

Page 155: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.1. Identificación de errores3.3.1. Identificación de erroresA

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

Page 156: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.1. Identificación de errores3.3.1. Identificación de erroresA

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

Page 157: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.1. Identificación de errores3.3.1. Identificación de erroresA

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

Page 158: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporcionan etiquetas o instrucciones

cuando el contenido requiere la introducción

de datos por parte del usuario

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 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:

Page 159: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.2. Etiquetas o instrucciones3.3.2. Etiquetas o instruccionesA

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 obviasPara 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

Page 160: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.2. Etiquetas o instrucciones3.3.2. Etiquetas o instruccionesA

Usar elementos <label> para asociar las etiquetas con los controles

de formulario mediante el atributo for

Se usa para los elementos <textarea>, <select> e <input> de tipo

“text”, “checkbox”, “radio”, “file” y “password”

El elemento <label> se sitúaAntes del control para elementos <input> de tipo “text”, “file”, “password”

y para <textarea> y <select>

Después del control para elementos <input> de tipo “checkbox” y “radio”

Usar el atributo title para identificar los controles de formulario

cuando no se pueda usar el elemento <label>

Page 161: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.2. Etiquetas o instrucciones3.3.2. Etiquetas o instruccionesA

Proporcionar una descripción de los grupos de controles de

formulario usando los elementos <fieldset> y <legend>

El elemento <fieldset> 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

Page 162: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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 datosBeneficiarios:

AA

Page 163: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.3. Sugerencias ante errores3.3.3. Sugerencias ante erroresAA

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

Page 164: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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 deshacerBeneficiarios:

AA

Page 165: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.4. Prevención de errores (legales, financieros, datos)

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:

Page 166: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.4. Prevención de errores (legales, financieros, datos)

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”

Page 167: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.4. Prevención de errores (legales, financieros, datos)

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.

Page 168: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.4. Prevención de errores (legales, financieros, datos)

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

Page 169: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Se proporciona ayuda dependiente

del contexto

Se proporciona ayuda dependiente

del contexto

Pauta 3.3: Entrada de datos asistida 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

Page 170: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.5. Ayuda3.3.5. AyudaAAA

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

Page 171: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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 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

Page 172: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

3.3.6. Prevención de errores (todos)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

Page 173: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 4.1: Compatible

Principio 4: Robusto

Page 174: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

Pauta 4.1: Compatible

Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras,

incluyendo las ayudas técnicas

Page 175: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 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

Page 176: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.1. Procesamiento4.1.1. ProcesamientoA

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”

Page 177: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.1. Procesamiento4.1.1. ProcesamientoA

Gramáticas formales para XHTML 1.0:

XHTML “strict”

XHTML “Transitional”

XHTML “Frameset”

Page 178: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.1. Procesamiento4.1.1. ProcesamientoA

Validador HTML

Validador CSS

Page 179: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.1. Procesamiento4.1.1. ProcesamientoA

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

Page 180: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

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

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 Pauta 4.1: Compatible

Page 181: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.2. Nombre, función, valor4.1.2. Nombre, función, valorA

Si usamos componentes de interacción estándar

Usar enlaces y controles de formulario HTML

Usar el elemento <label> 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

Page 182: WCAG 2.0: Pautas de Accesibilidad al Contenido Web

4.1.2. Nombre, función, valor4.1.2. Nombre, función, valorA

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)

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