CÓMO DESARROLLAR APLICACIONES WEB · PDF filePAUTAS DE ACCESIBILIDAD DEL W3C W3C WAI...

Click here to load reader

  • date post

    21-Sep-2018
  • Category

    Documents

  • view

    215
  • download

    0

Embed Size (px)

Transcript of CÓMO DESARROLLAR APLICACIONES WEB · PDF filePAUTAS DE ACCESIBILIDAD DEL W3C W3C WAI...

  • 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 ([email protected])Inmaculada Bermejo Salar ([email protected])

    Juan Luis Serradilla Amarilla ([email protected])Juan Luis Serradilla Amarilla ([email protected])

  • 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