Clínica Accesibilidad Web / Lide-ar

Clínica de accesibilidad a los
contenidos en sitios Web.
Primeros Auxilios.
Esta obra está licenciada bajo la Licencia Creative Commons
Atribución-No Comercial-Compartir Igual 3.0 Unported. Para ver
una copia de esta licencia, visita
http://creativecommons.org/licenses/by-nc-sa/3.0/deed.es.

Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 2 de 89
Facultad de Ciencias Exactas y Tecnología
Autoridades
Decano
Ing. Sergio José Pagani
Vicedecana
Lic. Patricia Mónica Fernández
Secretario de Asuntos Administrativos
Ing. Leandro Díaz
Secretario de Gestión y Extensión
Ing. Carlos Rodríguez
Revista CET
Directora
Agrim. María Eugenia Marquetti
Departamento Ciencias de la Computación
Jefa de Departamento
Lic. María Isabel del Valle Mentz
Directora de carreras
Lic. María Griselda Luccioni
Equipo LIDE-ar (Laboratorio de Investigación, Desarrollo y
Extensión)
Coordinadora general
Ing. Ana Nieves del Valle Rodríguez
Coordinadora de Investigación
Lic. Ines Margarita Jaen
Coordinador de Eventos
Prog. Univ. Alvaro Gómez Cardozo
Estudiantes y Auxiliares estudiantiles
Casares, Ignacio

Primeros Auxilios.
Página 3 de 89
Dominguez, Victor Gerardo
Figueroa, Fernando
Paniagua, Paola
Rocabado, Pedro
Rossi, María Laura
Villatarco, Leonardo Maximiliano
Responsables de la publicación
Esp. Ing. Ana Nieves Rodríguez
Coordinadora General
LIDE-ar
Universidad Nacional de Tucumán
Diseño de Tapa
Esp- Arq. Angel Marcelo Costilla
Director del Instituto de Tecnología Arquitectónica
Facultad de Arquitectura y Urbanismo
Responsables de la Organización
LIDE-ar
Departamento Ciencias de la Computación
Revista CET
SIDETEC
Superior Gobierno de Tucumán

Primeros Auxilios.
Página 4 de 89
PRESENTACION
En consonancia con la Ley Argentina Nº 26.653 de Accesibilidad a
la Información en las Páginas Web, reglamentada por decreto
355/2013 actualmente vigente, se organiza la “Clínica de
accesibilidad a los contenidos en sitios Web. Primeros Auxilios”.

Primeros Auxilios.
Página 5 de 89
Este sólo es el inicio de una etapa que debemos afrontar
programadores, desarrolladores, creadores de
contenidos y todos los que de una u otra forma
dedicamos nuestro tiempo y esfuerzo al diseño Web.
Agradecemos la colaboración de toda la comunidad
universitaria
LIDE-ar
“El poder de la Web está en su
universalidad. El acceso de todo
el mundo con independencia de
su discapacidad es un aspecto
esencial”.
Tim Bernes- Lee – Creador de la WWW

Primeros Auxilios.
Página 6 de 89
Apartado 1: Guía Breve de Accesibilidad Web
¿Qué es la Accesibilidad Web?
Hablar de Accesibilidad Web es hablar de un acceso universal a la
Web, independientemente del tipo de hardware, software,
infraestructura de red, idioma, cultura, localización geográfica y
capacidades de los usuarios.
Aquellas personas que no estén familiarizados con los problemas
de accesibilidad relacionados con el diseño de páginas Web,
deben tener en cuenta que distintos individuos podrían registrar
inconvenientes o dificultades para operar en contextos diferentes
por ejemplo:
Pueden no ser capaces de ver, escuchar, moverse o pueden no ser
capaces de procesar algunos tipos de información fácilmente o en
absoluto.
Pueden tener dificultad en la lectura o comprensión de un texto.
Pueden no tener o no ser capaces de usar un teclado o un ratón.
Pueden tener una pantalla que sólo presenta texto, una pantalla
pequeña o una conexión lenta a Internet.
Pueden no hablar o comprender con fluidez el idioma en que esté
redactado el documento.
Pueden encontrarse en una situación en la que sus ojos, oídos o
manos estén ocupados u obstaculizados (Por ejemplo trabajando
en un entorno ruidoso)
Pueden tener una versión antigua del navegador, un navegador
completamente diferente, un navegador de voz o un sistema
operativo distinto.
Con esta idea nace la Iniciativa de Accesibilidad Web, conocida
como WAI (Web Accessibility Initiative).

Primeros Auxilios.
Página 7 de 89
El objetivo de WAI es facilitar el acceso de las personas con
capacidades diferentes, desarrollando pautas de accesibilidad,
mejorando las herramientas para la evaluación y reparación de
accesibilidad Web, llevando a cabo una labor educativa y de
concientización en relación a la importancia del diseño accesible
de páginas Web, y abriendo nuevos campos en accesibilidad a
través de la investigación en este área.
¿Para qué sirve?
La idea principal radica en hacer la Web más accesible para todos
los usuarios independientemente de las circunstancias y los
dispositivos involucrados a la hora de acceder a la información.
Partiendo de esta idea, una página accesible lo sería tanto para
una persona con capacidades diferentes, como para cualquier
otra persona que se encuentre bajo circunstancias externas que
dificulten su acceso a la información (en caso de ruidos externos,
en situaciones donde nuestra atención visual y auditiva no estén
disponibles, pantallas con visibilidad reducida, etc.).
¿Cómo funciona?
Para hacer el contenido Web accesible, se han desarrollado las
denominadas Pautas de Accesibilidad al Contenido en la Web
(WCAG), cuya función principal es guiar el diseño de páginas Web
hacia un diseño accesible, reduciendo de esta forma barreras a la
información.

Primeros Auxilios.
Página 8 de 89
Apartado 2: Legislación Argentina
La Ley Nº 26.378, aprobó la Convención sobre los Derechos de las
Personas con Discapacidad en procura de eliminar barreras que
impiden su participación plena y efectiva en la sociedad, en
igualdad de condiciones con los demás.
La Ley Nº 26.653 de Accesibilidad a la Información en las Páginas
Web, establece que el estado nacional junto a entidades privadas
concesionarias de servicios públicos, deberán respetar en los
diseños de sus páginas Web, normas y requisitos sobre
accesibilidad de la información a todas las personas con
discapacidad.
El objeto es garantizar la igualdad real de oportunidades y trato,
evitando todo tipo de discriminación.
Esta ley, también considera que la información de las páginas Web
pueda ser comprendida y consultada por usuarios que posean
diversas configuraciones en su equipamiento, o en sus programas.
En consecuencia, se debe tener en cuenta diferentes dispositivos
y software de navegación. Tal es el caso de teléfonos móviles,
iphones, tablets, y navegadores compatibles con diferentes
sistemas operativos, en sus diferentes versiones.
Ambas leyes fueron reglamentadas el 03 de Abril de 2013,
mediante del decreto 355/2013.
Las normas y requisitos de accesibilidad deberán ser aprobadas
por la OFICINA NACIONAL DE TECNOLOGÍAS DE INFORMACIÓN
(ONTI) de la Subsecretaria De Tecnologías de Gestión de la
Secretaria de Gabinete y Coordinación Administrativa de la
Jefatura de Gabiente de Ministros en un plazo máximo de Ciento
Ochenta (180) días a partir de la entrada en vigencia de la
reglamentación. Todo desarrollo de software o hardware

Primeros Auxilios.
Página 9 de 89
adquirido por el Estado Nacional deberá contemplar los requisitos
técnicos establecidos por la ONTI.
Los entes no estatales e instituciones referidos en la Ley 26.653,
deberán presentar una declaración jurada, en un plazo máximo de
DIECIOCHO (18) meses, a partir de la entrada en vigencia de la
reglamentación ante la Autoridad de Aplicación. En la que deben
manifestar, que cumplen con las normas y requisitos de
accesibilidad previstos en la norma, a los fines de obtener los
beneficios establecidos en la Ley1
.
ONTI
Esta Oficina implementa las estrategias de innovación informática
en la administración pública. Desarrolla sistemas que son
utilizados en procedimientos de gestión, fija los estándares que
deben utilizar los organismos públicos cuando incorporan nuevas
tecnologías, colabora con otras dependencias en la creación de
portales informativos y de gestión y promueve la
interoperabilidad de las redes de información de las instituciones
estatales.
El Centro de Referencia en Accesibilidad Web (CRAW) ha sido
creado en la ONTI con el objetivo de permitir que las páginas web
pertenecientes al Estado Nacional, puedan ser accedidas por un
mayor número de personas, independientemente de sus propias
limitaciones o de las derivadas de su entorno.
Entiéndase por Estado nacional los tres poderes que lo
constituyen, sus organismos descentralizados o autárquicos, los
entes públicos no estatales, las empresas del Estado y las
empresas privadas concesionarias de servicios públicos, empresas
1
Artículo 10, Ley 26.653: Los entes no estatales e instituciones referidos en los artículos
1º y 2º no podrán establecer, renovar contratos, percibir subsidios, donaciones,
condonaciones o cualquier otro tipo de beneficio por parte del Estado nacional si
incumplieren con las disposiciones de la presente ley.

Primeros Auxilios.
Página 10 de 89
prestadoras o contratistas de bienes y servicios, así como las
instituciones u organizaciones de la sociedad civil que sean
beneficiarias o reciban subsidios, donaciones o condonaciones por
parte del Estado o celebren con éste contrataciones de servicios.
Para alcanzar el objetivo enunciado, el CRAW validará el grado de
cumplimiento de estándares de accesibilidad web. Asimismo,
ofrecerá servicios de capacitación a la Administración Pública
Nacional y dispondrá de un observatorio tendiente al
cumplimiento de la legislación vigente en materia de la Sociedad
de la Información y accesibilidad web universal de las personas
con capacidades diferentes a fin de garantizar la igualdad de
oportunidades y la no discriminación.
La Secretaría de Gabinete, por Resolución 69/20112
se aprueba la
"Guía de Accesibilidad para Sitios Web del Sector Público
Nacional" por la cual se adoptan como normas técnicas las Pautas
de Accesibilidad al Contenido en la Web (WCAG) versión 1.0
emitidas por la WAI de la W3C. Otro punto importante es que en
el punto A4 dice: En Argentina, se considerarán accesibles los
sitios web gubernamentales que cumplan con las prioridades 1 y 2
de las WCAG 1.0, es decir, que alcancen el nivel "AA".
W3C - WAI ARIA
El Consorcio World Wide Web (W3C) es una comunidad
internacional donde las organizaciones Miembro trabajan
conjuntamente para desarrollar estándares Web. Uno de los
objetivos principales del W3C es hacer que los beneficios sociales
que aporta la Web estén disponibles para todo el mundo,
independientemente del hardware, software, infraestructura de
red, idioma, cultura, localización geográfica, o habilidad física o
mental.
2
http://www.infoleg.gob.ar/infolegInternet/anexos/180000-184999/184102/norma.htm

