Principio 1 Perceptible en Nivel AA Unidad 2

1

UNIDAD 2

PRINCIPIO 1 PERCEPTIBLE EN NIVEL AA

INTRODUCCIOacuteN

Este principio tiene como objetivo que toda la

informacioacuten y los componentes de la interfaz de

usuario se le presenten a este de forma que

pueda percibirlos a traveacutes de los sentidos Es

decir estos datos no pueden pasar

desapercibidos para todos los sentidos del

usuario

Este principio es conformado por cuatro pautas

Pauta 1 Alternativas textuales

Todo contenido no textual puede convertirse en otros formatos que las personas

necesiten para evitar que la informacioacuten no sea percibida por el usuario De esta

manera se podraacute utilizar textos para describir imaacutegenes audio video u otros objetos

que lo requieran Incluso se adapta a lectores de pantalla

Pauta 2 Medios tempodependientes

Consiste en contenido dependiente del tiempo es decir audio y video donde puede

implementar el uso de transcripciones textuales subtitulado audiodescripciones o

interpretacioacuten en lengua de sentildeas para que sea accesible

Pauta 3 Adaptable

Consiste en que el contenido se pueda adaptar a diferentes formas sin perder

informacioacuten para cualquier tipo de usuario desde los que utilizan lectores de pantalla

hasta dispositivos moacuteviles tambieacuten software desactualizado

Tomada de httpticsaudioforosfileswordpresscom201002

2

Pauta 4 Distinguible

Se trata de que los usuarios vean y oigan el contenido completamente Puede

utilizarse praacutecticas como

Uso adecuado del color semaacutentico (color que transmite informacioacuten)

Relacioacuten adecuada de contraste y brillo

Tamantildeo del texto configurable

Formato del texto configurable

A continuacioacuten se da a conocer en detalle cada una de las pautas


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 siacutembolos o en un lenguaje maacutes

simple

El objetivo de las alternativas textuales es proporcionar

al usuario contenido equivalente y accesible en caso

de que no se pueda mostrar el otro tipo de

contenido no textual Es decir si en la paacutegina web se utiliza contenido no textual

como imaacutegenes audio video objetos Flash applets de Java 3D u otros se debe

asegurar que todos esos elementos esteacuten respaldados con una descripcioacuten textual

de su contenido para que las personas que no los puedan percibir no dejen de

recibir la informacioacuten que transmiten Esta alternativa estaraacute disponible para ser

usada por las tecnologiacuteas de apoyo como lectores de pantalla

3

Contenido no textual (Nivel A)

Todo contenido no textual que se presenta al usuario y tiene una alternativa textual

que cumple el mismo propoacutesito excepto en las situaciones enumeradas a

continuacioacuten

bull Controles entrada de datos

bull Contenido multimedia tempodependiente

bull Pruebas

bull Sensorial

bull Captcha

bull Decoracioacuten formato invisible

Q

iquestQueacute pretende Asegurar que cualquier tipo de informacioacuten transmitida mediante contenido no textual tenga uno textual Los lectores de pantalla y los navegadores web detectan la presencia de imaacutegenes y de contenido no textual a traveacutes de sus correspondientes etiquetas pero no interpretan su contenido Es decir pueden identificar una imagen pero no pueden interpretar la informacioacuten que esta proporciona Por ello es importante saber proveer siempre una alternativa textual que le permite a los navegadores y tecnologiacuteas de apoyo encontrar una descripcioacuten alternativa de los elementos

iquestA quieacuten puede beneficiar Puede beneficiar a las personas que no puedan percibir este tipo de contenido debido a limitaciones sensoriales o a aquellos que no cuenten con la tecnologiacutea apropiada para visualizar este tipo de contenido como por ejemplo personas ciegas con baja visioacuten o sordas tambieacuten a aquellos con velocidades bajas de conexioacuten (moacutedem de 56k) o cuyos navegadores no cuenten con los plugins adecuados (Flash Java audio video) Ademaacutes se beneficia el posicionamiento en los buscadores debido a que estos no pueden indexar contenido no textual

4

Buenas praacutecticas para cumplir con este criterio

Proporcionar alternativas textuales en las

imaacutegenes con el atributo alt Debe

