Clínica de accesibilidad a los
contenidos en sitios Web.
Primeros Auxilios.
Esta obra está licenciada bajo la Licencia Cre...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 2 de 89
Facultad de Ciencias Exactas y ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 3 de 89
Dominguez, Victor Gerardo
Figue...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 4 de 89
PRESENTACION
En consonancia con...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 5 de 89
Este sólo es el inicio de una e...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 6 de 89
Apartado 1: Guía Breve de Acces...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 7 de 89
El objetivo de WAI es facilitar...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 8 de 89
Apartado 2: Legislación Argenti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 9 de 89
adquirido por el Estado Naciona...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 10 de 89
prestadoras o contratistas de ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 11 de 89
WAI (Web Accessibility Initiat...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 12 de 89
Apartado 3: Norma WCAG 2.0
Den...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 13 de 89
las necesidades de los diferen...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 14 de 89
• El sitio contiene imágenes m...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 15 de 89
que tienen como característica...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 16 de 89
Apartado 4: Evaluadores de Acc...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 17 de 89
La WAI promueve el desarrollo ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 18 de 89
En cuanto a la evaluación manu...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 19 de 89
Problemas conocidos: Se trata ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 20 de 89
HERA 12
: Ha sido desarrollado...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 21 de 89
especifica mediante una direcc...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 22 de 89
evaluar la accesibilidad de un...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 23 de 89
actual a la herramienta de com...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 24 de 89
Se pueden diferenciar las func...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 25 de 89
Apartado 5: Ejercitación – Est...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 26 de 89
El contenido de flujo normalme...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 27 de 89
Elementos de HTML5
Código HTML...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 28 de 89
<nav>
<li><a href="inicio.html...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 29 de 89
<footer>
<p>FOOTER</p>
<p>Dere...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 30 de 89
del contenido. Pueden ser anid...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 31 de 89
pero ahora al formar parte de ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 32 de 89
objeto diferente. Todos los ob...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 33 de 89
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 34 de 89
Apartado 6: Ejercitación – Tip...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 35 de 89
/*cuerpo*/
body {
padding-left...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 36 de 89
h1 {
font-family: Helvetica, G...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 37 de 89
font-size: 0.85em;
padding: 0....
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 38 de 89
Apartado 7: Ejercitación – Tip...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 39 de 89
Compruebe que el título sea di...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 40 de 89
Apartado 8: Ejercitación – Tip...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 41 de 89
Imagen 2: Niveles de título en...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 42 de 89
benefician con la posibilidad ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 43 de 89
5. En la página de resultados,...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 44 de 89
Apartado 9: Ejercitación - Tip...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 45 de 89
Alto contraste (por ejemplo, t...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 46 de 89
Los navegadores web deberían p...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 47 de 89
Desventaja: Puede ser inexacto...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 48 de 89
estándar. La relación de 4,5:1...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 49 de 89
Contrast Ratio propuesto por e...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 50 de 89
Accesibilidad Web y Alan "Anal...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 51 de 89
Apartado 10 : Ejercitación - T...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 52 de 89
Si no pudiera usar el contenid...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 53 de 89
Ilustración 3: Primera imagen ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 54 de 89
Ejemplo correcto:
<h1> Primera...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 55 de 89
diagramas, ilustraciones, foto...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 56 de 89
Ejemplo2: Una imagen de un ele...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 57 de 89
El atributo longdesc (opcional...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 58 de 89
[D]
Recomendaciones adicionale...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 59 de 89
la alternativa debe al menos p...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 60 de 89
texto alternativo corto y, a c...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 61 de 89
Apartado 11: Ejercitación - Ti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 62 de 89
SUMMARY: es el resumen que per...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 63 de 89
<tr>
<th>Gasolina 95</th>
<td>...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 64 de 89
Recursos:
El complemento Juicy...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 65 de 89
• En general las personas que ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 66 de 89
Apartado 11: Ejercitación - Ti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 67 de 89
La mayoría de vídeos en la web...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 68 de 89
Compruebe que las transcripcio...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 69 de 89
Apartado 12: Ejercitación - Ti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 70 de 89
funciona bien en cualquier res...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 71 de 89
por el organismo W3C, recomien...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 72 de 89
Pauta 4.1: Compatible. Maximic...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 73 de 89
Paddings:
.relleno{
padding: 2...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 74 de 89
Como puede apreciarse en los e...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 75 de 89
Apartado 13: Ejercitación - Ti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 76 de 89
A continuación se muestra la a...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 77 de 89
En este punto es importante de...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 78 de 89
A demás de este simple error d...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 79 de 89
for sea igual al atributo id d...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 80 de 89
En el resto de controles inmed...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 81 de 89
Ilustración 8: Ejemplo accesib...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 82 de 89
 El agregado de valores por d...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 83 de 89
Ejemplo 7: Formulario complejo...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 84 de 89
Apartado 14: Ejercitación - Ti...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 85 de 89
El público en general también ...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 86 de 89
La función “cambiar_colores” t...
Clínica de accesibilidad a los contenidos en sitios Web.
Primeros Auxilios.
Página 87 de 89
¿Por qué está mal?
Se fija un ...
Clínica Accesibilidad Web / Lide-ar
Clínica Accesibilidad Web / Lide-ar
Próxima SlideShare
Cargando en…5
×

Clínica Accesibilidad Web / Lide-ar

417 visualizaciones

Publicado el

Guía para realizar sitios web accesibles

Publicado en: Educación
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
417
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Clínica Accesibilidad Web / Lide-ar

  1. 1. 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.
  2. 2. 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
  3. 3. Clínica de accesibilidad a los contenidos en sitios Web. 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 Facultad de Ciencias Exactas y Tecnología 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 Universidad Nacional de Tucumán Responsables de la Organización Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán LIDE-ar Departamento Ciencias de la Computación Revista CET SIDETEC Superior Gobierno de Tucumán
  4. 4. Clínica de accesibilidad a los contenidos en sitios Web. 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”.
  5. 5. Clínica de accesibilidad a los contenidos en sitios Web. 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
  6. 6. Clínica de accesibilidad a los contenidos en sitios Web. 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).
  7. 7. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  8. 8. Clínica de accesibilidad a los contenidos en sitios Web. 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
  9. 9. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  10. 10. Clínica de accesibilidad a los contenidos en sitios Web. 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
  11. 11. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  12. 12. Clínica de accesibilidad a los contenidos en sitios Web. 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
  13. 13. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  14. 14. Clínica de accesibilidad a los contenidos en sitios Web. 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
  15. 15. Clínica de accesibilidad a los contenidos en sitios Web. 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/
  16. 16. Clínica de accesibilidad a los contenidos en sitios Web. 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
  17. 17. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  18. 18. Clínica de accesibilidad a los contenidos en sitios Web. 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
  19. 19. Clínica de accesibilidad a los contenidos en sitios Web. 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
  20. 20. Clínica de accesibilidad a los contenidos en sitios Web. 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
  21. 21. Clínica de accesibilidad a los contenidos en sitios Web. 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
  22. 22. Clínica de accesibilidad a los contenidos en sitios Web. 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
  23. 23. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  24. 24. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  25. 25. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  26. 26. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  27. 27. Clínica de accesibilidad a los contenidos en sitios Web. 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>
  28. 28. Clínica de accesibilidad a los contenidos en sitios Web. 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>
  29. 29. Clínica de accesibilidad a los contenidos en sitios Web. 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
  30. 30. Clínica de accesibilidad a los contenidos en sitios Web. 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,
  31. 31. Clínica de accesibilidad a los contenidos en sitios Web. 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
  32. 32. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  33. 33. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 33 de 89
  34. 34. Clínica de accesibilidad a los contenidos en sitios Web. 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; }
  35. 35. Clínica de accesibilidad a los contenidos en sitios Web. 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 }
  36. 36. Clínica de accesibilidad a los contenidos en sitios Web. 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;
  37. 37. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 37 de 89 font-size: 0.85em; padding: 0.75em 0; background:#408080; width: 100%; }
  38. 38. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 38 de 89 Apartado 7: Ejercitación – Tipo de elemento: 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
  39. 39. Clínica de accesibilidad a los contenidos en sitios Web. 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
  40. 40. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 40 de 89 Apartado 8: Ejercitación – Tipo de elemento: 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
  41. 41. Clínica de accesibilidad a los contenidos en sitios Web. 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
  42. 42. Clínica de accesibilidad a los contenidos en sitios Web. 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
  43. 43. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  44. 44. Clínica de accesibilidad a los contenidos en sitios Web. 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
  45. 45. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  46. 46. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  47. 47. Clínica de accesibilidad a los contenidos en sitios Web. 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
  48. 48. Clínica de accesibilidad a los contenidos en sitios Web. 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
  49. 49. Clínica de accesibilidad a los contenidos en sitios Web. 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/
  50. 50. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  51. 51. Clínica de accesibilidad a los contenidos en sitios Web. 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?
  52. 52. Clínica de accesibilidad a los contenidos en sitios Web. 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
  53. 53. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  54. 54. Clínica de accesibilidad a los contenidos en sitios Web. 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
  55. 55. Clínica de accesibilidad a los contenidos en sitios Web. 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>
  56. 56. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  57. 57. Clínica de accesibilidad a los contenidos en sitios Web. 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
  58. 58. Clínica de accesibilidad a los contenidos en sitios Web. 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,
  59. 59. Clínica de accesibilidad a los contenidos en sitios Web. 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
  60. 60. Clínica de accesibilidad a los contenidos en sitios Web. 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 ".)
  61. 61. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 61 de 89 Apartado 11: Ejercitación - Tipo de elemento: 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.
  62. 62. Clínica de accesibilidad a los contenidos en sitios Web. 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
  63. 63. Clínica de accesibilidad a los contenidos en sitios Web. 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>
  64. 64. Clínica de accesibilidad a los contenidos en sitios Web. 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/
  65. 65. Clínica de accesibilidad a los contenidos en sitios Web. 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
  66. 66. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 66 de 89 Apartado 11: Ejercitación - Tipo de elemento: 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".)
  67. 67. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  68. 68. Clínica de accesibilidad a los contenidos en sitios Web. 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).
  69. 69. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 69 de 89 Apartado 12: Ejercitación - Tipo de elemento: 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
  70. 70. Clínica de accesibilidad a los contenidos en sitios Web. 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/
  71. 71. Clínica de accesibilidad a los contenidos en sitios Web. 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:
  72. 72. Clínica de accesibilidad a los contenidos en sitios Web. 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; }
  73. 73. Clínica de accesibilidad a los contenidos en sitios Web. 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; }
  74. 74. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  75. 75. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 75 de 89 Apartado 13: Ejercitación - Tipo de elemento: 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
  76. 76. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  77. 77. Clínica de accesibilidad a los contenidos en sitios Web. 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
  78. 78. Clínica de accesibilidad a los contenidos en sitios Web. 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
  79. 79. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  80. 80. Clínica de accesibilidad a los contenidos en sitios Web. 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
  81. 81. Clínica de accesibilidad a los contenidos en sitios Web. 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” >
  82. 82. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  83. 83. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  84. 84. Clínica de accesibilidad a los contenidos en sitios Web. Primeros Auxilios. Página 84 de 89 Apartado 14: Ejercitación - Tipo de elemento: 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.
  85. 85. Clínica de accesibilidad a los contenidos en sitios Web. 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.
  86. 86. Clínica de accesibilidad a los contenidos en sitios Web. 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
  87. 87. Clínica de accesibilidad a los contenidos en sitios Web. 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

×