Primeros Auxilios.
Página 11 de 89
WAI (Web Accessibility Initiative) es el área experta del W3C
dedicada a la accesibilidad. Al igual que el resto de las áreas, su
trabajo se sustenta en grupos formados por personas de
organizaciones de todo el mundo y de todo tipo: industria,
organizaciones de personas con discapacidad, gobiernos,
universidades, centros de investigación, etc.
WAI-ARIA (ARIA: Accessible Rich Internet Application), es una
especificación técnica publicada por el Consorcio W3C que define
la forma de aumentar la accesibilidad de las páginas web, en
particular, al contenido dinámico y a los componentes de interfaz
de usuario. A partir de enero de 2011, fue seleccionada como
Candidata a Recomendación [8]. WAI-ARIA describe cómo añadir
semántica y otros metadatos al contenido HTML con el fin de
hacer que los controles de interfaz de usuario y el contenido
dinámico más accesible.

Primeros Auxilios.
Página 12 de 89
Apartado 3: Norma WCAG 2.0
Dentro de W3C, WAI posee carácter transversal dado la
importancia que la accesibilidad, como actividad, tiene en el
consorcio. WCAG WG es el grupo perteneciente a WAI –W3C que
se ocupa de los Contenido Web y tiene por objetivo establecer
recomendaciones, guías y técnicas para el desarrollo de sitios web
accesibles. Para alcanzar estas pautas, el W3C sigue un proceso
orientado al desarrollo de estándares de alta calidad basados en
el consenso. Este proceso, abarca desde su puesta en marcha en
los grupos de trabajo pasando por revisiones técnicas que
garantizan su idoneidad, hasta su aprobación final y publicación
como Recomendación W3C. Esta Recomendación final es lo que
conocemos normalmente como estándar.
WCAG 2.0 son las siglas en inglés de las pautas de accesibilidad
para contenido web versión 2, desarrolladas por el Grupo de
trabajo sobre contenido Web (WCAG WG) y se basan en las WCAG
1.0. Han sido diseñadas para ser aplicadas a diferentes tecnologías
web, y para ser verificables con pruebas automatizadas y
evaluación humana.
Proporcionan varios niveles de orientación. En el nivel más alto se
encuentran cuatro principios generales, por debajo de los
principios se encuentran doce pautas generales que proveen un
marco teórico que no se puede testear, por ende, constituyen el
cimiento para poder entender los criterios e implementar mejor
las técnicas propuestas.
Para cada pauta se proporcionan criterios de conformidad
verificables que permiten emplear las WCAG 2.0 en aquellas
situaciones en las que existan requisitos y necesidad de
evaluación de conformidad como: especificaciones de diseño,
compras, regulación o acuerdos contractuales. Para cumplir con

Primeros Auxilios.
Página 13 de 89
las necesidades de los diferentes grupos y situaciones, se definen
tres niveles de conformidad: A (el más bajo), AA y AAA (el más
alto).
Además se provee una amplia colección de técnicas suficientes y
recomendables. Fallos comunes documentados con ejemplos,
enlaces a recursos adicionales y código.
Principios generales
Las Pautas de accesibilidad se organizan en cuatro principios
básicos:
Perceptible
En esta etapa se evalúa si el sitio es comprensible.
• Las imágenes, proporcionan textos alternativos?
• Se adapta a la pantalla de diferentes dispositivos?
• Es distinguible?, cumple con una combinación de colores
adecuada?
El sitio no debe estar maquetado con tablas, este es uno de los
errores comunes que se encuentran al realizar un análisis.
Operable
Si se trabaja pensando en el usuario, se debe realizar un sitio web
que pueda ser manejable tanto para las personas con capacidades
diferentes, como para aquellas que no lo son y que están
acostumbradas a navegar y realizar todas las tareas por medio del
teclado (por ejemplo).
• Está habilitada la navegación por teclado?
• Se establece un tiempo suficiente para que el usuario lea y
comprenda la información?, Casos de este tipo son,
tiempo para emitir respuesta o comprender información
puesta en un scroll de noticias.

Primeros Auxilios.
Página 14 de 89
• El sitio contiene imágenes movedizas o destellos que
puedan causar ataques de epilepsia?
• El sitio contiene suficiente ayuda para ser navegado?
Posee, en el inicio, vínculos hacia el contenido principal y
hacia el contenido secundario de la página?
• Se tiene en cuenta la jerarquía de diferentes títulos?
Comprensible
• La información que se otorga es comprensible?, se
otorgan contenidos claros, simples y semánticamente
ricos?
• El texto es legible?, qué tipo de fuente utiliza?, qué
tamaño utiliza? Qué color de fuente utiliza?
• El texto es previsible?, se indican cambios en el contexto
en el caso de vínculos a páginas externas?
• El usuario tiene asistencia para la carga de datos, por
ejemplo en un formulario: se incluyen etiquetas
descriptivas?
Robusto
• Puede ser usado por una gran variedad de dispositivos? Se
ve igual con diferentes navegadores?, funciona en
diferentes sistemas operativos?, soporta tecnología
asistiva?
• En este punto es conveniente validar las gramáticas
formales y verificar los documentos utilizando los
validadores de la W3C.
Criterios de Comprobación
Cada pauta tiene asociado un conjunto de criterios de
comprobación. Son 62 criterios en total que se deben cumplir y

Primeros Auxilios.
Página 15 de 89
que tienen como características que son comprobables o
testeables.
Los criterios de comprobación están ordenados según su nivel de
cumplimiento asociado:
• El nivel 1 o “A” significa que el criterio cumple con los
requisitos mínimos.
• El nivel 2 o “AA” considera que el sitio cumple con
criterios de accesibilidad.
• El nivel 3 o “AAA” significa que el criterio ha sido
cumplido en su totalidad.
Cada criterio cuenta además con información sobre ejemplos,
errores comunes y un conjunto de técnicas para resolverlos.
También incluye documentación sobre errores comunes,
acompañado de ejemplos, hipervínculos a recursos y líneas de
código.
Técnicas suficientes y recomendables
Para cada una de las pautas y criterios de conformidad del propio
documento de la WCAG 2.0, el grupo de trabajo ha documentado
también una amplia variedad de técnicas. Las técnicas son
informativas y se agrupan en dos categorías: aquellas que son
suficientes para satisfacer los criterios de conformidad, y aquellas
que son recomendables. Las técnicas recomendables van más allá
de los requisitos de cada criterio de conformidad individual y
permiten a los autores afrontar mejor las pautas. Algunas de las
técnicas recomendables tratan sobre barreras de accesibilidad
que no han sido cubiertas por los criterios de conformidad
verificables. También se han documentado los errores frecuentes
que son conocidos3
.
3
http://www.sidar.org/traducciones/wcag20/es/

Primeros Auxilios.
Página 16 de 89
Apartado 4: Evaluadores de Accesibilidad en
la Web
Las herramientas de evaluación de accesibilidad Web son
programas de software o servicios en línea que ayudan a
determinar si un sitio Web cumple con las normas de
accesibilidad. Si bien, éstas herramientas pueden reducir
significativamente el tiempo y esfuerzo para evaluar los sitios
Web, ninguna de ellas puede determinar automáticamente la
accesibilidad de un sitios Web4
.
Si estas herramientas se usan en las distintas fases del desarrollo
web comenzando desde la etapa de diseño, implementación y
mantenimiento, pueden ayudar a sus usuarios a: prevenir de las
barreras de accesibilidad, reparar barreras encontradas, y mejorar
la calidad general de los sitios Web.
Muchos controles de accesibilidad requieren del "juicio humano"
y deben ser evaluados de forma manual utilizando diferentes
técnicas. En algunos casos, las herramientas de evaluación son
propensas a producir resultados falsos o engañosos, tales como la
“no identificación” o la “señal de código incorrecto”.
Los resultados de las herramientas de evaluación no deben ser
utilizados para determinar niveles de conformidad a menos que
sean operados por evaluadores experimentados que entienden
las capacidades y limitaciones de las herramientas de evaluación
automáticas.
Las Herramientas de evaluación de accesibilidad Web no pueden
determinar la accesibilidad de sitios web, sólo pueden ayudar a
hacerlo5
.
4
http://www.w3.org/WAI/ER/tools/
5
http://www.w3.org/WAI/eval/selectingtools

Primeros Auxilios.
Página 17 de 89
La WAI promueve el desarrollo y la evolución de las herramientas
de evaluación de accesibilidad Web, mantiene una lista extensa de
herramientas de evaluación, reparación y transformación pero no
avala ni promueve ningún proveedor o instrumento único.
Consideraciones para la selección de las
herramientas de evaluación
Como se dijo anteriormente, las herramientas de evaluación de
accesibilidad Web se pueden utilizar en todas las etapas de
desarrollo de sitios Web.
En la etapa de diseño, pueden hacer uso de herramientas que
ayuden a comprender como está la estructura del sitio, la
navegación, o look-and-feel, respecto a los requisitos de
accesibilidad.
En la fase de aplicación, los desarrolladores pueden usar
herramientas que ayuden a evaluar la accesibilidad del código
subyacente que es generado por herramientas de creación Web
(caso de editores o sistemas de gestión de contenidos).
Los autores de contenido Web, gestores de proyectos, y otros
tipos de desarrolladores de sitios web requieren herramientas de
evaluación que ayudan a cumplir con sus respectivas tareas.
Existen muchos proyectos que desarrollan plug-in en ayuda a la
creación de contenidos accesibles.
Dependiendo del tipo de organización se define la estructura del
trabajo a realizar. Cuando una organización es grandes o cuando
participan varios desarrolladores web con diferentes roles (por
ejemplo: diseñadores, programadores, autores de contenidos,
revisores de control de calidad, u otros) se pueden utilizar una
combinación equilibrada de herramientas de evaluación, para
atender las necesidades de los diferentes roles de usuario a través
de las etapas de desarrollo.

Primeros Auxilios.
Página 18 de 89
En cuanto a la evaluación manual, la verificación del
funcionamiento de un sitio web se realiza bajo distintas
circunstancias o simulando diferentes escenarios. Esta simulación
sirve para comprender las dificultades que afrontan las personas
con capacidades diferentes, o personas mayores, al navegar un
sitio web. Se pueden utilizar ayudas técnicas específicas de ciertas
discapacidades como lectores de pantalla, trackboll, etc.
Otra prueba manual importante, es la de interactuar con
distintos navegadores y dispositivos, etc.
Se debe realizar una revisión del código HTML y CSS utilizado en el
sitio web. Se debe tener en cuenta que un código ordenado
permite incrementar la accesibilidad al sitio. La separación de
formato CSS y contenido HTML, es conveniente a la hora de
plantear o evaluar un sitio web, no sólo para personas con
capacidades diferentes o adultos mayores, sino para el caso de
personas que poseen conexiones lentas.
La combinación de métodos de revisión automática y manual se
debe complementar con la experiencia de usuarios para observar
de forma directa las dificultades con las que se encuentran al
navegar por el sitio web analizado.
WAI, proporciona una lista ordenada de herramientas de
evaluación de accesibilidad6
(en este manual sólo se citarán
algunas):
AChecker7
: Se utiliza para evaluar el contenido HTML de un sitio,
se puede evaluar una página o un trozo de código HTML. Produce
un informe de todos los problemas de accesibilidad encontrados.
Identifica 3 tipos de problemas:
6
http://www.w3.org/WAI/ER/tools/complete
7
http://achecker.ca/checker/index.php