proporcionarse un texto alternativo a las

imaacutegenes siempre que estas sean

utilizadas para dar informacioacuten y no como

elementos decorativos El texto alternativo

de una imagen se proporciona mediante el

atributo alt y brida contenido no textual (Nivel A) a traveacutes el atributo alt

Objetos Flash y applets

Cuando se incluyan elementos mediante la etiqueta ltobjectgt (imaacutegenes videos

aplicaciones etc) debe ofrecerse contenido alternativo dentro de la etiqueta que

seraacute visualizado por el navegador o detectado por la ayuda teacutecnica si el objeto no es

visualizado

Por ejemplo

Acaacute debe agregarse el contenido textual alternativo

ltobjectgt

En el caso de los applets de Java deben proporcionarse las alternativas textuales

mediante el atributo ltaltgt y dentro del cuerpo de la etiqueta ltappletgt

ltobject type=applicationx-shockwave-flash data=swfgrafica_estadisticasswf height=200 width=300gt

Imagen tomada de httpwwwflickrcom

5

Por ejemplo

ltapplet code=nombreclass width=300 height=300 alt=Applet Java

descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo

del appletltappletgt

Descripciones completas de las imaacutegenes cuando el texto alternativo no

resulte suficiente

Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta

suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo

longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina

independiente

En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten

larga de la imagen

Ejemplo




Ejemplo

Porcentaje de uso de los principales navegadores en Ameacuterica Latina

6

ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los

principales navegadores en Ameacuterica Latina

longdesc=browsers_statisticshtml gt

Controles de un formulario con su correspondiente etiqueta

La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los

controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta

relacioacuten recuerde que el valor de este atributo debe ser igual al -valor del atributo

id en el control del formulario y que este id debe ser uacutenico

Deben usarse las etiquetas ltlabelgt para los controles de formulario

lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio

file y password

No se debe usar para los siguientes elementos

ltbuttongt su contenido funciona como etiqueta

ltinputgt de tipo image el atributo alt funciona como etiqueta

ltinputgt de tipo submit y reset el atributo value funciona como etiqueta

Por ejemplo

ltform method=post action= id=formulariogtltfieldsetgt

ltlegendgtContaacutectenosltlegendgtltbrgt

ltlabel for=emailgtltpgtEmailltpgt

ltinput name= email tabindex=1 accesskey=e

id=emailgtltlabelgtltbrgt

ltlabel for=consultagtltpgtMotivo de la consultaltpgt

ltselect value=0 name=consulta tabindex=2 accesskey=c

id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption

value=becasgtBecasltoptiongt

ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup

7

label=Calendariogtltoption

value=inscripcionesgtInscripcionesltoptiongt

ltoption

value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt

ltpgtRelacioacuten con la Institucioacuten

ltlabel for=estudiantegtltlabelgtltpgt

ltinput name=estudiante tabindex=3 accesskey=d id=estudiante

type=checkboxgtEstudianteltlabelgtltbrgt

ltlabel for=ltpgtprofesorgtltpgt

ltinput name=profesor tabindex=4 accesskey=c id=profesor

type=checkboxgtProfesorltlabelgtltpgtltpgt

ltinput name=Enviar value=Enviar tabindex=5 accesskey=e

type=submitgt

ltfieldsetgtltbrgt

El Captcha

El Captcha es un tipo de test usado

en los sitios web para diferenciar

entre humanos y maacutequinas El maacutes

usado es incluir en una imagen

letras o frases con alguacuten tipo de

distorsioacuten en donde en teoriacutea solo

un humano podriacutea reconocerlas y

reescribirlas Se utiliza para evitar

que los robots de spam puedan

mandar spam al sitio web a traveacutes

de los formularios o para impedir

enviacuteos accidentales de un

diligenciamiento

Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen

8

Desafortunadamente este tipo de test tambieacuten impide el acceso a los usuarios que

no pueden ver la imagen por lo tanto cuando se use un Captcha debe

proporcionarse una alternativa sensorial como puede ser la reproduccioacuten en audio

y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo

Contenido decorativo a traveacutes de las hojas de estilo

Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y

otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con

el contenido

Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser

incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y

descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten ser

usadas siempre desde la hoja de estilos

