2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 11

Seminario

CMO DESARROLLAR CMO DESARROLLAR APLICACIONES WEB APLICACIONES WEB

ACCESIBLESACCESIBLES

Inmaculada Bermejo Salar (inmabsNOSPAM@um.es)Inmaculada Bermejo Salar (inmabsNOSPAM@um.es)

Juan Luis Serradilla Amarilla (juanluNOSPAM@um.es)Juan Luis Serradilla Amarilla (juanluNOSPAM@um.es)

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 22

OBJETIVOS DE LA ACCESIBILIDAD Que TODOS puedan usar la aplicacin. Identificar los tipos de usuarios

que van a usar la aplicacin, teniendo en cuenta sus discapacidades, entorno de trabajo y dispositivos que usarn para acceder (HW y SW): Discapacidad? (cuntos usamos gafas?)

Ver, oir, moverse? Dificultad de lectura o comprensin de texto? Pueden usar teclado y/o ratn? Hablan y comprender con fluidez el idioma en que est redactado el documento?

HW y/o SW limitativo? (internet mvil?) Pantalla de slo texto y/o pequea? Conexin lenta a Internet? Versin antigua

del navegador, o uno diferente, o uno de voz (o mvil o pda) o un S.O. distinto? Entornos especiales? (o simple uso continuado)

Se encuentran en una situacin en la que sus ojos, odos o manos estn ocupados u obstaculizados? mucho ruido? mucha o poca luz?

Cumplir la legislacin vigente: LSSICE Ley de Servicios de la Sociedad de la Informacin y Comercio Electrnico (LEY 34/2002, de 11 de Julio entrando en vigor el 12 de Octubre de 2002).

... Las Administraciones Pblicas adoptarn las medidas necesarias para que la informacin disponible en sus respectivas pginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrn exigir que las pginas de Internet cuyo diseo o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados...

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 33

PAUTAS DE ACCESIBILIDAD DEL W3C W3C WAI (Web Accesibility Initiative). Desarrolla estrategias, guas y

recursos para contribuir a hacer la Web accesible a personas con discapacidad.

http://www.w3.org/WAI/

Pautas. Su fin principal es promover la accesibilidad. Siguindolas, se har la Web ms asequible tambin para todos los usuarios.

http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html

Tcnicas para aplicarlas (http://www.discapnet.es/web_accesible/tecnicas/WCAG10-TECHS-20001106_es.html) Puntos de verificacin automticos

Software de apoyo (HERA, TAW, etc)http://accesibilidad.cicei.ulpgc.es/introduccion.html

Puntos de verificacin manuales Falsa accesibilidad:

http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css Desarrollo de aplicaciones web y portales de informacin en ATICA.

NORMAWEB (http://www.um.es/atica/mncs/normaweb). La accesibilidad ser un requisito de primer nivel para todas las aplicaciones web, soslayable slo en el caso de que impida la implementacin de alguna funcionalidad bsica.

http://www.w3.org/WAI/http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.htmlhttp://www.discapnet.es/web_accesible/tecnicas/WCAG10-TECHS-20001106_es.htmlhttp://accesibilidad.cicei.ulpgc.es/introduccion.htmlhttp://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.csshttp://www.um.es/atica/mncs/normaweb

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 44

Herramientas

WAT-C (Web Accessibility Tools Consortium). Proporciona herramientas libres, que ayuden tanto a desarrolladores como a diseadores, en la creacin de contenidos web accesibles.

http://www.wat-c.org/tools/index.html

Firefox

Extensin HERA http://www.sidar.org/extension/#heraextension

Colour Contrast Analyzer http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php

Web Developer http://chrispederick.com/work/webdeveloper

Explorer

Web Developer http://www.visionaustralia.org.au/ais/toolbar

http://www.wat-c.org/tools/index.htmlhttp://www.sidar.org/extension/#heraextensionhttp://juicystudio.com/article/colour-contrast-analyser-firefox-extension.phphttp://chrispederick.com/work/webdeveloperhttp://www.visionaustralia.org.au/ais/toolbar

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 55

Herramientas

Escritorio

TAW descargable http://www.tawdis.net/taw3/cms/es/herramientas/desktop.html Permite la validacin en local y en lnea Soporte de protocolo seguro (HTTPS) Posibilidad de acceso a travs de proxy

Lectores de pantalla http://www.cuervoblanco.com/descargas_discapacidad.html

Navegador de texto Lynx http://lynx.browser.org/

Cmo validar una pgina dinmica o que el validador no admite?

Ser necesario guardar una copia de la pgina, y una de dos: usar una herramienta de escritorio para la validacin, o subirla a un servidor pblico, y validarla con las herramientas

disponibles va web (TAW, HERA, etc)

http://www.tawdis.net/taw3/cms/es/herramientas/desktop.htmlhttp://www.cuervoblanco.com/descargas_discapacidad.htmlhttp://lynx.browser.org/

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 66

1. Proporcione alternativas equivalentes para el contenido sonoro y visual

Las alternativas deben suplir completamente la informacin inaccesible.

Imgenes y cualquier grfico: alt y longdesc

Objetos programados, sonido, vdeo, flash...: object

Con la extensin Web Developer podemos deshabilitar las imgenes y mostrar el texto alternativo en su lugar

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 77

1. Proporcione alternativas equivalentes para el contenido sonoro y visual

Marcos: atributo noframes

Versin sin marcos

Descripciones de los marcos.

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 88

1. Proporcione alternativas equivalentes para el contenido sonoro y visual

Descripciones de los marcos:

#barranavega - este marco contiene vnculos a las secciones ms importantes de este sitio: Noticias del mundo, Noticias nacionales, Noticias locales, Noticias tecnologa, y Noticias del ocio.

#noticia - este marco contiene la historia actualmente seleccionada.

#indice - este marco contiene vnculos a las noticias principales de hoy dentro de esta seccin.

Para ver la versin sin marcos de una pgina, se puede utilizar el navegador de texto Lynx

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 99

2. No basarse slo en el color

Toda la informacin transmitida a travs del color debe estar disponible sin l, mediante el contexto o marcadores:

Ejemplo: identificacin de mensajes de error o de xito mediante colores o imgenes de fondo

Proporcionar suficiente contraste entre el color de fondo y de primer plano tanto en texto como en imgenes

Con la extensin Colour Contrast Analyzer se ejecuta el test automtico que indica los colores con insuficiente contraste para el texto

No se han podido insertar los datos

No se han podido insertar los datos

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 1010

3. Utilice marcadores y hojas de estilo y hgalo de la forma apropiada

Crear documentos validados

Utilizar los marcadores para definir la estructura del documento

Usar marcadores en vez de imgenes para transmitir informacin

Evitar el uso de marcadores para dar formato

Esto es un ttulo con margen grande

Esto tambin es un ttulo con margen grande

H1 {margin-top:15px;margin-bottom:15px;}

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 1111

3. Utilice marcadores y hojas de estilo y hgalo de la forma apropiada

Utilizar hojas de estilo para maquetacin y presentacin

Especificar tamaos de texto y medidas con unidades relativas

Em, %, small, big

H1 {width:50%;text-align:right;}

H1 img {border:none;}

2006. ATICA. Universidad de Murcia. Seminario TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0TCNICAS PARA LAS PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0 Pg Pg 1212

4. Identifique el idioma utilizado

Sealar el idioma principal