Primeros Auxilios.
Página 19 de 89
Problemas conocidos: Se trata de problemas que se han
identificado con certeza como barreras de accesibilidad. Debe
modificar su página para solucionar estos problemas.
Posibles problemas: Se trata de problemas que se han
identificado como obstáculos posibles, pero requieren de un ser
humano para tomar una decisión. Es probable que tenga que
modificar su página para solucionar estos problemas.
Los problemas potenciales: Son problemas que AChecker no
puede identificar, que requieren de una decisión humana. Es
posible que tenga que modificar su página para estos problemas,
pero en muchos casos, sólo tendrá que confirmar que el problema
descrito no está presente.
AccessColor8
Prueba el contraste y brillo entre el primer plano y el
fondo de todos los elementos en el DOM. Evalúa si se proporciona
suficiente contraste de color entre el primer plano y color de
fondo.
AccesibilityCheck (versión 1.0)9:
Evalúa la página contra un
subconjunto de directrices WAI.
Accessibility color wheel (version 1.0)10
: Esta herramienta ayuda
a mejorar la accesibilidad del sitio mediante el análisis del
contraste de colores. Muestra cómo una persona daltónica lo
verá. Simula tres tipos de deficiencias de la visión: deuteranopia,
protanopia y tritanopia. Se basa en la Rueda de Color 409611
.
Si el contraste entre los colores es adecuado, aparecerá una
marca de verificación.
También es posible analizar si los colores son apropiados en el
caso de visión normal.
8
http://www.accesskeys.org/tools/color-contrast.html
9
http://www.etre.com/tools/accessibilitycheck/
10
http://gmazzocato.altervista.org/colorwheel/wheel.php
11
http://www.ficml.org/jemimap/style/color/wheel.html

Primeros Auxilios.
Página 20 de 89
HERA 12
: Ha sido desarrollado por Carlos Benavídez, con la
colaboración de Emmanuelle Gutiérrez y Restrepo y Charles
McCathie Nevile, especialmente para la Fundación Sidar.
Disponible en castellano.
Es una utilidad para revisar la accesibilidad de las páginas web de
acuerdo con las recomendaciones de las Directrices de
Accesibilidad para el Contenido Web 1.0 (WCAG 1.0). Realiza un
análisis automático previo de la página e informa si se encuentran
errores (detectables en forma automática) y qué puntos de
verificación de las pautas deben ser revisados manualmente.
La revisión manual es imprescindible para comprobar realmente si
la página es accesible. Para poder llevar a cabo esta verificación
manual es necesario conocer las directrices de accesibilidad, saber
cómo utilizan los usuarios las ayudas técnicas y tener alguna
experiencia en diseño y desarrollo de páginas web.
HERA facilita la revisión manual proporcionando información
acerca de los elementos a verificar, instrucciones sobre cómo
realizar ese control y dos vistas modificadas de la página (una en
modo gráfico, otra del código HTML) con los elementos más
importantes destacados con iconos y colores distintivos.
Un formulario permite modificar los resultados automáticos,
agregar comentarios a cada punto de verificación e indicar el
nombre del revisor. También es posible generar un informe final
sobre la revisión, para imprimir o descargar, en diversos formatos
(XHTML, RDF y PDF).
Juicy Studio13
: Analizador CSS. Prueba la validez CSS contra el
servicio de validación W3C. Realiza una prueba de contraste de
color, y una prueba para asegurar de que el tamaño de las mismas
se especifican en unidades relativas de medición. Si el CSS se
12
http://www.sidar.org/hera/
13
http://juicystudio.com/services/csstest.php

Primeros Auxilios.
Página 21 de 89
especifica mediante una dirección URL , se carga en el área de
texto para ofrecer una opción de hacer cambios a las pruebas sin
tener que volver a cargar.
TAW3 http://www.tawdis.net. TAW es una herramienta que
permite medir la accesibilidad de un sitio web según las reglas
definidas por la WAI de forma integral y global a todos los
elementos y páginas que lo componen, dividido en tres niveles.
TAW distingue entre dos tipos de problemas de accesibilidad:
Problemas de tipo automático: son aquellos que pueden ser
reconocidos como tales por la aplicación.
Problemas de tipo manual: son aquellos problemas que requieren
la verificación del usuario y dependen de condiciones no
comprobables por el programa.
Es una herramienta online complementada con una aplicación
para Firefox que sirve para medir la accesibilidad de la web que se
está visitando, configurable desde el menú contextual.
WAVE (Web Accessibility Evaluation Tool)14
: Servicio libre
desarrollado por WebAIM. Este proyecto es impulsado por
MOZILLA y posee una barra de herramientas para instalar en
Firefox.
Ilustración 1: WAVE toolbar
WAVE es una herramienta que ayuda a los desarrolladores web a
hacer que sus contenidos sean más accesibles.
WAVE hace referencia a que es una herramienta de ayuda y
recuerda que solo un ser humano es capaz de determinar la
verdadera accesibilidad. Aunque, aclara, WAVE puede ayudar a
14
http://wave.webaim.org

Primeros Auxilios.
Página 22 de 89
evaluar la accesibilidad de un sitio web. La ausencia de errores NO
significa que su página sea accesible.
En el informe de resultado muestra con iconos ROJOS que indican
errores de accesibilidad. VERDES indican características de
accesibilidad. Los otros indicadores muestran otros elementos
que debe revisar el desarrollador.
BARRA AIS: La barra de herramientas de accesibilidad web ha sido
desarrollada por el equipo de Accessible Information Solutions
(AIS) del National Information and Library Service (NILS), Australia.
La barra ha sido traducida por Fundosa Teleservicios (Fundación
ONCE), Madrid, España.
Ilustración 2: Barra de herramientas AIS
La Barra de Herramientas de Accesibilidad Web se ha desarrollado
para facilitar el examen manual de diversos aspectos de la
accesibilidad de las páginas Web. Consiste en una serie de
funciones que ayudan a:
Identificar los componentes de una página web, por ejemplo:
• Muestra todos los elementos de encabezado en la página
actual (h1-h6)
• Muestra los elementos de las listas ordenadas (<ol>), no
ordenadas (<ul>) y de definiciones (<dl>) de la página
actual.
• Muestra elementos <table>, <th> y <td> en la página
actual juntos con los atributos recomendados para el
etiquetado de tablas de datos simples (summary, scope).
• Facilitar el uso de aplicaciones en línea proporcionadas
por terceros: por ejemplo: Enviar la URL de la página

Primeros Auxilios.
Página 23 de 89
actual a la herramienta de comprobación de accesibilidad
TAW
• Comprobar el código HTML de la página (o páginas) actual
con el validador HTML del W3C.
• Comprobar la codificación CSS en la página actual con el
Validador CSS del W3C,
• Simular la experiencia de diferentes tipos de usuarios.
• Contraste reducido: Coloca sobre la página actual una
máscara en forma de imagen que permite al usuario
reducir la opacidad (30%, 60%, 90%) para simular la
reducción en la sensibilidad al contraste que ocurre
progresivamente con la edad.
• Escala de grises: Simulación de cómo se ve la página en
una pantalla de blanco y negro.
• Daltonismo: Coloca sobre la página actual una máscara en
forma de imagen que altera la paleta de colores de la
página para simular la paleta típica visible por una
persona con deficiencia de percepción de color rojo-
verde.
• Proporciona enlaces a referencias y recursos de
información adicional
WINGUIDO
El programa Winguido no es un lector de pantalla igual a otros
existentes en el mercado como JAWS, NVDA, HAL, WINDOWEYES,
Supernova, etc. sino un programa multifunción que en
consecuencia, no lee a la persona ciega en cada momento toda la
información que aparece en la pantalla de su ordenador, sino que
le presenta con una estructura simple, cómoda e intuitiva aquéllos
elementos que necesita para la realización, en cada momento, de
unas funciones determinadas.

Primeros Auxilios.
Página 24 de 89
Se pueden diferenciar las funciones que realiza Winguido en tres
grupos diversos: Las funciones que pertenecen por sí mismas al
manejo de Windows que, aunque podrían ser efectuadas a través
de un lector de pantalla, Winguido permite llevarlas a cabo con
una estructura mucho más fácil y sencilla, y aquéllas otras que son
específicas de este programa, y, por último, aquéllas otras que no
son propiamente funciones relacionadas con el ordenador, sino
servicios útiles para las personas ciegas.
NVDA: NVDA es un lector de pantallas para Microsoft Windows
gratuito. Es un proyecto de software libre, por lo que también está
disponible el código fuente del programa de forma gratuita.
Este lector de pantallas posee una ventaja muy importante frente
otros lectores de pantalla: se puede ejecutar directamente desde
una memoria USB sin tener que instalarlo.
La mayoría de los comandos de NVDA consisten en pulsar la tecla
modificador de NVDA junto con una o más teclas. Por defecto, la
tecla modificadora de NVDA es la tecla INSERT (INS), pero se
puede configurar para que sea la tecla CAPS LOCK (BLOQ MAYS).
En Manual de NVDA está disponible un manual de NVDA en
castellano.

Primeros Auxilios.
Página 25 de 89
Apartado 5: Ejercitación – Estructura HTML5
Se puede dividir el contenido de una página web en varias
categorías que, en su mayor parte, no son novedades de HTML5,
pero que ayudan a entender cómo se organiza internamente la
información: Metatags, Flujo, Secciones, Títulos, Textos,
Contenidos embebidos, Contenidos interactivos
Estas categorías son útiles a la hora de agrupar elementos dentro
de una página. Por ejemplo, la categoría de información de flujo
describe todos los elementos que se pueden utilizar en el cuerpo
de una página, pero se puede subdividir el contenido de flujo en
categorías más pequeñas, como títulos o textos.
A la información que establece el comportamiento del resto del
contenido de la página se le denomina metatags. Los metatags se
pueden utilizar también para establecer la relación entre este
documento y otros documentos.
Un ejemplo obvio de metatags es lo que aparece dentro de los
elementos <meta>, que suelen contener una descripción de la
información contenida dentro de la página, o palabras clave y que
los motores de búsqueda utilizan para clasificar las páginas
Los metatags se ubican en el <head>
• Conjunto de caracteres: <meta charset=“UTF-8”>
• Autor del documento: <meta name=“author”
content=“Juan Perez”>
• Descripción: <meta name=“description”
content=“documento inicial para la creación de sitios web
accesibles”>
• Keywords: <meta name=“keywords” content= “html5,
tags, css3, curso”>
Dentro del flujo se incorporan etiquetas utilizadas para definir
contenidos, por ejemplo, <p>, <h1>, <ol>, <table>, etc.

Primeros Auxilios.
Página 26 de 89
El contenido de flujo normalmente es un texto o un archivo
insertado, como una imagen o un vídeo.
En esta categoría se encuentran: <article>, <aside>, <audio>,
<canvas>, <hgroup>, etc
Actualmente se incluyen cuatro elementos: <article>, <aside>,
<nav> y <section>.
El W3C define el contenido de Secciones como aquellos
elementos que “definen el alcance de cabeceras y pie de página”.
El contenido de las secciones es un subconjunto del contenido de
flujo. Los títulos contienen todos los elementos de encabezado
que se detallan en otro apartado: <h1> -<h2>. HTML5 incorpora el
elemento <hgroup>, pensado para agrupar dos o más títulos. El
contenido de titulares forma parte del contenido de flujo. Engloba
todo el texto del documento, incluyendo los elementos
delimitadores de texto dentro de los párrafos. El contenido de
texto es un subconjunto del contenido de flujo.
Contenidos embebidos:
Los contenidos embebidos son aquellos que se importan de otros
recursos dentro de la página, como imágenes, vídeos o archivos
para descargar. Uno de los elementos básicos, como es la etiqueta
<a> (utilizada en los hipervínculos), se la considera un elemento
interactivo.
Otros elementos han sido creados específicamente para dar
cabida a la interacción con el usuario, y también se incluyen en
esta categoría. Por ejemplo, elementos <textarea> o <button> que
se utilizan en los formularios.