Pauta 2 Medios Tempodependientes

Se entiende por medio tempodependiente a aquellos elementos que muestran su

contenido en funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video

son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada

instante de tiempo

Para hacer accesible la informacioacuten mediada por este tipo de contenido debe

asegurare el uso de transcripciones textuales subtitulado audiodescripciones o

interpretacioacuten en lengua de sentildeas

Observe algunos recursos para esta pauta

9

Solo audio y solo video (grabado) - Nivel A para contenido

solo audio grabado y contenido solo video grabado se

cumple lo siguiente excepto cuando el audio o el video es

un contenido multimedia alternativo al texto y estaacute

claramente identificado como tal

Solo audio grabado se proporciona una alternativa para los

medios tempodependientes que presenta informacioacuten

equivalente para el contenido solo audio grabado

Solo video grabado se proporciona una alternativa para los

medios tempodependientes o se proporciona una pista

sonora que presenta informacioacuten equivalente al contenido

del medio de solo video grabado

iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos

iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual

10

Subtiacutetulos (grabados) - Nivel A

Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido

multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia

alternativo al texto y estaacute claramente identificado como tal


iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos les impidan escuchar la pista de audio del material de video original puedan acceder a este contenido en forma de guiones de texto sin perder informacioacuten

iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos

11

Audiodescripcioacuten o medio alternativo (grabado) - Nivel A

Se proporciona una alternativa para los medios tempodependientes o una

audiodescripcioacuten para el contenido del video grabado en los multimedia

sincronizados excepto cuando este contenido es un contenido multimedia



iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales

iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa

12

Subtiacutetulos (directo) - Nivel AA

Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los

multimedia sincronizados


Audiodescripcioacuten (grabado) - nivel AA

Se proporciona una audiodescripcioacuten para todo el contenido de video grabado

dentro de contenido multimedia sincronizado

Imagen tomada de httpwwwdevorondinanet

iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio

iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten

13

Puta 3 Adaptable

Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una

disposicioacuten maacutes simple) sin perder informacioacuten o estructura

Toda la informacioacuten del sitio web debe estar disponible de manera que pueda ser

percibida por todos los usuarios independientemente de la forma en la que estos

accedan Por ejemplo las personas invidentes ingresan a un sitio web con lectores

de pantalla otros con dispositivos moacuteviles o incluso con software obsoleto Si todos

los datos del sitio estaacuten disponibles de modo que sean determinados mediante

software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual

auditiva taacutectil etceacutetera)

Informacioacuten y relaciones - Nivel A

La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la

presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto


iquestA quieacuten puede beneficiar A personas con diferentes limitaciones sensoriales al permitir que los distintos agentes de usuario interpreten el contenido de acuerdo a las necesidades del usuario

iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla

14

A continuacioacuten las buenas praacutecticas para cumplir con este criterio

Marcar correctamente la estructura del contenido html por medio de

encabezados

Los encabezados definen la estructura principal de un

sitio web dividieacutendolo en diferentes secciones y

subsecciones de contenido Usar los elementos de

encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las

diferentes secciones en las que se divide el sitio web de

manera jeraacuterquica

Marcar correctamente las tablas de datos

Ya se sabe que cuando una persona con

limitacioacuten visual navega por una paacutegina lo

hace mediante un lector de pantalla que es

un software que le permite escuchar el

contenido de la paacutegina Las tablas que

presentan datos relacionados pueden

ofrecer barreras de accesibilidad si no se

marca correctamente el contenido en esta

Para hacer maacutes accesible una tabla de

datos debe asociarse cada celda a su

columna de datos correspondiente (a

traveacutes del atributo lsquoheadersrsquo de cada

elemento lttdgt )

15

De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en

filas y columnas especificando a queacute columna corresponde cada dato leiacutedo

Adicionalmente debe agregarse un resumen de la tabla mediante el atributo

summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt

evitando siempre crear tiacutetulos falsos mediante otra etiqueta

Por ejemplo

lttable summary=En la siguiente tabla se presenta una relacioacuten de los

empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del

mes de julio de 2011ltcaptiongt

lttrgt

ltth id=columna_nombregtNombreltthgt