Primeros Auxilios.
Página 27 de 89
Elementos de HTML5
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>HTML5-LIDE-ar</title>
</head>
<body>
<header>
<p>HEADER</p>
<hr>
<header>
<nav>
<aside>
<footer>
<article>
<section>

Primeros Auxilios.
Página 28 de 89
<nav>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="objetivos.html">Objetivos</a></li>
<li><a href="nosotros.html">Quienes somos?</a></li>
<li><a href="investiga.html">Investigación</a></li>
</ul>
</nav>
</header>
<hr>
<aside>
<p>ASIDE</p>
<p>el <b>aside</b> es la parte lateral de la página. Se
puede incorporar un submenu, buscador, formulario de
contacto, mapa del sitio, etc.</p>
</aside>
<hr>
<section>
<p>SECCION</p>
<p>un section es para dividir la pagina por
<b>secciones</b> y cada sección dedicada a un determinado
tema</p>
<article>
<hr>
<p>ARTICLE</p>
<h2>Esta es la parte mas importante del sitio</h2>
<p>En el <b>article</b>, se escribe la informacion mas
importante. Puede tener header y footer, sin estropear el
SEO.</p>
</article>
</section>
<hr>

Primeros Auxilios.
Página 29 de 89
<footer>
<p>FOOTER</p>
<p>Derechos reservados</p>
<p>Informacion de contacto</p>
</footer>
</body>
</html>
El elemento <header>..</header> representa un grupo de
artículos introductorios o de navegación. El elemento
<nav>..</nav> representa una sección con links de navegación.
Generalmente se usa para realizar un menú de navegación. El
elemento <footer>..</footer> representa el pié de una página,
con información acerca de la página/sección que poco tiene que
ver con el contenido de la página, como el autor, el copyright o el
año.
La especificación del W3C explica que “el elemento header
representa un grupo de textos de presentación o ayudas a la
navegación”. La especificación indica también que “el elemento
header por lo general debe contener la cabecera de sección (un
elemento h1-h6 o un elemento hgroup), pero no es obligatorio. El
elemento header puede utilizarse también como contenedor de
una tabla de secciones a modo de índice de contenidos, un
formulario de búsqueda o cualquier tipo de logos de interés”
Article
Artículo representa un componente de una página que consiste en
una composición autónoma en un documento, página, aplicación,
o sitio web con la intención de que pueda ser reutilizado y
repetido.
Podría utilizarse en los artículos de los foros, una revista o el
artículo de un periódico, o cualquier otro artículo independiente

Primeros Auxilios.
Página 30 de 89
del contenido. Pueden ser anidados, como los comentarios de un
blog.
Seccion
Se utiliza para representar una sección general dentro de un
documento o aplicación, como un capítulo de un libro. Puede
contener subsecciones
Aside
Representa una sección de la página que abarca un contenido
relacionado con el contenido que lo rodea, por lo que se le puede
considerar un contenido independiente.
Este elemento puede utilizarse para efectos tipográficos, barras
laterales, elementos publicitarios, para grupos de elementos de la
navegación, u otro contenido que se considere separado del
contenido principal de la página.
<audio> y <video>
Ambos son nuevos elementos que permiten incorporar un
contenido multimedia de sonido o de vídeo, respectivamente.
Es una de las novedades más importantes e interesantes en
HTML5, ya que permite reproducir y controlar vídeos y audio sin
necesidad de plugins como Flash.
El comportamiento de estos elementos multimedia es como el de
cualquier elemento nativo, y permite insertar en un video, enlaces
o imágenes, por ejemplo.
Youtube, ya ha anunciado que deja Flash y comienza a proyectar
con HTML5.
<embed> y < canvas>
Embed: Se emplea para contenido incrustado que necesita plugins
como el Flash. Es un elemento que ya reconocen los navegadores,

Primeros Auxilios.
Página 31 de 89
pero ahora al formar parte de un estándar, no habrá conflicto con
<object>.
Canvas: Este es un elemento complejo que permite que se
generen gráficos al hacer dibujos en su interior.
Geolocalización
La geolocalización es la forma de detectar donde se encuentra el
dispositivo. Para saber la ubicación, utiliza la dirección IP, la
conexión de red inalámbrica, la torre de telefonía móvil por la que
habla el teléfono móvil (celular), o GPS específicos que reciben las
coordenadas de longitud y latitud de satélites. Trabaja con
JavaScript.
Consideraciones de accesibilidad
Un sitio web bien estructurado facilita la actividad de lectores de
pantalla. Recuerde que los navegadores “leen” línea por línea y
dibujan en la pantalla del navegador el contenido de la página.
A quién beneficia?
Una página bien estructurada beneficia a personas ciegas, a
quienes tienen dificultades cognitivas, a personas con problemas
motrices y a todos los usuarios en general.
Es posible navegar por la página de sección en sección mediante el
uso de teclado. Facilita la modificación y reuso, o sea que
beneficia tanto a desarrolladores como a empresarios.
DOM
HTML 5 es una colección de elementos individuales. Cuando los
navegadores muestran la página, construyen un “Modelo de
Objeto de Documento” (Document Object Model - DOM). Esta
colección de objetos representan los elementos del HTML en la
página. Cada elemento - <p>, es representado en el DOM por un

Primeros Auxilios.
Página 32 de 89
objeto diferente. Todos los objetos DOM comparten
características comunes.
Existen cuatro técnicas básicas para saber cuando un navegador
soporta una de estas características particulares, desde las más
sencillas a las más complejas.
Comprobar si determinadas propiedades existen en objetos
genéricos o globales. Ejemplo: comprobar soporte para la
“Geolocalización”.
Crear un elemento, luego comprobar si determinadas
propiedades existen en ese elemento. Ejemplo: comprobar
soporte para canvas.
Crear un elemento, comprobar si determinados métodos existen
en ese elemento, llamar el método y comprobar los valores que
devuelve. Ejemplo: comprobar qué formatos de video soporta.
Crear un elemento, asignar una propiedad a determinado valor,
entonces comprobar si la propiedad mantiene su valor. Ejemplo:
comprobar que tipo de <input> soporta.
El World Wide Web
Consortium (W3C),
decidió crear un
modelo de objetos
único, el DOM, para
que todos los
fabricantes pudieran
adoptarlo, facilitando
la compatibilidad plena
entre ellos.

Primeros Auxilios.
Página 33 de 89

Primeros Auxilios.
Página 34 de 89
Apartado 6: Ejercitación – Tipo de elemento:
CSS3 básico
Las hojas de estilo sirven para dar presentación con estilo a una
página web, es la forma en que se verán en pantalla. W3C ha
promovido activamente el uso de hojas de estilo en la web. La
Actividad de Estilo ha producido varias Recomendaciones del W3C
(CSS1, CSS2, XPath, XSLT). CSS en especial se aplica ampliamente
en los navegadores.
Uniendo hojas de estilo para documentos estructurados en la
Web (por ejemplo, HTML), los autores y los lectores pueden influir
en la presentación de los documentos sin sacrificar la
independencia del dispositivo o la adición de nuevas etiquetas
HTML.
La forma más fácil de empezar a experimentar con las hojas de
estilo es encontrar un navegador que soporte CSS. Las discusiones
sobre las hojas de estilo se llevan a cabo en la lista de correo
www-style@w3.org y
comp.infosystems.www.authoring.stylesheets.
El grupo de W3C que trabaja en actividades respecto de los estilos
también está desarrollando XSL, que consiste en una combinación
de XSLT y "Objetos de formato" (XSL-FO).
Incorporando estilos a la página realizada en el apartado anterior.
/*limpiar codigo*/
Estilo.css
*{
border:0;
margin:0;
padding:0;
}

Primeros Auxilios.
Página 35 de 89
/*cuerpo*/
body {
padding-left: 0em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: #0080C0 }
/* Acomodar bloques*/
header, section#contenedor, footer {
margin: 0 auto;
max-width: 90%;
}
/*navegacion*/
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
nav a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }

Primeros Auxilios.
Página 36 de 89
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
/*formato a secciones*/
section#contenido, aside{
border-radius: 0.5em;
display: inline-block;
margin: 0 auto;
max-width: 100%;
padding: 0.25em;
vertical-align: top;
width: 60%;
}
article#comentario {
border-radius:0.5em;
background: #FF8040;
margin: 0.5em;
padding: 0.5em;
text-align: left;
width: 95%;
}
aside{
width: 35%;
background:#408080;
}
footer{
color: #FFF;

Primeros Auxilios.
Página 37 de 89
font-size: 0.85em;
padding: 0.75em 0;
background:#408080;
width: 100%;
}

Primeros Auxilios.
Página 38 de 89
Títulos de páginas
Título de la página
Criterio 2.4.2 (WCAG)15
: La intención de este Criterio es ayudar a
los usuarios a encontrar contenidos y orientarse dentro de él,
garantizando que cada página Web tiene un título descriptivo. Los
títulos identificarán la ubicación actual. Cuando los títulos
aparecen en los mapas de sitio o en una lista de resultados de
búsqueda, los usuarios pueden identificar rápidamente el
contenido que necesitan.
Los títulos de página son de particular importancia para ayudar a
que la gente sepa en dónde está y para que pueda moverse entre
las páginas abiertas en su navegador (pestañas). Lo primero que
los lectores de pantalla “leen” cuando el usuario va a una página
Web diferente, es el título de la página.
¿Qué hacer?
• Observar el título de la página (o escuchar con un lector
de pantalla).
• Observar títulos de otras páginas dentro del sitio web.
Lo que hay que comprobar:
Compruebe que el título es adecuado y que describe brevemente
el contenido de la página.
15
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-
title.html

Primeros Auxilios.
Página 39 de 89
Compruebe que el título sea diferente de otras páginas en el sitio
web. Y que sea distinguible respecto de otras páginas en sitios
diferentes.
Consejos:
La mejor práctica para títulos es establecer primero la
información de identificación única e importante dentro del sitio
Web.
Ejemplo:
Títulos pobres:
• Bienvenido a la página principal de Acme Web Solutions,
Inc.
• Acme Web Solutions, Inc. | Acerca de Nosotros
• Acme Web Solutions, Inc. | Contáctenos
• Acme Web Solutions, Inc. | Historia
Mejores títulos de la página:
• Página de inicio Acme Web Solutions
• Acerca de Acme Soluciones Web
• Contactar Acme Soluciones Web
• Historia de Acme Soluciones Web

Primeros Auxilios.
Página 40 de 89
Heading (títulos en el contenido)
Por: Fernando Gastón Figueroa
_ Tiene 6 niveles de título (heading) que van disminuyendo de
tamaño de la siguiente manera:
_ Se los agrupa mediante hgroup
Imagen 1: Codificación HTML - niveles de títulos