ltth id=columna_apellidosgtApellidosltthgt

lttrgt

lttrgt

lttd headers=columna_nombregtNombre persona 1lttdgt

lttd headers=columna_apellidosgtApellidos persona 1lttdgt

lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

Marcar correctamente los formularios

Los formularios son elementos muy

importantes en una paacutegina web pues

permite a los usuarios enviar informacioacuten y

al administrador le permite capturar

informacioacuten consignada por los visitantes

Con el fin de que todos puedan utilizar

correctamente los formularios en el sitio

web deben seguirse estas

recomendaciones para cumplir con las

pautas de accesibilidad referentes a los

formularios y a sus elementos

Es importante recordar que siempre se debe etiquetar expliacutecitamente los controles

que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza

para relacionar directamente el texto asociado a un campo de un formulario con el

campo en siacute Esta asociacioacuten le permite a los lectores de pantalla interpretar los

contenidos correctamente refiriendo cada etiqueta a su control correspondiente

Cada control (input) se identifica con el atributo id que debe coincidir con el

atributo for de la etiqueta label a la que va asociado y ser uacutenico

Para los campos de texto (text textarea y select) debe agregarse la etiqueta

label a la izquierda del control mientras que en los campos de tipo radio y

checkbox deberaacute agregarse a la derecha del campo Hay que tener en cuenta que

los campos de tipo submit reset button no requieren asociacioacuten mediante

label pues estaacuten impliacutecitamente etiquetados mediante sus atributos

17

Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo

agrupando controles de formulario seguacuten su funcioacuten mediante el elemento

FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la

agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se

pueden agrupar los elementos de un menuacute cuando este contenga una gran

cantidad de opciones y estas se puedan categorizar en este caso los deberaacute

agrupar utilizando el elemento OPTGROUP especificando una etiqueta para el grupo

de opciones con el atributo label en OPTGROUP

Como se sabe todos los usuarios no entran a una web con un navegador estaacutendar

incluso algunos ni siquiera utilizan un mouse lo que le obliga a crear accesos con el

teclado para que los visitantes puedan ingresar a todos los campos del formulario

con este dispositivo de entrada Para agregar la accesibilidad por teclado se tienen

principalmente dos opciones a traveacutes del atributo accesskey que genera un

medio de asequibilidad con una tecla determinada a cualquier campo del formulario

y con el elemento tabindex que es una variable que indica el orden que debe

seguir la tabulacioacuten

Por ejemplo



ltlabel for=emailgtltpgtEmail ltpgt

ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt



id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption

value=becasgtBecasltoptiongtltoption value=ofertagt

Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption

value=inscripcionesgtInscripcionesltoptiongt ltoption


18







type=checkboxgtProfesorltlabelgt


type=submitgt

ltpgtltpgtltfieldsetgtltbrgt

ltformgt

Secuencia significativa - Nivel A


Ordenar correctamente el contenido siguiendo una secuencia loacutegica

Si bien mediante las hojas de estilo se puede lograr el

posicionamiento visual de los elementos que componen

un sitio web y definir el orden visual y jeraacuterquico debe

tenerse en cuenta que para los usuarios que utilizan el

lector de pantalla la presentacioacuten del sitio no les ofrece

iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web

iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario


19

informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten

semaacutentica del contenido HTML

Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que

auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el

sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten

la lista de enlaces las tablas de datos los formularios y demaacutes elementos que

componen el sitio web

Caracteriacutesticas sensoriales - Nivel A


Las instrucciones proporcionadas para entender y operar el contenido no dependen

exclusivamente de las caracteriacutesticas sensoriales de los componentes como su

forma tamantildeo ubicacioacuten visual orientacioacuten o sonido

20

Distinguible

Facilitar a los usuarios ver y oiacuter el contenido incluyendo la

separacioacuten entre el primer plano y el fondo

Para garantizar que los usuarios puedan acceder y

comprender el contenido visual del sitio web debe prestaacutersele

especial atencioacuten a las siguientes praacutecticas





iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web

iquestQueacute pretende Que todos los usuarios puedan acceder al contenido web y comprender las instrucciones para usarlo incluso cuando no puedan percibir visualmente el contenido Debido a que algunas personas acceden a un sitio web con software lector de pantalla y estaacuten imposibilitados para percibir la forma y contenido visual de este sitio total o parcialmente hay que asegurarse de que estos usuarios puedan acceder a todo el contenido y comprender la forma en que funciona sin depender de caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido

Imagen tomada dehttpwwwflickrcom

21

Uso del color - Nivel A

El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar

una accioacuten solicitar una respuesta o distinguir un elemento visual


Proporcionar informacioacuten alternativa textual ademaacutes del color

Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario

como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten

Se debe asegurar que el mensaje no pierda sentido si no se puede percibir el color

Es decir en el mensaje de error que pueda aparecer a un visitante tras una accioacuten

equivocada en la paacutegina web como un registro fallido en un formulario

iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina pero debe tener claro que algunos usuarios no pueden diferenciar determinados colores o incluso percibirlos por lo que debe asegurarse de que ellos puedan interpretar la informacioacuten correctamente

iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color

22

ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno

diferente

En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la

atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten

semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda

percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera

que se pueda trasmitir esa informacioacuten al visitante por otros medios

ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt

ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor

pruebe con uno diferente ltpgtltdivgt

En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo

resaltaacutendola semaacutenticamente en la frase

Control del audio - Nivel A

Si el audio de una paacutegina web suena automaacuteticamente durante maacutes de tres

segundos se proporciona ya sea un mecanismo para pausar o detener el audio o

una manera para controlar el volumen del sonido que es independiente del nivel de

volumen global del sistema

Nota en la medida en que cualquier contenido que no satisfaga este criterio puede

interferir con la capacidad del usuario de emplear la paacutegina web en su conjunto

todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)

debe satisfacer este criterio

23


Apagar automaacuteticamente el sonido al cabo de tres segundos

Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran

maacutes de tres segundos el cual es tiempo suficiente para no generar interferencias

con el lector de pantalla

Proporcionar un medio para que los usuarios controlen el sonido

Si el sonido de la paacutegina no puede apagarse automaacuteticamente al cabo de tres

segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado

iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla

iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de

pantalla

24

que le permita controlar la reproduccioacuten del sonido


Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que

sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles

adecuados para hacerlo

Contraste (miacutenimo) - Nivel AA

La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste

de al menos 451 excepto en los siguientes casos

Textos grandes

Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste

de al menos 31

Incidental

Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la

interfaz de usuario que son simple decoracioacuten que no resultan visibles para nadie

o forman parte de una imagen que contiene otros elementos visuales significativos

no tienen requisitos de contraste

Luck

Logotipos

El texto que forma parte de un logo o nombre de marca no tiene requisitos de

contraste miacutenimo+

25



Asegurar que el contraste entre el primer plano y el fondo sea el adecuado

El color juega un papel importante en el disentildeo de un sitio web el uso adecuado de

las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil

de usar incluso por usuarios sin limitaciones visuales

La forma de controlar la combinacioacuten de colores en el sitio web es verificando la

relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre

el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste

superior a 500

iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color

iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten de ciertos colores o que les dificulta la lectura del texto si este no tiene el suficiente contraste con el fondo como por ejemplo personas con miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio

26

Existe una herramienta de software muy uacutetil que permite seleccionar los colores del

sitio web y analizar la diferencia de brillo y contraste Esta herramienta gratuita es

Contrast Colour Analyzer y se puede descargar desde la paacutegina del proyecto

httpwwwvisionaustraliaorgauinfoaspxpage=628

Cambio de tamantildeo del texto - Nivel AA

Por ejemplo

iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto

iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo

27

Imaacutegenes de texto - Nivel AA

Imaacutegenes de texto Si con las tecnologiacuteas que se

estaacuten utilizando se puede conseguir la presentacioacuten

visual deseada se utiliza texto para transmitir la

informacioacuten en vez de imaacutegenes de texto excepto

en los siguientes casos

Configurable La imagen de texto es visualmente

configurable seguacuten los requisitos del usuario

Esencial Una forma particular de presentacioacuten del texto resulta esencial para la

informacioacuten que se transmite

Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se

consideran esenciales

Las imaacutegenes transmiten informacioacuten importante a los usuarios y se sabe que