Primeros Auxilios.
Página 41 de 89
Imagen 2: Niveles de título en el navegador
Para qué sirven?
Los títulos ayudan a los usuarios a entender qué información
contienen las páginas y cómo está organizada.
Cuando los títulos son claros y descriptivos, los usuarios pueden
encontrar más fácilmente la información buscada y entender la
relación entre las distintas partes del contenido.
¿Quién se beneficia?
Todos los usuarios pueden identificar rápida y fácilmente si la
información contenida en la página es relevante para sus
necesidades.
Las personas con deficiencias visuales se benefician al poder
diferenciar el contenido cuando tienen abiertas varias páginas
web en simultáneo.
Las personas con dificultades cognitivas, con limitada capacidad
de memoria de corto plazo y dificultades de lectura, también se

Primeros Auxilios.
Página 42 de 89
benefician con la posibilidad de identificar el contenido a través
de su título.
Cómo hacerlo?16
• En todas las páginas debe haber por lo menos un heading
de nivel 1 o título de nivel 1.
• Todo el texto que se parece a un título deberá ser
marcado como tal, mediante <hn>…</hn>.
• Todo el texto que está marcado como un título, es en
realidad una sección de encabezado conceptual.
• La jerarquía de títulos (heading) es significativo. Lo ideal
sería que la página comienza con un "H1" - que es
generalmente similar al título de la página - y no se salte
los niveles, sin embargo, estos no son requisitos
absolutos.
Chequeando los headings
Los siguientes controles proporcionan instrucciones con
diferentes navegadores para lograr un sitio bien estructurado:
• Realizar un resumen de headings con vínculos hacia
contenidos (como tabla de contenidos o esquema de
documentos)
Esquema de títulos:
En cualquier navegador, puede abrir el Validador HTML de W3C.
1. En el campo Dirección, escriba el URI (www.w3.org).
2. Haga clic en el enlace “Más opciones”.
3. Seleccione la casilla Esquema.
4. Haga clic en el botón Comprobar. Aparece una página de
resultados: [Válido] o [No válido].
16
http://www.w3.org/WAI/eval/preliminary.html#headings

Primeros Auxilios.
Página 43 de 89
5. En la página de resultados, en la parte superior, al final de
"Saltar a:" haga clic en el enlace de esquema del texto.
Controles no visuales:
• ¿Hay algo ahí? Si no hay texto entre "A continuación se
muestra un resumen de este documento, generado
automáticamente a partir de las etiquetas de encabezado
(<h1> través <h6>.)" Y "Si esto no se parece a un esquema
real de ..." significa que no hay títulos (headings)
marcados en la página.
• ¿El esquema se inicia con [H1] y sigue una jerarquía
significativa? (Esto no es necesario, pero muy
recomendable.)
Las inspecciones visuales: Compare el esquema del
documento con la representación visual de la página.
• Las “cosas” que se ven como títulos en el contenido, son
las indicadas en el esquema del documento?
• ¿Hay cosas en el esquema del documento que no son
realmente títulos?
Marcado de títulos en la página:
Abrir la herramienta de evaluación de accesibilidad web: WAVE.
Escriba la dirección del sitio web, después de "Escriba la dirección
URL del sitio web que desea evaluar:"
• Haga clic en el botón "WAVE esta página!". Su página web
se mostrará en el navegador con pequeños iconos.
• Todo lo que es un título funcional debe tener un icono
antes de él ( [imagen] , [imagen] , ...).
• Cualquier cosa que no es un título funcional, no debe
tener un icono antes.

Primeros Auxilios.
Página 44 de 89
Apartado 9: Ejercitación - Tipo de elemento:
Combinación de Color17
Por: Rossi, María Laura
El color juega un papel importante en cualquier diseño que se
realice, el uso adecuado de los colores permitirá que una web sea
accesible. Algunas personas tienen dificultades para leer si no
existe un alto contraste entre el color del texto y el color del
fondo. Para otras personas, el texto en colores brillantes resulta
ilegible. Los navegadores web deberían permitir que los usuarios
cambien el color del texto y el color del fondo, así como también
las páginas deben ser completamente funcionales luego de
realizar este tipo de cambios.
¿Quién se beneficia?
Se beneficia a personas con discapacidades visuales relacionadas a
la percepción de colores y contrastes, como por ejemplo:
Personas con daltonismo, que presentan ceguera a ciertos
colores.
Personas con retinopatía diabética, cataratas, degeneración
macular, glaucoma, sensibilidad al contraste y sensibilidad al
brillo.
Personas con vista cansada.
Ejemplos:
17
http://www.w3.org/WAI/eval/preliminary.html#contrast

Primeros Auxilios.
Página 45 de 89
Alto contraste (por ejemplo, texto oscuro sobre fondo claro o
texto brillante en fondo oscuro) es requerido por algunas
personas con impedimentos visuales, incluyendo muchas
personas mayores que han perdido la sensibilidad al contraste.
Mientras que algunas personas tienen un alto contraste, para
otros - incluyendo a las personas con algún tipo de discapacidad
para la lectura como la dislexia – los colores brillantes (alta
luminosidad) no son legibles. Necesitan baja luminancia.