algunos de ellos no pueden percibirlas por lo que hay que ofrecer alternativas

textuales Pero en algunos casos es el mismo texto el que se presenta como

imagen como por ejemplo en logotipos botones documentos escaneados

banners capturas de pantalla etceacutetera

En estas situaciones las personas que tienen dificultades para percibir las

imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por

este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes como texto y utilizar

todas las posibilidades que ofrecen las hojas de estilo CSS para dar la apariencia

que se busca en el texto (siempre que resulte accesible)

28

En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como

en logos textos escaneados capturas de pantalla etc (excepto en los casos de

imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al

usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el

caso

REFERENCIAS

Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a

Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC

Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y

Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20

iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas

iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla

29

Control del documento

Autores

Nombre Cargo Dependencia Fecha

Ministerio de Tecnologiacuteas de la Informacioacuten y la

Comunicacioacuten y Programa Gobierno en Liacutenea

2011

Revisioacuten y ajustes

Luz Clarena Arias Gonzaacutelez

Comunicadora social -

Guionista liacutenea de produccioacuten

Centro Agroindustrial

Regional Quindiacuteo

22 de Agosto de

2012

Ana Mariacutea Mora Jaramillo

Comunicadora social - Liacuteder

guionistas liacutenea de produccioacuten



25 de agosto de

2012

2

Pauta 4 Distinguible

Se trata de que los usuarios vean y oigan el contenido completamente Puede

utilizarse praacutecticas como





A continuacioacuten se da a conocer en detalle cada una de las pautas


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 siacutembolos o en un lenguaje maacutes

simple

El objetivo de las alternativas textuales es proporcionar

al usuario contenido equivalente y accesible en caso

de que no se pueda mostrar el otro tipo de

contenido no textual Es decir si en la paacutegina web se utiliza contenido no textual

como imaacutegenes audio video objetos Flash applets de Java 3D u otros se debe

asegurar que todos esos elementos esteacuten respaldados con una descripcioacuten textual

de su contenido para que las personas que no los puedan percibir no dejen de

recibir la informacioacuten que transmiten Esta alternativa estaraacute disponible para ser

usada por las tecnologiacuteas de apoyo como lectores de pantalla

3




continuacioacuten



bull Pruebas

bull Sensorial

bull Captcha


Q



4














visualizado

Por ejemplo


ltobjectgt





5

Por ejemplo





resulte suficiente




independiente


larga de la imagen

Ejemplo




Ejemplo


6











file y password





Por ejemplo











7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

3




continuacioacuten



bull Pruebas

bull Sensorial

bull Captcha


Q



4














visualizado

Por ejemplo


ltobjectgt





5

Por ejemplo





resulte suficiente




independiente


larga de la imagen

Ejemplo




Ejemplo


6











file y password





Por ejemplo











7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

4














visualizado

Por ejemplo


ltobjectgt





5

Por ejemplo





resulte suficiente




independiente


larga de la imagen

Ejemplo




Ejemplo


6











file y password





Por ejemplo











7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

5

Por ejemplo





resulte suficiente




independiente


larga de la imagen

Ejemplo




Ejemplo


6











file y password





Por ejemplo











7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

6











file y password





Por ejemplo











7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

7



ltoption










type=submitgt

ltfieldsetgtltbrgt

El Captcha













diligenciamiento


8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

8








el contenido









instante de tiempo





9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

9















10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

10








11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

11









12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

12











13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

13

Puta 3 Adaptable
















14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

14



encabezados




















elemento lttdgt )

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

15






Por ejemplo




lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttrgt



lttrgt

lttablegt

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

16

























17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

17

















Por ejemplo












18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

18









type=submitgt


ltformgt












19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

19













20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

20

Distinguible













21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

21













22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

22


diferente




















23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

23











pantalla

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

24









Textos grandes


de al menos 31

Incidental





Luck

Logotipos



25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

25










superior a 500



26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

26






Por ejemplo



27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

27























28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

28





caso

REFERENCIAS







29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

29


Autores




2011







22 de Agosto de

2012






25 de agosto de

2012

Principio 1 Perceptible en Nivel AA Unidad 2

Documents

Transcript of Principio 1 Perceptible en Nivel AA Unidad 2