Primeros Auxilios.
Página 46 de 89
Los navegadores web deberían permitir a los usuarios finales
cambiar el color, tanto del texto como del fondo, y las páginas
web deberían realizar las mismas prestaciones cuando las
personas realicen estos cambios.
(Este requisito de la accesibilidad se llama a veces suficiente
"contraste de color", sin embargo no es correcto - técnicamente
es "contraste de luminancia" En esta página usamos "relación de
contraste", como abreviatura de "relación de contraste de
luminancia" por ser más comprensible.).
Cómo hacerlo?
Siempre que se trabaja con combinación de color es necesario
trabajar con el documento de estilos y desde allí probar la mejor
combinación de color. La W3C establece parámetros que se
describen a continuación:
Las páginas web deben tener un mínimo de contraste por defecto,
se trata de una relación de contraste de al menos 4.5:1 para texto
de tamaño normal.
Básicamente, hay tres maneras de comprobar el contraste, cada
uno con ventajas (fortalezas) y contras (debilidades).
Tabla con relación de contraste - La herramienta muestra una
tabla con todas las posibles relaciones de contraste en la página
web. Con algunas herramientas, puede hacer clic en la tabla y se
mostrará la combinación de color activa en la página web.
Pro: Integral.

Primeros Auxilios.
Página 47 de 89
Desventaja: Puede ser inexactos, en concreto, puede mostrar
algunas combinaciones de colores que no están realmente en la
página activa.
Cuentagotas para seleccionar los colores - La herramienta le
permite seleccionar un color de texto y un color de fondo,
mostrando la relación de contraste.
Pro: Exacto.
En contra: Sólo se puede probar un elemento a la vez. Necesita ser
capaz de ver y usar un ratón.
Apagar el color. La herramienta muestra la página en escala de
grises.
Pro: Muestra la experiencia directa.
Contra: Impreciso, no proporciona valor de radio de contraste.
Contraste mínimo18
Criterio 1.4.3 W3C - Contraste (mínimo): La presentación visual del
texto y las imágenes de texto tiene una relación de contraste de al
menos 4.5:1, con las siguientes excepciones: (Nivel AA)
Del Texto: Textos e imágenes de texto de tamaño grande, tienen
una relación de contraste de al menos 3:1;
Incidental: El texto o las imágenes de texto que forman parte de
un componente inactivo de interfaz de usuario , que son pura
decoración , que no son visibles para nadie o que son parte de una
imagen que contiene el contenido visual importante, no tienen
ningún requisito de contraste.
Logotipos: El texto que forma parte de un logo o nombre de
marca no tiene ningún requisito mínimo de contraste.
Justificación de la proporción Escogida
Una relación de contraste de 3:1 es el nivel mínimo recomendado
por [ISO 9241-3] y [ANSI-HFES-100-1988] para el texto y la visión
18
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-
contrast#visual-audio-contrast-contrast-resources-head

Primeros Auxilios.
Página 48 de 89
estándar. La relación de 4,5:1 se utiliza para dar cuenta de la
pérdida de contraste que resulta de baja agudeza visual
(moderada), deficiencias de color congénitas o adquiridas, o la
pérdida de la sensibilidad al contraste que sucede normalmente
en adultos mayores.
La relación de contraste de 4.5:1 fue elegido para el nivel de AA,
ya que compensa la pérdida de sensibilidad al contraste que por lo
general experimentan los usuarios con pérdida de visión
equivalente a aproximadamente el 20/40. (20/40 calcula a
aproximadamente 4,5:1.) 20/40 se reporta comúnmente como la
agudeza visual típica de ancianos de más o menos 80 años de
edad. [Gittings-Fozard]
La relación de contraste de 7:01 fue elegido para el nivel AAA, ya
que compensa la pérdida de sensibilidad al contraste
generalmente experimentan los usuarios con pérdida de visión
equivalente a aproximadamente 20/80 visión. Las personas con
más de este grado de pérdida de la visión por lo general utilizan
tecnologías de asistencia para acceder a su contenido (y las
tecnologías de asistencia por lo general tienen que mejoran el
contraste, así como la capacidad de ampliación incorporada en
ellos). Por tanto, el nivel de 7:01 generalmente proporciona una
compensación por la pérdida de la sensibilidad al contraste que
experimentan los usuarios con baja visión que no utilizan
tecnología de asistencia y proporciona realce de contraste
también para la deficiencia del color.
Recursos
Colour Contrast Analyser19
Herramienta local que evalúa si hay suficiente contraste entre un
color de fondo y un color de primer plano. Se basa en el algoritmo
19
http://www.paciellogroup.com/resources/contrastAnalyser#macdownload

Primeros Auxilios.
Página 49 de 89
Contrast Ratio propuesto por el World Wide Web Consortium
(W3C).
Color Selector20
Herramienta local y gratuita que está disponible para Windows y
para MAC.
Extensiones Firefox
WCAG Contrast checker
Es una extensión para Firefox que puede comprobar si la
combinación de colores primer y segundo plano, es la apropiada
para la percepción visual basada en los requerimientos de las
WCAG 1.0 y WCAG 2.0
Colour Contrast Analyser Firefox Extension
Extensión de Firefox que genera un informe sobre el contraste de
los colores de fondo y los colores del texto de una página.
Online
Accesibilility Color Wheel
Permite seleccionar un color de fondo y un color de texto para
analizar si el contraste es el recomendado por las WCAG,
pudiendo elegir el algoritmo de las WCAG 1.0 o el de las WCAG 2.0
(para ampliar información sobre esta diferencia leer el artículo de
20
http://www.fujitsu.com/global/accessibility/assistance/cs/

Primeros Auxilios.
Página 50 de 89
Accesibilidad Web y Alan "Analizador de Contraste de Color para
WCAG 2.0").
AccessColor - Online Tool for Colour Contrast
Genera un informe sobre el contraste de los colores de fondo y
texto de la página indicada.

Primeros Auxilios.
Página 51 de 89
Apartado 10 : Ejercitación - Tipo de elemento:
Tratamiento de Imágenes
Por: Paniagua, Silvia Paola
Las imágenes son uno de los elementos fundamentales en todo
contenido web, por lo que su accesibilidad es clave en la
percepción global del sitio. En el contexto de las WCAG 2.0,
tecnológicamente neutrales, el concepto de “imagen” puede
referirse tanto a:
Ficheros bitmap insertados como tal en una página web (PNG, JPG
o GIF, por ejemplo).
Imágenes insertadas dentro de otro tipo de documentos o
tecnologías.
Cualquier representación gráfica no textual, como pueden ser
gráficos vectoriales, iconos y símbolos o ASCII Art.
Por lo tanto, a diferencia de las Pautas WCAG 1.0, las alternativas
a las imágenes pueden darse de maneras muy distintas
dependiendo de la tecnología que se esté usando, dado que no
siempre se insertarán las imágenes mediante una etiqueta HTML.
En lo que respecta a html es importante incorporar elementos
como “alt”, ”title”, ”longdesc”, ”figure”, “figurecaption”, que
incluyen textos alternativos de diferentes maneras, los cales serán
detallados a continuación.
Qué texto incluir?
Para decidir qué texto incluir en la alternativa, es una buena idea
considerar las siguientes preguntas:
• ¿Por qué está aquí este contenido no textual?
• ¿Qué información transmite?
• ¿Qué propósito cumple?

Primeros Auxilios.
Página 52 de 89
Si no pudiera usar el contenido textual, ¿qué palabras puedo usar
para transmitir la misma función y/o información?
Beneficiarios:
• Las personas con dificultades para percibir el contenido
visual. Las ayudas técnicas pueden leer en voz alta las
alternativas textuales, presentarlas visualmente o
convertirlas al sistema braille.
• Las personas que tienen dificultades para entender el
significado de fotografías, dibujos y otras imágenes (por
ejemplo, bocetos, diseños gráficos, pinturas,
representaciones tridimensionales), gráficos, diagramas,
animaciones, etcétera.
• Las personas sordo-ciegas podrán leer el texto en braille.
A continuaciones se definirán los elementos anteriormente
nombrados y se presentaran ejemplos correspondientes.
Alt
es una descripción corta que se asigna a una imagen para que se
pueda leer con un lector de pantallas usado por personas con
problemas de visión.
¿Cómo utiliza un lector de pantalla el atributo alt?
Normalmente, los lectores de pantalla tienen opciones para
configurar como tratar el atributo alt y qué hace caso de que no
esté. Si no está el atributo alt, normalmente leen el valor del
atributo src de la imagen, lo cual no suele ser muy útil.
Ejemplo incorrecto:
Código de la imagen:
<h1> Primera imagen</h1> <img src=“img1.jpg”>
Resultado: Primera imagen

Primeros Auxilios.
Página 53 de 89
Ilustración 3: Primera imagen de ejemplo
Un lector de pantallas para personas ciegas lo interpretaría de la
siguiente forma (o leería el siguiente texto): “Primera imagen”
Esto está mal porque los lectores de pantalla para personas ciegas
no pueden cargar imágenes que no contengan un “alt” en su
código.

Primeros Auxilios.
Página 54 de 89
Ejemplo correcto:
<h1> Primera imagen</h1> <img src=“img1.jpg” alt=“Manos
entrelazadas con fondo verde”>
Resultado:
Simplemente con añadir haber añadido el texto alternativo en el
código de la imagen un lector de pantallas para personas ciegas lo
interpretaría de la siguiente forma:
“Primera imagen”
EL FIGURE-FIGURECAPTION:
La intención del elemento <figure> es que sea utilizado junto con
el elemento <figcaption> y representa una unidad de contenido,
que puede incluir (opcionalmente) una leyenda para marcar

Primeros Auxilios.
Página 55 de 89
diagramas, ilustraciones, fotografías, y ejemplos de código (entre
otras cosas).
Figcaption:
El elemento <figcaption> es opcional y puede aparecer una sola
vez dentro de un elemento <figure> por más que este posea
múltiples hijos (ej: <img>). incorpora un texto asociado a la
imagen, siendo de gran ayuda para los lectores de pantallas y
“ayudas técnicas”. Estas etiquetas se utilizan para diagramas,
imágenes o fotos que acompañan el texto principal de nuestro
contenido.
Ejemplo1: Una imagen de un elemento figure sin título
Código:
<figure>
<img src = "orangutan.jpg" alt ="Orangutan colgando de
una cuerda" >
</ figure>

Primeros Auxilios.
Página 56 de 89
Ejemplo2: Una imagen de un elemento <figure> con una
leyenda explicativa
Código:
<figure>
<img src = "macaque.jpg" alt ="Macaco en los árboles">
<figcaption> Un macaco cheeky, Baja al río
Kintaganban, Borneo.
</ figcaption>
</ figure>
TITLE:
Este atributo es opcional aunque necesario para cumplir los
estándares del W3C21
, y solo útil para añadir información
adicional.
Ejemplo:
Código:
<img src="imagenes/logo-google.gif" alt="Logo de Google"
title="Esto es el mensaje emergente">
21
http://www.w3c.es/
Un macaco cheeky, Baja al río Kintaganban, Borneo.

Primeros Auxilios.
Página 57 de 89
El atributo longdesc (opcional):
Se emplea en situaciones donde la descripción es muy larga para
ser incluida en el atributo alt. Este contiene una dirección de
Internet a otra página web o a la misma página web donde se
encuentra la descripción larga de la imagen. Debido a que
LONGDESC no tiene soporte en la mayoría de los navegadores, es
necesario proporcionar un enlace al archivo que contiene la
descripción. Convencionalmente se utiliza un enlace "D": una letra
D mayúscula encerrada entre llaves [D] siguiendo inmediatamente
a la imagen que enlaza al mismo archivo que señala el atributo
LONGDESC.
Código:22
<img src="superficie.gif" alt="Superficie de los
continentes"
longdesc="descripcion.html">
[<a href="descripcion.html">D</a>]
22
http://www.sidar.org/acti/cursos/cursotener/manual/ejem/ejem5-0.html

Primeros Auxilios.
Página 58 de 89
[D]
Recomendaciones adicionales:
Al igual que en las Pautas WCAG 1.0, las nuevas Pautas contienen
diversos criterios relativos al uso de imágenes y a la inclusión de
alternativas accesibles a este tipo de elementos.
Ellas son:
• Si una imagen no aporta significado, valor añadido o un
aporte de información al contenido de la página, debería
incluirse mediante CSS (con ayuda de la propiedad
background-image). Por ejemplo, la imagen que se pueda
utilizar para crear un borde o poner un degradado.
• Las imágenes o elementos puramente decorativos, deben
implementarse de tal modo que los productos de apoyo
para las personas discapacitadas puedan ignorarlas por
completo.
• En el caso de los mecanismos de control destinados a
distinguir a un humano de una máquina o programa de
ordenador (CAPTCHA), se deben proporcionar distintos
métodos alternativos para acceder a la información,
adaptados a diferentes capacidades sensoriales.
• Si el elemento no textual consiste en algún tipo de test o
ejercicio que perdería validez al presentarlo como texto,

Primeros Auxilios.
Página 59 de 89
la alternativa debe al menos proporcionar una descripción
que identifique el contenido no textual.
Consejos WAI
El texto “alt” apropiado no es una ciencia exacta. Algunas
personas prefieren que la mayoría de las imágenes tengan una
descripción más detallada, y otros prefieren menos descripción.
Texto alternativo adecuado:
• El texto debe transmitir el mismo significado que la
imagen. Es decir, si alguien no puede ver la imagen, que
pueda recibir la información importante de la imagen, o el
mensaje por medio del texto que se encuentra en el “ alt”.
• Texto alternativo depende del contexto. Por ejemplo, para
una imagen de un perro en un sitio web Kennel Club, el
texto alternativo podría incluir la raza del perro, sin
embargo, la misma imagen en una página web del parque,
un perro puede estar ahí sólo para hacer la página más
atractiva, seguramente el desarrollador no incorporará
ningún texto alternativo (y debería tener “alt” nulo).
• Una manera de pensar en el texto “alt” apropiado es: si se
está ayudando a alguien a leer e interactuar con la página
web y no se puede ver, ¿qué se puede decir de la imagen?
¿Cuál es el mensaje?
• Imágenes que son funcionales - por ejemplo, las imágenes
que inician acciones (como botones de envío) e imágenes
vinculadas (como la navegación) – deben tener texto
alternativo que es el equivalente funcional.
• El caso de las imágenes con texto - por ejemplo, un
logotipo – ese texto debe ser incluido en el “alt”.
• Si la imagen tiene información compleja - tales como
gráficos tipo excell o tablas - la imagen debe tener un

Primeros Auxilios.
Página 60 de 89
texto alternativo corto y, a continuación una descripción
detallada de la información.
Lo que necesita texto alternativo:
• Si la imagen no es importante para entender el contenido
- por ejemplo, es sólo decoración o "Eye Candy" - debe
tener “alt” nulo ( alt = "" ). Una forma de ayudar a
determinar si una imagen debe tener “alt” nulo es
preguntarse: si la imagen es sacada o removida, puede el
usuario obtener toda la información de la página? (se
proporciona información completa?)
• Si la imagen es suficientemente descrita en el texto - por
ejemplo, un simple diagrama que ilustra lo que está
escrito en el texto de la página web - puede tener un
breve texto alternativo como "Diagrama de flujo de
trabajo como se ha descrito anteriormente."
• El texto alternativo no tiene que incluir las palabras
"botón", "link", o "imagen de". (Los lectores de pantalla
proporcionan automáticamente esa información.)
• En HTML “alt” es un atributo de la etiqueta “imagen”, y
otras etiquetas. (De modo que decir " etiqueta alt" es
técnicamente incorrecto, el término correcto es "atributo
alt", o " texto alt ".)

Primeros Auxilios.
Página 61 de 89
Uso de tablas.
Estructura de una tabla
Las tablas están formadas por filas y columnas. Definiéndose una
celda como el espacio formado por la intersección de una fila y
una columna.
Creación de tablas
La etiqueta <table> … </table> indica al navegador donde
comienza y donde termina la tabla. La etiqueta <tr>Table
Rows…</tr> indica al navegador donde comienza y donde
termina una filas, por lo que deberemos insertar una pareja de
etiquetas por cada fila que queramos que tenga la tabla.
Las celdas que contienen datos se indican con los tags: <td>Table
Data ..</td>. Se deben establecer encabezados de celdas con los
tags: <th>Table Header..<th>
Atributos importantes para hacer el sitio
accesible
El título debe ser una descripción breve del contenido de la tabla y
se debe estar dentro del tag <table>, para que ayude a los lectores
de pantalla. Para esto se usa <CAPTION>…</CAPTION> que
proporciona el título de la tabla. Sólo admite el atributo ALIGN
que puede tomar los valores TOP, LEFT, RIGTH y BOTTOM.

Primeros Auxilios.
Página 62 de 89
SUMMARY: es el resumen que permite definir una descripción
larga de la tabla que complemente al título. Proporciona
información respecto de la tabla, su descripción y contenido. Se la
establece en la declaración Ej: <table border=1 summary="Esta es
una tabla de prueba">
Encabezamientos23
Al recorrer una tabla de forma lineal, se pierde la visión global y es
difícil identificar el significado de un dato. De forma aislada, el
contenido de una celda puede no tener sentido si no se sabe en
qué fila y en qué columna está situado. Para evitar esta situación,
podemos usar los encabezamientos (o encabezados), que
permiten asociar un dato con su encabezado.
Un encabezado de una tabla se define con la etiqueta <th>. Esta
etiqueta es similar a la etiqueta <td> (se puede usar una en el
lugar de la otra) y por tanto, ambas definen una celda de una
tabla, pero <th> indica que la celda tiene una función especial y
contiene un encabezado. Con la etiqueta <th> se pueden definir
tanto encabezados verticales como horizontales.
Ejemplo:
<body>
<table summary="En el precio de los combustibles
se aprecia un incremento sostenido a lo largo
del primer semestre del año">
<caption>Precio medio en pesos de los
combustibles durante el primer semestre del
año</caption>
<tr>
<th>Combustible</th>
<th>Enero</th><th>Febrero</th><th>Marzo</th>
<th>Abril</th><th>Mayo</th><th>Junio</th>
</tr>
23
http://accesibilidadweb.dlsi.ua.es/?menu=guiabreve-9

Primeros Auxilios.
Página 63 de 89
<tr>
<th>Gasolina 95</th>
<td>92</td><td>93</td><td>95</td>
<td>97</td><td>100</td><td>102</td>
</tr>
<tr>
<th>Gasolina 98</th>
<td>103</td><td>104</td><td>106</td>
<td>108</td><td>110</td><td>113</td>
</tr>
<tr>
<th>Diesel</th>
<td>84</td><td>85</td><td>87</td>
<td>85</td><td>87</td><td>90</td>
</tr>
</table>
</body>

Primeros Auxilios.
Página 64 de 89
Recursos:
El complemento Juicy Studio Accessibility Toolbar24
para firefox,
es una herramienta de gran ayuda, que puede revisar la
estructura y contenido de una tabla y entonces sí que se puede
visualizar el contenido del atributo summary, tal como se puede
ver en la siguiente imagen:
Accessible Table Builder 25
, es una herramienta fácil de usar, que
ayuda a construir tablas accesibles
Quiénes se benefician?:
• Las personas ciegas (que usan lectores de pantalla) se
benefician cuando las tablas de diseño se alinean
correctamente porque pueden entender su contenido.
• Las personas ciegas se benefician cuando las tablas de
datos tienen correctamente marcados los encabezados
porque pueden entender las relaciones implícitas en el
formato visual.
24
https://addons.mozilla.org/es/firefox/addon/juicy-studio-accessibility-too/
25
http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/

Primeros Auxilios.
Página 65 de 89
• En general las personas que utilizan lectores de pantalla,
porque éstos podrán leer correctamente las celdas y sus
relaciones con los encabezados.
• Personas con conexiones lentas y navegadores de sólo
texto.
Pruebas
• En las tablas de datos, verifique si las celdas de
encabezados están identificadas correctamente y se
utiliza caption y/o summary.
• Si existe información tabular en la página, verifique que en
el marcado se utilicen, al menos, los elementos table, tr,
th y td
• NO maquetar con tablas

Primeros Auxilios.
Página 66 de 89
Audio y Video.
La información de audio, no está disponible para las personas
sordas o algunas personas con problemas de audición, a menos
que se proporcione en un formato alternativo, como subtítulos y
transcripciones de texto.
La información visual en los videos, no está disponible para
personas que son ciegas o algunas personas que tienen baja
visión, a menos que se proporciona en un formato alternativo,
como audio o texto. (El texto puede ser leído por un lector de
pantalla, dispositivo Braille o ampliada y reformateado para las
personas con baja visión.)
Qué se debe hacer?
Acceso mediante teclado
Debe realizar acciones de modo que se pueda acceder por teclado
a los controles del reproductor de medios de comunicación, para
lo cual deben estar correctamente etiquetados y el teclado
accesible.
Control automático de arranque
Es mejor si el audio (incluido el ruido de fondo y de vídeo con
sonido) no se inicie automáticamente cuando se abra una página
web. Si se inicia automáticamente, se deberá:
• Detener después de 3 segundos.
• Incluir controles para hacer una pausa o detener el audio.
• Incluir controles para bajar el volumen.
Leyendas
(Los títulos se conocen como "subtítulos".)

Primeros Auxilios.
Página 67 de 89
La mayoría de vídeos en la web que proporciona subtítulos tienen
opciones para activar y desactivar, los llamados "Subtítulos
abiertos" son siempre visibles. Por ejemplo, en YouTube, que
enciende los subtítulos con el botón CC. Si no hay un botón CC, no
hay subtítulos disponibles para ese video. Los subtítulos en un
lenguaje específico, necesitan ser listados, por ej: [imagen] en
lenguaje que no es castellano. Listed]
Los Subtítulos automáticos no son suficientes para la accesibilidad
porque no son lo suficientemente precisos. Por ejemplo, en
YouTube, si sólo se enumeran "subtítulos automáticos" (como en
la imagen de arriba) no hay suficientes títulos y el video no es
accesible
Si hay subtítulos, se debe comprobar que:
• Los títulos aparezcan en sintonía con el contenido
hablado.
• Las personas que están hablando son identificadas cuando
hablan.
• El sonido adicional que no sea el diálogo - por ejemplo,
pasos que se acercan, puertas que se cierran, ruptura de
vidrio, deben estar incluidos.
Transcripción
Si hay subtítulos, las transcripciones no suelen ser necesarias, sin
embargo proporcionar transcripciones, además de subtítulos
tiene muchos beneficios tanto a las personas con discapacidad
como a los propietarios de sitios web. [EOWG: OK to Say??]
Las transcripciones deben ser fáciles de encontrar, deben estar
cerca del “audio/video” al igual que los vínculos con el audio de un
determinado video.

Primeros Auxilios.
Página 68 de 89
Compruebe que las transcripciones incluyan toda la información
de audio, conteniendo el diálogo con los altavoces identificados, y
todos los sonidos importantes.
La transcripción de un video puede proporcionar todo el audio y
toda la información visual, por lo que una persona puede obtener
el contenido del video mediante la lectura del texto.
Descripción de Audio
Descripción de Audio (audio-descripción es establecer cuál es el
mensaje que entrega el video) es la descripción de la información
visual importante en un video, con el fin de hacerlo accesible a las
personas que no pueden ver. Por ejemplo, algunos videos
comienzan con un título en el texto, tienen nombres de los
altavoces e ilustraciones. Se debe proporcionar a las personas que
no pueden ver el video esa información visual. Puede ser a través
de:
• Descripción de Audio - donde la pista de audio incluye a
alguien que describe los elementos visuales importantes.
La descripción del audio puede ser incluido en el vídeo
principal, o puede ser proporcionado en un video por
separado.
• Transcripción de texto - incluye la descripción de la
información visual significativa (por lo que es algo así
como un guión).

Primeros Auxilios.
Página 69 de 89
valores en CSS y CSS3.
Por: Rocabado, Pedro Gabriel.
¿Por qué es importante trabajar con valores
relativos en CSS?
Algunas de las razones por la cual hacerlo son:
Aumento de visitas
Cada vez más los usuarios realizan búsquedas o compras a través
de sus smartphones o dispositivos móviles vía internet. Un sitio
web no preparado para ser visible en un dispositivo móvil
provocará la pérdida de visitas y/o posibles ventas, ya que la
navegación a través de un móvil de un sitio no responsive se hace
muy pesada y casi imposible para realizar determinadas
operaciones. Es importante por ello, adaptar nuestras páginas
web a un diseño responsive o adaptativo.
SEO / Posicionamiento Web
En 2013 Google advirtió que el ranking de resultados de
búsquedas en los dispositivos móviles se vería afectado por la
optimización de los sitios web para estos dispositivos, es decir, un
sitio web preparado para ser visible en dispositivos móviles, “se
supone” que mejorará su posicionamiento web respecto a otros
sitios no responsive en los resultados de búsquedas móviles.
Usabilidad del usuario
La finalidad de un sitio web es que los usuarios puedan ver todo lo
que una página web les ofrece, ya sean servicios, productos,
información, etc., y una correcta experiencia de usuario es
fundamental para conseguir este objetivo. Un diseño responsive

Primeros Auxilios.
Página 70 de 89
funciona bien en cualquier resolución o tamaño de pantalla,
limitando la posibilidad de que surjan problemas de navegación a
los usuarios y aumentando así las tasas de conversión, lo que
conlleva mayor accesibilidad para los usuarios.
Reducción de Costes
La reducción de costes es una de las principales razones por la que
usuarios/empresas/organismos se deciden cada vez más por un
diseño web responsive. En lugar de tener un sitio web para
PC’s/portátiles y otro para dispositivos móviles (o tener una app
móvil), se opta por tener un único sitio adaptativo. Así se reducen
costes de desarrollo web y tiempos en mantenimientos de los
sitios.
¿Quiénes se benefician?
Si el tamaño del texto es lo suficientemente grande, los usuarios
con problemas visuales puedan leerlo sin dificultad. De igual
modo, el tamaño de los botones o las áreas activas adecuado
puede facilitar su uso a los usuarios que no pueden controlar el
ratón con precisión. Si se evitan las acciones que dependan de un
dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el
usuario podrá escoger el dispositivo que más le convenga.
¿En qué medida hay que procurar que los valores de la página
sean relativos?
En general, se recomienda el uso de unidades relativas siempre
que sea posible, ya que mejora la accesibilidad de la página y
permite que los documentos se adapten fácilmente a cualquier
medio y dispositivo.
El documento Recomendaciones sobre técnicas CSS para la
mejora de la accesibilidad de los contenidos HTML26
elaborado
26
http://www.w3.org/TR/WCAG10-CSS-TECHS/

Primeros Auxilios.
Página 71 de 89
por el organismo W3C, recomienda el uso de la unidad em para
indicar el tamaño del texto y para todas las medidas que sean
posibles.
Normalmente se utilizan píxel y porcentajes para definir el layout
del documento (básicamente, la anchura de las columnas y de los
elementos de las páginas) y em y porcentajes para el tamaño de
letra de los textos.
Teoría a tener en cuenta:
Para evaluar lo que respecta al uso de valores en CSS y CSS3 se
utilizó la Guía de Transición para Evaluadores y Desarrolladores y
en específico, la aplicación de dos principios básicos del WCAG
2.0; el 3ro o “Comprensible” y el 4to o “Robusto”, los cuales se
definen brevemente a continuación:
Comprensible:
“La información y el manejo de la interfaz de usuario debe ser
comprensible.”
El cual posee tres pautas:
Pauta 3.1: Legible y entendible. Haga el contenido textual legible
y comprensible.
Pauta 3.2: Predecible. Haga que las páginas web aparezcan y se
manejen de manera predecible.
Pauta 3.3: Ayuda a la entrada de datos. Ayude a los usuarios a
evitar y corregir los errores.
Robusto:
“El contenido debe ser suficientemente robusto para que pueda
ser interpretado por una amplia variedad de agentes de usuario,
incluyendo los productos de apoyo.”
Este Principio solo contiene una Pauta:

Primeros Auxilios.
Página 72 de 89
Pauta 4.1: Compatible. Maximice la compatibilidad con los
agentes de usuario actuales y futuros, incluyendo los productos de
apoyo.
Ejemplos:
Con éstas pautas y principios como referencia, continúan los
siguientes ejemplos de cómo no codificar y de cómo codificar
correctamente un archivo CSS particularizado para valores:
Forma Incorrecta Forma Correcta
Fuentes:
.text{
font-size: 30pt;
color: #008040;
background-color:
#80FFFF;
}
Fuentes:
.texto{
font-size:
245%;
color:
#008040;
background-
color: #80FFFF;
}
Margins:
.margenes{
margin: 2cm;
color: #008040;
background-color:
#FF8000;
}
Margins:
.margenes{
margin: 3em;
color:
#008040;
background-
color: #FF8000;
}

Primeros Auxilios.
Página 73 de 89
Paddings:
.relleno{
padding: 2 in;
color: #8080FF;
background-color:
#000000;
}
Paddings:
.relleno{
padding:
12em;
color:
#8080FF;
background-
color: #000000;
}
Dimensiones:
Ancho:
.ancho{
width: 60mm;
color: #80FF00;
background-color:
#808080;
}
Largo:
.largo{
height: 7.5cm;
color: #FF8000;
background-color:
#400000;
}
Dimensiones:
Ancho:
.ancho{
width: 33%;
color: #80FF00;
background-
color: #808080;
}
Largo:
.largo{
height: 50%;
color:
#FF8000;
background-
color: #400000;
}

Primeros Auxilios.
Página 74 de 89
Como puede apreciarse en los ejemplos anteriores, el uso de
medidas absolutas está denotado con rojo y el uso de medidas
relativas con verde.
Algunas consideraciones sobre estos tipos de
medidas:
Absolutas:
La principal ventaja de las unidades absolutas es que su valor es
directamente el valor que se debe utilizar, sin necesidad de
realizar cálculos intermedios. Su principal desventaja es que son
muy poco flexibles y no se adaptan fácilmente a los diferentes
medios.
De todas las unidades absolutas, la única que suele utilizarse es el
punto (pt). Se trata de la unidad de medida preferida para
establecer el tamaño del texto en los documentos que se van a
imprimir, es decir, para el medio print de CSS.
Relativas:
La gran ventaja de las unidades relativas es que siempre
mantienen las proporciones del diseño de la página.
¿Cómo corregir su sitio?
Como se puede intuir, al revisar los ejemplos dados, para que su
sitio web cumpla con las actuales normas referidas al diseño
adaptable a diferentes dispositivos, bastará con cambiar todos (o
casi todos) los valores absolutos que haya en el CSS por valores
relativos.

Primeros Auxilios.
Página 75 de 89
Tratamiento de Formularios
Por: Villatarco, Leonardo Maximiliano.
Las etiquetas, el acceso por teclado, instrucciones claras y manejo
de errores efectivos son importantes para lograr formularios
accesibles.
Los campos de formulario y otros controles suelen tener etiquetas
visibles, como "Dirección de correo electrónico:" o etiquetas de
un campo de texto. Si estas etiquetas están marcados
correctamente, los usuarios puede interactuar con ellos utilizando
sólo el teclado, mediante órdenes de voz, o el uso de lectores de
pantalla. En este caso, la propia etiqueta envía el foco al cuadro
de ingreso, en ayuda a personas que tienen dificultad al hacer clic
en los botones pequeños de radio o casillas de verificación.
¿Por qué es necesario que un Formulario sea
accesible?
Un formulario en línea, permite la interacción con el usuario a
través del ingreso de información que se propone desde un
formulario tales como: conocer datos personales del usuario,
preferencias, etc. Por tanto es importante que puedan acceder a
él la mayor cantidad de personas posibles.
Descripción
Normas de accesibilidad para formularios
Actualmente existe una guía rápida de normas de accesibilidad27
sobre formularios, confeccionada por la Web Content Accessibility
Guidelines (WCAG 2.0 )
27
http://olgacarreras.blogspot.com.es/2009/06/formularios-accesibles-segun-las-cag.html

Primeros Auxilios.
Página 76 de 89
A continuación se muestra la aplicación de estas normas y qué se
debe tener en cuenta al momento de realizar un formulario:
 Proporcione un título al formulario que exprese claramente la
función de dicho formulario.
Ilustración 4: Formulario con título
 Los datos del diseño, deben estar ordenados para facilitar la
tarea de los lectores de pantalla y ayudas técnicas.

Primeros Auxilios.
Página 77 de 89
En este punto es importante destacar la combinación de colores a
usar en la creación de un formulario como en la página en
general.
Ilustración 6: Combinación de color adecuada
Ilustración 5: Combinación de color inadecuada

Primeros Auxilios.
Página 78 de 89
A demás de este simple error de colores muy parecido; existe otro
que es pasado por alto muchas veces, que es no tener en cuenta
la visión de personas con daltonismo.
En la ilustración 7 se muestra cómo el contraste de colores no
favorece a personas con cierto tipo de daltonismo.
Para remediar este error, (como se mencionó en capítulos
anteriores) existen aplicaciones o páginas de internet que brindan
una herramienta que permite tomar los colores de fondo y del
texto, analizarlos y concluir si cumple con las normas de la W3C.
(ej: “Colour Contrast Analyser”).
 Bien referenciado desde el punto de vista técnico:
A cada campo se le asigna un titulo mediante el uso de la etiqueta
<label> como se muestra a continuación en el ejemplo:
Ejemplo1:
<label for="nombre" >(obligatorio) Nombre: </label>
<input type="text" id="nombre" placeholder="Ej. Pablo"
required autofocus >
Para el uso correcto de esta etiqueta es necesario que el atributo
Ilustración 6: Contraste - color

Primeros Auxilios.
Página 79 de 89
for sea igual al atributo id del campo input al que se quiere
asociar.
De esta manera, al navegar con un lector de pantalla, es posible
acceder al campo desde el texto asociado.
Ejemplo2:
<input type="radio" id="mujer" name="sexo"
value="mujer">
<label for="mujer">Mujer</label><br>
Ejemplo 3:
<input type="checkbox" id="autos" name="autos">
<label for="autos">Autos</label><br>
La etiqueta se incorpora de acuerdo al control de formulario o
tipo de ingreso del que se trate.
En el caso de radio buttom y check box debe tener una etiqueta
visible inmediatamente después como se muestran en los
ejemplos 2 y 3.

Primeros Auxilios.
Página 80 de 89
En el resto de controles inmediatamente delante, sobre el campo
o a la izquierda del mismo, caso del ejemplo 1.
 Indicar si un campo es obligatorio en el LABEL asociado al
campo:
Por ejemplo mediante el texto que diga"(obligatorio)" o mediante
un asterisco explicando su significado al comienzo del formulario.
Siendo el primero el mas recomendable.
NUNCA diferenciados por color o estilo de letra, ya que sería
transparente para los lectores de pantalla.
Ilustración 7: Ejemplo inaccesible

Primeros Auxilios.
Página 81 de 89
Ilustración 8: Ejemplo accesible
 Si uno de los campos del formulario requiere el ingreso de una
cierta cantidad o tipo de caracteres, se usa el atributo pattern
y luego se debe aclarar usando el atributo title o en su defecto
un párrafo, como se muestra en el siguiente ejemplo:
Ejemplo 5: uso de pattern y title
<input type="text" id="nombre" placeholder="Ej. Pablo"
pattern="[A-Za-z]{4,}" title=”Mas de 4 caracteres Alfabeticos” >

Primeros Auxilios.
Página 82 de 89
 El agregado de valores por defecto en los campos de ingreso
de dato, mediante el uso de “placeholder”, ayuda a orientar
usuarios con alguna discapacidad cognitiva.
Ejemplo 6: uso de placeholder
<input type="text" id="nombre" placeholder="Ej. Pablo>
<input type="text" id="apellido" placeholder="Ej. Valdez>
 Los campos deben ubicarse en una sola columna de datos.
Los formularios con dos columnas tienen más probabilidades de
que los usuarios pasen por alto algunos campos, dado que crean
un orden ambiguo de lectura.

Primeros Auxilios.
Página 83 de 89
Ejemplo 7: Formulario complejo
Visualmente, esta tabla tiene al menos algún sentido. Pero si se quitan
los colores y formato, un lector de pantalla leerá la tabla en el orden
que se presenta a continuación, llevando a confusiones a lectores con
problemas de visión:
Ejemplo 8: Orden de lectura en formulario complejo.

Primeros Auxilios.
Página 84 de 89
Animación (destellos)
Por: Ignacio Casares
Preguntas Introductorias:
• ¿Es necesario incorporar este elemento?
• ¿De que manera se puede representar la información sin
que la misma pierda su esencia?
• ¿Cómo se afectada la performance respecto de otras
tecnologías (como ser flash)?
• ¿Qué tan compleja es el desarrollo de la solución?
Descripción:
Este ejemplo intenta mostrar a los desarrolladores de páginas y
aplicaciones Web el uso correcto de las animaciones (destellos)
dentro de una página Web. El mismo se implemento en HTML5
utilizando <canvas> y JavaScript para su desarrollo.
Se utilizaron dos <canvas>:
El primero muestra destellos de colores con una variación de 30
milisegundos (forma incorrecta de mostrarlo) y su
correspondiente corrección aumentando el intervalo de tiempo a
1 seg. por color.
El segundo <canvas> utiliza los mismos intervalos de tiempos pero
en vez de cambiar colores se muestra una variación de cuatro
imágenes simulando un aviso publicitario de un sitio web.
Personas Beneficiadas:
Las personas beneficiadas en su totalidad son aquellas que
padecen de Epilepsia Foto sensitiva y problemas similares.

Primeros Auxilios.
Página 85 de 89
El público en general también se muestra beneficiado ya que
ciertas animaciones producen migraña o jaqueca en algunas
personas.
Ejemplo Práctico:
Mal Ejemplo
Definición del canvas en el body, con su id correspondiente y las
dimensiones del mismo. Esta declaración se encuentra en el
archivo “ejemplo_LIDE-
ar.html”
Para dibujar dentro del canvas utilizamos JavaScript:
Identificamos el canvas con
document.getElementById(“id_canvas”), a continuación el
contexto donde vamos a dibujar .getContext(“2d”).
Llamo a la función “cambiar_colores” y paso como parámetros el
código de color (1 en este caso), un intervalo de tiempo en
milisegundos y el contexto del canvas.

Primeros Auxilios.
Página 86 de 89
La función “cambiar_colores” toma los parámetros enviados
anteriormente:
Se crea una variable color y a continuación se controla el índice.
De acuerdo al valor del índice (recordemos que fue seteado en 1)
a la variable “color” se le asigna el color correspondiente. Si hay
un valor n que no satisfaga se inicializa n una vez más.
Una vez fijado el color a continuación se lo asigna el mismo al
canvas con la propiedad .fillstyle=color.
Con la propiedad .fillRect(x_inicial ,y_inicial ,x_final,y _final)
dibujamos un rectángulo dentro de nuestro canvas, en este caso
de las mismas dimensiones que el canvas mostrado en nuestro
HTML 400x100.
Finalmente utilizamos una variable global c y le asignamos el
método setTimeout donde hago una llamada recursiva de la
función “cambiar_colores” utilizando la variable “intervalo” para
fijar la frecuencia en la que se repite la función.
Nota: setTimeout se ejecuta una sola vez en un intervalo de
tiempo fijado, al realizar un llamado recursivo sobre la misma
función se obtiene un valor n diferente en cada repetición
cambiando el color en cada llamado de la función y dando la
sensación de una animación

Primeros Auxilios.
Página 87 de 89
¿Por qué está mal?
Se fija un intervalo de tiempo muy corto.
Como son muchos colores sumado al corto intervalo de tiempo
aumenta el riesgo de que una persona que sufra de epilepsia foto
sensitiva sufra un ataque.
Ejemplo Correcto
Utilizo el mismo canvas pero hago uso de botones para cambiar

Clínica Accesibilidad Web / Lide-ar

Clínica Accesibilidad Web / Lide-ar

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (20)

Similar a Clínica Accesibilidad Web / Lide-ar

Similar a Clínica Accesibilidad Web / Lide-ar (20)

Último

Último (20)

Clínica Accesibilidad Web / Lide-ar