Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand...

27
1 Dise Diseñ o Web Accesible 1 o Web Accesible 1 Lo Loï c Mart c Martí nez Normand nez Normand Fundaci Fundación Sidar n Sidar Facultad de Inform Facultad de Informática. UPM tica. UPM [email protected] [email protected] Contenidos Contenidos Presentaci Presentación El Consorcio de la Web (W3C) El Consorcio de la Web (W3C) Web Accesible Web Accesible La Iniciativa para la Accesibilidad Web La Iniciativa para la Accesibilidad Web (WAI) (WAI) Directrices WAI Directrices WAI

Transcript of Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand...

Page 1: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

1

DiseDiseñño Web Accesible 1o Web Accesible 1

LoLoïïc Martc Martíínez Normandnez NormandFundaciFundacióón Sidarn Sidar

Facultad de InformFacultad de Informáática. UPMtica. [email protected]@fi.upm.es

ContenidosContenidos•• PresentaciPresentacióónn•• El Consorcio de la Web (W3C)El Consorcio de la Web (W3C)•• Web AccesibleWeb Accesible•• La Iniciativa para la Accesibilidad Web La Iniciativa para la Accesibilidad Web

(WAI)(WAI)•• Directrices WAIDirectrices WAI

Page 2: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

2

PresentaciPresentacióónn

PresentaciPresentacióón n –– LoLoïïc Martc Martííneznez

•• Doctor en InformDoctor en Informáática tica –– UPMUPM•• Profesor de la Facultad de InformProfesor de la Facultad de Informáática tica --

UPMUPM•• Investigador en SETIAM desde 1995Investigador en SETIAM desde 1995•• Presidente de FundaciPresidente de Fundacióón Sidar n Sidar –– Acceso Acceso

UniversalUniversal•• Presidente de AEN CTN139 / SC8Presidente de AEN CTN139 / SC8•• Experto en ISO TC 159 / SC 4 / WG 5Experto en ISO TC 159 / SC 4 / WG 5

Page 3: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

3

PresentaciPresentacióón n -- SETIAMSETIAM•• SecciSeccióón de Transferencia Informn de Transferencia Informáática en tica en

Apoyo de las MinusvalApoyo de las Minusvalííasas•• Perteneciente a CETTICO: Centro de Perteneciente a CETTICO: Centro de

Transferencia TecnolTransferencia Tecnolóógica en Informgica en Informáática y tica y ComunicacionesComunicaciones

•• Creado en 1988Creado en 1988•• Desarrollo de software adaptado para Desarrollo de software adaptado para

personas con discapacidadpersonas con discapacidad•• ColaboraciColaboracióón con ONCE, Fundacin con ONCE, Fundacióón ONCE, n ONCE,

IMSERSO, CNSE, Ministerio de EducaciIMSERSO, CNSE, Ministerio de Educacióón, n, Comunidad de Madrid, etc.Comunidad de Madrid, etc.

PresentaciPresentacióón n -- SidarSidar•• Seminario SIDARSeminario SIDAR

–– ““Seminario Iberoamericano sobre Seminario Iberoamericano sobre Discapacidad y Accesibilidad en la RedDiscapacidad y Accesibilidad en la Red””

–– Creado en 1997, dependiendo del Real Creado en 1997, dependiendo del Real Patronato sobre DiscapacidadPatronato sobre Discapacidad

–– Referencia en accesibilidad Web en EspaReferencia en accesibilidad Web en Españñolol

•• FundaciFundacióón Sidar n Sidar –– Acceso UniversalAcceso Universal–– Desde 2002 Desde 2002 –– Independencia del Real Independencia del Real

PatronatoPatronato–– Actividades: informaciActividades: informacióón, formacin, formacióón, n,

investigaciinvestigacióón, intercambio, consultorn, intercambio, consultorííaa

www.sidar.orgwww.sidar.org

Page 4: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

4

PresentaciPresentacióón n –– 139/SC8139/SC8•• Desarrollo de normas tDesarrollo de normas téécnicas de cnicas de

accesibilidad en informaccesibilidad en informááticatica•• Normas publicadasNormas publicadas::

–– UNE 139801:2003UNE 139801:2003 hardware de hardware de ordenadores personalesordenadores personales

–– UNE 139802:2003UNE 139802:2003 software de software de ordenadores personalesordenadores personales

–– UNE 139803:2004UNE 139803:2004 contenidos webcontenidos web

•• En preparaciEn preparacióónn::–– PNE 139804PNE 139804 lengua de signos en redes lengua de signos en redes

informinformááticasticas

El Consorcio de la WebEl Consorcio de la Web

Page 5: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

5

World Wide WebWorld Wide Web•• Inventada por Inventada por TimTim BernersBerners--Lee y creada en Lee y creada en

CERNCERN•• HistoriaHistoria

–– 19651965: Definici: Definicióón de hipertexton de hipertexto–– 19801980: : ““EnquireEnquire--WithinWithin--UponUpon--EverythingEverything””–– 19891989: : ““Information Management: A proposalInformation Management: A proposal””–– 19901990: Primer : Primer navegador+editornavegador+editor, , ““WorldWideWebWorldWideWeb””..–– 19911991: : SeminarioSeminario en CERN en CERN sobresobre WWWWWW–– 19931993: CERN : CERN declaradeclara queque WWW WWW puedepuede ser ser usadousado

librementelibremente. . PrimeraPrimera versiversióónn del del navegadornavegador Mosaic de Mosaic de NCSA.NCSA.

–– 19941994: Primera conferencia internacional de WWW: Primera conferencia internacional de WWW

Consorcio de la Web (W3C)Consorcio de la Web (W3C)•• Creado en 1994Creado en 1994 por por TimTim BernersBerners--LeeLee

–– Laboratorio de Ciencia de la ComputaciLaboratorio de Ciencia de la Computacióón de n de MITMIT–– En colaboraciEn colaboracióón con n con CERNCERN–– Con el apoyo de Con el apoyo de DARPADARPA y la y la ComisiComisióón European Europea

•• SedesSedes::–– MITMIT–– En abril de 1995, En abril de 1995, INRIAINRIA se convierte en la Sede se convierte en la Sede

Europea del W3CEuropea del W3C–– En 1996, La En 1996, La Universidad de Universidad de KeioKeio de Japde Japóón n es es

Sede AsiSede Asiááticatica–– En 2003, En 2003, ERCIMERCIM se convierte en la Sede Europease convierte en la Sede Europea–– Por otro lado existen Por otro lado existen Oficinas Regionales Oficinas Regionales del W3Cdel W3C

•• Actualmente W3C tiene unos Actualmente W3C tiene unos 429 miembros429 miembros

Page 6: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

6

MisiMisióón del W3Cn del W3C•• W3C se compromete a W3C se compromete a liderar la liderar la

evolucievolucióón tn téécnica de la Webcnica de la Web::–– Promoviendo la interoperabilidadPromoviendo la interoperabilidad–– Fomentando un foro abierto para discusiFomentando un foro abierto para discusióónn

•• W3C estW3C estáá sentando las bases sentando las bases de la de la siguiente generacisiguiente generacióón de la Web:n de la Web:–– Para cubrir las crecientes expectativas de Para cubrir las crecientes expectativas de

los usuarios y la creciente potencia de los los usuarios y la creciente potencia de los ordenadoresordenadores

Objetivos del W3CObjetivos del W3C•• Acceso UniversalAcceso Universal: :

–– Lograr una Web accesible para todosLograr una Web accesible para todos–– Promoviendo tecnologPromoviendo tecnologíías que tengan en cuenta la as que tengan en cuenta la

diversidad de usuarios en todos los continentesdiversidad de usuarios en todos los continentes–– Las diferencias incluyen: cultura, idioma, educaciLas diferencias incluyen: cultura, idioma, educacióón, n,

habilidades, recursos materiales, dispositivos de habilidades, recursos materiales, dispositivos de acceso, limitaciones facceso, limitaciones fíísicas, sicas, ……

•• Web SemWeb Semáánticantica: : –– Desarrollar un entorno software que permita a cada Desarrollar un entorno software que permita a cada

usuario lograr el mejor uso posible de los recursos usuario lograr el mejor uso posible de los recursos disponibles en la Webdisponibles en la Web

•• Web de ConfianzaWeb de Confianza: : –– Dirigir el desarrollo de la Web con especial atenciDirigir el desarrollo de la Web con especial atencióón n

en los aspectos legales, comerciales y sociales en los aspectos legales, comerciales y sociales planteados por esta tecnologplanteados por esta tecnologííaa

Page 7: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

7

El Papel del W3CEl Papel del W3C•• VisiVisióónn: :

–– W3C Promociona y desarrolla su visiW3C Promociona y desarrolla su visióón del futuro de n del futuro de la Webla Web

–– Las contribuciones realizadas por cientos de Las contribuciones realizadas por cientos de investigadores e ingenieros permiten que el W3C investigadores e ingenieros permiten que el W3C identifique los requisitos tidentifique los requisitos téécnicos que deben cnicos que deben satisfacerse para que la Web sea realmente un satisfacerse para que la Web sea realmente un espacio universal de informaciespacio universal de informacióónn

•• DiseDiseññoo: : –– W3C diseW3C diseñña tecnologa tecnologíías Web para lograr su visias Web para lograr su visióónn

•• NormalizaciNormalizacióónn: : –– W3C contribuye al esfuerzo de estandarizar las W3C contribuye al esfuerzo de estandarizar las

tecnologtecnologíías Web mediante sus especificaciones: as Web mediante sus especificaciones: RecomendacionesRecomendaciones

–– Las Recomendaciones del W3C (y otros informes Las Recomendaciones del W3C (y otros informes ttéécnicos) son de cnicos) son de acceso libre acceso libre para todospara todos

Principios de DisePrincipios de Diseñño o •• InteroperabilidadInteroperabilidad: :

–– Las especificaciones de lenguajes y protocolos de la Las especificaciones de lenguajes y protocolos de la Web deben ser compatibles entre sWeb deben ser compatibles entre síí y deben permitir y deben permitir que cualquier hardware y software utilizado para que cualquier hardware y software utilizado para acceder a la Web funcione adecuadamente.acceder a la Web funcione adecuadamente.

•• EvoluciEvolucióónn: : –– La Web debe ser capaz de asumir tecnologLa Web debe ser capaz de asumir tecnologíías futurasas futuras–– La simplicidad, la La simplicidad, la modularidadmodularidad y la capacidad de y la capacidad de

ampliaciampliacióón aumentarn aumentaráán las posibilidades de que la n las posibilidades de que la Web pueda trabajar con las tecnologWeb pueda trabajar con las tecnologíías emergentesas emergentes

•• DescentralizaciDescentralizacióónn: : –– La arquitectura debe limitar o eliminar dependencias La arquitectura debe limitar o eliminar dependencias

de registros centrales, con el fin de permitir que la de registros centrales, con el fin de permitir que la Web crezca hacia proporciones mundiales pero Web crezca hacia proporciones mundiales pero resistiendo errores y roturasresistiendo errores y roturas

Page 8: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

8

Recomendaciones W3CRecomendaciones W3C

Retos del W3CRetos del W3C•• Asegurar el acceso a la Web desde Asegurar el acceso a la Web desde

distintos dispositivosdistintos dispositivos•• Promover las mejores prPromover las mejores práácticascticas•• Coordinarse con la legislaciCoordinarse con la legislacióónn•• Tener en cuenta la diversidad culturalTener en cuenta la diversidad cultural•• Fomentar la investigaciFomentar la investigacióónn

Page 9: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

9

Web accesibleWeb accesible

Accesibilidad WebAccesibilidad Web•• Acceso a la Web por cualquier persona, Acceso a la Web por cualquier persona,

independientemente de la discapacidadindependientemente de la discapacidad

•• ¿¿Por quPor quéé es importante?es importante?–– El uso de la Web se estEl uso de la Web se estáá extendiendo rextendiendo ráápidamente pidamente

en toda la sociedaden toda la sociedad–– Existen barreras en la Web para muchos tipos de Existen barreras en la Web para muchos tipos de

discapacidaddiscapacidad–– Millones de personas tienen deficiencias que afectan Millones de personas tienen deficiencias que afectan

a su acceso a la Weba su acceso a la Web–– Algunos sitios Web deben ser accesibles por leyAlgunos sitios Web deben ser accesibles por ley–– La accesibilidad Web tambiLa accesibilidad Web tambiéén beneficia a otros n beneficia a otros

usuariosusuarios

Page 10: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

10

Impacto de la WebImpacto de la Web•• Es un Es un recurso claverecurso clave para:para:

–– Noticias, informaciNoticias, informacióón, comercio, ocion, comercio, ocio–– FormaciFormacióón en clase y a distancian en clase y a distancia–– BBúúsqueda de empleo e interaccisqueda de empleo e interaccióón en el trabajon en el trabajo–– ParticipaciParticipacióón civil y servicios gubernamentalesn civil y servicios gubernamentales

•• EstEstáá desplazando a las fuentes tradicionalesdesplazando a las fuentes tradicionales–– Escuelas, bibliotecas, material impreso...Escuelas, bibliotecas, material impreso...–– Algunas eran accesibles y otras noAlgunas eran accesibles y otras no

Una Web accesible supone una posibilidad de Una Web accesible supone una posibilidad de acceso a la informaciacceso a la informacióón n sin precedentessin precedentes para para las personas con discapacidadlas personas con discapacidad

Dificultades de AccesoDificultades de Acceso•• Personas con discapacidadPersonas con discapacidad

–– Deficiencias fDeficiencias fíísicas o sensorialessicas o sensoriales–– Deficiencias cognitivas o de lenguajeDeficiencias cognitivas o de lenguaje–– Entornos que causan discapacidad (ruido, mala Entornos que causan discapacidad (ruido, mala

iluminaciiluminacióón, n, ……))

•• Personas mayoresPersonas mayores•• Analfabetismo y Analfabetismo tecnolAnalfabetismo y Analfabetismo tecnolóógicogico•• Limitaciones tLimitaciones téécnicas:cnicas:

–– Dispositivos antiguos o lentosDispositivos antiguos o lentos–– Dispositivos modernosDispositivos modernos

¡¡¡¡La Accesibilidad Web es buena para La Accesibilidad Web es buena para todos!!todos!!

Page 11: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

11

Accesibilidad: costesAccesibilidad: costes•• Desde el diseDesde el diseññoo

–– ““Coste 0Coste 0””–– Forma parte de la rutina de trabajoForma parte de la rutina de trabajo–– Ejemplos:Ejemplos:

•• Normas de calidad (ISO 9000)Normas de calidad (ISO 9000)•• Normas de gestiNormas de gestióón del medio ambienten del medio ambiente

•• ReformaReforma–– 5% del presupuesto total5% del presupuesto total–– Ejemplo: JJOO Ejemplo: JJOO SidneySidney

La ideaLa idea

““El poder de la Web estEl poder de la Web estáá en su en su universalidad.universalidad. Que todo el mundo pueda Que todo el mundo pueda acceder, a pesar de la discapacidad, es acceder, a pesar de la discapacidad, es

un aspecto esencial.un aspecto esencial.””

TimTim BernersBerners--LeeLee

Page 12: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

12

La Iniciativa para la Accesibilidad WebLa Iniciativa para la Accesibilidad Web

Web Accessibility InitiativeWeb Accessibility Initiative--WAIWAI•• ObjetivoObjetivo: : accesibilidad de la Webaccesibilidad de la Web•• Creado en 1997Creado en 1997•• ParticipantesParticipantes

–– Administraciones pAdministraciones púúblicasblicas–– EmpresasEmpresas–– UniversidadesUniversidades–– Asociaciones de personas con discapacidadAsociaciones de personas con discapacidad

•• Grupos de trabajoGrupos de trabajo::–– Protocolos y formatosProtocolos y formatos–– Desarrollo de Directrices: Desarrollo de Directrices:

•• Contenidos, Herramientas de autor, Navegadores, XMLContenidos, Herramientas de autor, Navegadores, XML–– Herramientas para evaluaciHerramientas para evaluacióón y reparacin y reparacióónn–– FormaciFormacióón y Difusin y Difusióónn–– I+DI+D

Page 13: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

13

1. Protocolos y Formatos1. Protocolos y Formatos•• Comprueba que las tecnologComprueba que las tecnologíías del W3C as del W3C

soportan la accesibilidadsoportan la accesibilidad•• Revisa especificacionesRevisa especificaciones•• Produce requisitos y comentarios de Produce requisitos y comentarios de

revisirevisióónn•• EstEstáá desarrollando desarrollando ““directrices de directrices de

accesibilidad a XMLaccesibilidad a XML”” (XAG)(XAG)

2. Desarrollo de directrices2. Desarrollo de directrices•• Cuatro gruposCuatro grupos

–– CreaciCreacióón de sitios Web accesiblesn de sitios Web accesibles•• Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines ((WCAG WCAG 1.0)1.0)

–– Herramientas que permitan crear sitios Web Herramientas que permitan crear sitios Web accesiblesaccesibles•• Authoring Tool Accessibility GuidelinesAuthoring Tool Accessibility Guidelines ((ATAGATAG

1.0)1.0)

–– Navegadores accesiblesNavegadores accesibles•• User Agent Accessibility GuidelinesUser Agent Accessibility Guidelines ((UAAG UAAG 1.0)1.0)

–– Aplicaciones XML con soporte de Aplicaciones XML con soporte de accesibilidadaccesibilidad•• XML Accessibility GuidelinesXML Accessibility Guidelines ((XAGXAG))

Page 14: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

14

3. Herramientas3. Herramientas•• DesarrollDesarrollóó una una coleccicoleccióón inicial de tn inicial de téécnicascnicas

para revisipara revisióón y reparacin y reparacióón de la accesibilidadn de la accesibilidad•• Mantiene un Mantiene un listado de herramientaslistado de herramientas de de

revisirevisióón y reparacin y reparacióónn•• Desarrolla un Desarrolla un lenguaje lenguaje para evaluaciones e para evaluaciones e

informes:informes:–– ““Evaluation and Report LanguageEvaluation and Report Language”” (EARL)(EARL)–– EsquemaEsquema RDF RDF parapara almacenaralmacenar, , transferirtransferir y y procesarprocesar

datosdatos sobresobre la la evaluacievaluacióónn automautomááticatica o manual de o manual de recursosrecursos

4. Formaci4. Formacióón y Difusin y Difusióónn•• Desarrolla recursos y estrategias para Desarrolla recursos y estrategias para

promover la accesibilidad Webpromover la accesibilidad Web•• Ejemplos de materiales:Ejemplos de materiales:

–– ““QuickQuick tipstips””–– CurrCurríículoculo–– LegislaciLegislacióónn–– Navegadores alternativosNavegadores alternativos–– EvaluaciEvaluacióónn–– CCóómo usan la Web las personas con mo usan la Web las personas con

discapacidaddiscapacidad•• httphttp://://www.w3www.w3..orgorg/WAI/EO//WAI/EO/DraftsDrafts/PWD/PWD--UseUse--

Web/Web/

Page 15: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

15

5. Investigaci5. Investigacióón y Desarrollon y Desarrollo•• SeminariosSeminarios sobre I+D en Web accesiblesobre I+D en Web accesible

–– Realidad virtualRealidad virtual–– EE--LearningLearning–– ......

•• Identifica lIdentifica lííneas de trabajoneas de trabajo potencialespotenciales•• Y las publica para interY las publica para interéés generals general

Directrices WAIDirectrices WAI

Page 16: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

16

DirectricesDirectrices1.1. Contenido Web: WCAGContenido Web: WCAG2.2. Herramientas de Autor: ATAGHerramientas de Autor: ATAG3.3. Navegadores: UAAGNavegadores: UAAG4.4. Aplicaciones XML: XALAplicaciones XML: XAL

WCAG 1.0WCAG 1.0•• Directrices de Accesibilidad a los Directrices de Accesibilidad a los

Contenidos WebContenidos Web•• RecomendaciRecomendacióón W3C del 5n W3C del 5--55--19991999•• CCóómo deben ser los contenidos Web mo deben ser los contenidos Web

accesiblesaccesibles•• Contiene pautas generales: Contiene pautas generales: directricesdirectrices•• Cada directriz tiene Cada directriz tiene puntos de puntos de

verificaciverificacióónn•• Cada punto tiene una Cada punto tiene una prioridadprioridad (1 a 3)(1 a 3)•• Se estSe estáá desarrollando una desarrollando una nueva nueva

versiversióónn (WCAG 2.0)(WCAG 2.0)

Page 17: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

17

WCAG 1.0 WCAG 1.0 -- ApoyoApoyo•• Lista de comprobaciLista de comprobacióónn•• TTéécnicascnicas•• Preguntas mPreguntas máás frecuentess frecuentes•• Logotipos Logotipos •• TraduccionesTraducciones

–– SSóólo es una recomendacilo es una recomendacióón oficial la versin oficial la versióón n original en ingloriginal en inglééss

•• ““QuickQuick tipstips””•• CCóómo evaluar la accesibilidadmo evaluar la accesibilidad•• Como implantar la accesibilidadComo implantar la accesibilidad

ATAG 1.0ATAG 1.0•• Pautas de Accesibilidad de las Pautas de Accesibilidad de las Herramientas de AutorHerramientas de Autor

(Desarrollo)(Desarrollo)•• RecomendaciRecomendacióón W3C del 2n W3C del 2--22--20002000•• Se aplica a:Se aplica a:

–– H. de EdiciH. de Edicióón disen diseññadas para producir contenidos Webadas para producir contenidos Web–– H. que pueden grabar materiales en formato WebH. que pueden grabar materiales en formato Web–– H. que transforman documentos a formatos WebH. que transforman documentos a formatos Web–– H. que producciH. que produccióón multimedia para la Webn multimedia para la Web–– H. para gestiH. para gestióón del sitio o publicacin del sitio o publicacióón de sitiosn de sitios–– Herramientas para la gestiHerramientas para la gestióón de la apariencian de la apariencia

•• ObjetivosObjetivos::–– La herramienta debe ser accesibleLa herramienta debe ser accesible–– Debe producir contenido accesible por omisiDebe producir contenido accesible por omisióónn–– Debe dar soporte y fomentar la producciDebe dar soporte y fomentar la produccióón de contenido n de contenido

accesibleaccesible•• Nueva versiNueva versióón en desarrollo (2.0)n en desarrollo (2.0)

Page 18: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

18

Directrices ATAG 1.0Directrices ATAG 1.01.1. Dar soporte a prDar soporte a práácticas accesibles de autorcticas accesibles de autorííaa2.2. Generar marcado estGenerar marcado estáándarndar3.3. Dar soporte a la creaciDar soporte a la creacióón de contenido n de contenido

accesibleaccesible4.4. Proporcionar medios para verificar y corregir Proporcionar medios para verificar y corregir

contenido inaccesiblecontenido inaccesible5.5. Integrar las soluciones de accesibilidad en la Integrar las soluciones de accesibilidad en la

interfaz de usuario (en el "interfaz de usuario (en el "look and feellook and feel““))6.6. Promover la accesibilidad en la ayuda y Promover la accesibilidad en la ayuda y

documentacidocumentacióónn7.7. Asegurar que la herramienta de autor es Asegurar que la herramienta de autor es

accesible para autores con discapacidadaccesible para autores con discapacidad

ATAG 1.0 ATAG 1.0 -- ApoyoApoyo•• Lista de comprobaciLista de comprobacióónn•• TTéécnicascnicas•• Preguntas mPreguntas máás frecuentess frecuentes•• LogotiposLogotipos•• TraduccionesTraducciones

Page 19: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

19

UAAG 1.0UAAG 1.0•• Pautas de Accesibilidad de los Pautas de Accesibilidad de los Agentes Agentes

de Usuariode Usuario (Navegadores)(Navegadores)•• RecomendaciRecomendacióón W3C en 17n W3C en 17--1212--20022002•• AplicacionesAplicaciones::

–– NavegadoresNavegadores–– Reproductores multimediaReproductores multimedia–– Su relaciSu relacióón con ayudas tn con ayudas téécnicascnicas

•• AspectosAspectos::–– Accesibilidad de la interfaz de usuarioAccesibilidad de la interfaz de usuario–– RepresentaciRepresentacióón de informacin de informacióón de n de

accesibilidadaccesibilidad–– Control del usuarioControl del usuario

Directrices UAAG 1.0Directrices UAAG 1.01.1. Admitir independencia de dispositivos de entrada y Admitir independencia de dispositivos de entrada y

salidasalida2.2. Asegurar el acceso del usuario a todo el contenidoAsegurar el acceso del usuario a todo el contenido3.3. Permitir la configuraciPermitir la configuracióón de la no visualizacin de la no visualizacióón de n de

contenido que pueda reducir la accesibilidadcontenido que pueda reducir la accesibilidad4.4. Asegurar control del usuario en la visualizaciAsegurar control del usuario en la visualizacióónn5.5. Asegurar control del usuario en el comportamiento de Asegurar control del usuario en el comportamiento de

la interfazla interfaz6.6. Implementar API Implementar API interoperablesinteroperables7.7. Mantener las convenciones del sistema operativoMantener las convenciones del sistema operativo8.8. Implementar especificaciones que benefician a la Implementar especificaciones que benefician a la

accesibilidadaccesibilidad9.9. Proporcionar mecanismos de navegaciProporcionar mecanismos de navegacióónn10.10. Orientar al usuarioOrientar al usuario11.11. Permitir configuraciPermitir configuracióón y adaptacin y adaptacióónn12.12. Proporcionar documentaciProporcionar documentacióón y ayuda accesiblesn y ayuda accesibles

Page 20: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

20

UAAG 1.0 UAAG 1.0 -- ApoyoApoyo•• Lista de comprobaciLista de comprobacióónn•• TTéécnicascnicas•• Preguntas mPreguntas máás frecuentess frecuentes•• Bancos de pruebaBancos de prueba•• Formularios de evaluaciFormularios de evaluacióónn•• LogotiposLogotipos•• Informes de implementaciInformes de implementacióónn

XAGXAG•• Directrices de Accesibilidad de XMLDirectrices de Accesibilidad de XML•• Borrador 3Borrador 3--1010--20022002•• CCóómo incluir caractermo incluir caracteríísticas en sticas en

aplicaciones XML que promuevan la aplicaciones XML que promuevan la accesibilidadaccesibilidad

•• Directrices:Directrices:1.1. Asegurar que los autores pueden asociar Asegurar que los autores pueden asociar

varios medios como alternativasvarios medios como alternativas2.2. Crear lenguajes semCrear lenguajes semáánticamente ricosnticamente ricos3.3. DiseDiseññar una interfaz de usuario accesiblear una interfaz de usuario accesible4.4. Documentar y exportar la semDocumentar y exportar la semáánticantica

Page 21: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

21

WCAG 1.0WCAG 1.0

WCAG: EstructuraWCAG: Estructura•• 14 14 directricesdirectrices de alto nivelde alto nivel•• Cada una tiene Cada una tiene puntos de verificacipuntos de verificacióónn (65)(65)

•• Los puntos tienen Los puntos tienen prioridadprioridad–– 11: : Debe satisfacerseDebe satisfacerse ((must satisfymust satisfy). En caso ). En caso

contrario es contrario es imposibleimposible acceder para algunos gruposacceder para algunos grupos–– 22: : DeberDeberíía cumplirse a cumplirse ((should satisfyshould satisfy). En caso ). En caso

contrario es contrario es muy difmuy difíícilcil accederacceder–– 33: : Puede cumplirse Puede cumplirse ((may addressmay address). En caso ). En caso

contrario puede ser contrario puede ser difdifíícilcil el accesoel acceso

•• Documento adicional: Documento adicional: ttéécnicascnicas–– CCóómo cumplir las directricesmo cumplir las directrices

Page 22: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

22

AnalogAnalogíía: rampasa: rampas

Prioridad 1 Una rampa bacheada

Prioridad 2 Una rampa correcta

Prioridad 3 Una rampa automática

Temas y cumplimientoTemas y cumplimiento•• TemasTemas (principios):(principios):

–– TransformaciTransformacióón n ““airosaairosa”” ((gracefulgraceful))•• Directrices 1Directrices 1--1111

–– Contenido fContenido fáácil de comprender y de navegarcil de comprender y de navegar•• Directrices 12Directrices 12--1414

•• Grados de Grados de cumplimientocumplimiento::““AA””: todos los puntos de prioridad 1: todos los puntos de prioridad 1

““AAAA””: todos los puntos de prioridad 1 y 2: todos los puntos de prioridad 1 y 2

““AAAAAA””: todos los puntos: todos los puntos

Page 23: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

23

DirectricesDirectrices1.1. Proporcione alternativas equivalentes Proporcione alternativas equivalentes

para el contenido visual y sonoropara el contenido visual y sonoroProporcione un contenido que, cuando sea Proporcione un contenido que, cuando sea presentado al usuario, cumpla presentado al usuario, cumpla esencialmente la misma funciesencialmente la misma funcióón o propn o propóósito sito que el contenido visual o sonoroque el contenido visual o sonoro

2.2. No confNo confííe se sóólo en el colorlo en el colorAsegAsegúúrese de que los textos y grrese de que los textos y grááficos son ficos son comprensibles cuando se vean sin color comprensibles cuando se vean sin color

DirectricesDirectrices3.3. Utilice marcadores y hojas de estilo, y Utilice marcadores y hojas de estilo, y

hháágalo apropiadamente galo apropiadamente Marque los documentos con los elementos Marque los documentos con los elementos estructurales apropiados. Controle la estructurales apropiados. Controle la presentacipresentacióón con hojas de estilo en vez de n con hojas de estilo en vez de con atributos y elementos de presentacicon atributos y elementos de presentacióónn

4.4. Aclare el lenguaje natural usadoAclare el lenguaje natural usadoUtilice el marcado para facilitar la Utilice el marcado para facilitar la pronunciacipronunciacióón o interpretacin o interpretacióón del texto n del texto abreviado o en idioma extranjero abreviado o en idioma extranjero

Page 24: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

24

DirectricesDirectrices5.5. Cree tablas que se transformen Cree tablas que se transformen

airosamente airosamente AsegAsegúúrese de que las tablas tienen el rese de que las tablas tienen el marcado necesario para ser transformadas marcado necesario para ser transformadas por navegadores accesibles y otras por navegadores accesibles y otras aplicaciones de usuarioaplicaciones de usuario

6.6. AsegAsegúúrese de que las prese de que las pááginas que ginas que incluyen nuevas tecnologincluyen nuevas tecnologíías se as se transfiguran airosamente transfiguran airosamente

AsegAsegúúrese de que las prese de que las pááginas son ginas son accesibles incluso cuando las tecnologaccesibles incluso cuando las tecnologíías as mmáás recientes no son soportadas o se s recientes no son soportadas o se deshabilitandeshabilitan

DirectricesDirectrices7.7. Garantice al usuario el control sobre Garantice al usuario el control sobre

los cambios del contenido temporizado los cambios del contenido temporizado AsegAsegúúrese de que puedan ser pausados o rese de que puedan ser pausados o detenidos los contenidos o pdetenidos los contenidos o pááginas que se ginas que se mueven, parpadean, se desplazan o se mueven, parpadean, se desplazan o se actualizan automactualizan automááticamenteticamente

8.8. Garantice la accesibilidad directa de Garantice la accesibilidad directa de las interfaces de usuario incrustadas las interfaces de usuario incrustadas

AsegAsegúúrese de que las interfaces de usuario rese de que las interfaces de usuario siguen los principios del disesiguen los principios del diseñño accesible: o accesible: acceso a la funcionalidad independiente del acceso a la funcionalidad independiente del tipo de dispositivo, operabilidad a travtipo de dispositivo, operabilidad a travéés del s del teclado, interfaz por voz, etc.teclado, interfaz por voz, etc.

Page 25: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

25

DirectricesDirectrices9.9. DiseDiseññe para la independencia del tipo e para la independencia del tipo

de dispositivo de dispositivo Use caracterUse caracteríísticas que permitan la sticas que permitan la activaciactivacióón de los elementos de la pn de los elementos de la páágina a gina a travtravéés de diversos dispositivos de entradas de diversos dispositivos de entrada

10.10.Utilice soluciones provisionales Utilice soluciones provisionales Use soluciones de accesibilidad Use soluciones de accesibilidad provisionales de manera que las ayudas provisionales de manera que las ayudas ttéécnicas y los navegadores antiguos puedan cnicas y los navegadores antiguos puedan funcionar correctamentefuncionar correctamente

DirectricesDirectrices11.11. Utilice las tecnologUtilice las tecnologíías y directrices del W3C as y directrices del W3C

Utilice las tecnologUtilice las tecnologíías del W3C (de acuerdo con la as del W3C (de acuerdo con la especificaciespecificacióón) y siga las directrices de n) y siga las directrices de accesibilidad. Cuando no sea posible utilizar una accesibilidad. Cuando no sea posible utilizar una tecnologtecnologíía del W3C, o hacerlo da como resultado un a del W3C, o hacerlo da como resultado un material que no se transforma airosamente, material que no se transforma airosamente, proporcione una versiproporcione una versióón alternativa del contenido n alternativa del contenido que sea accesibleque sea accesible

12.12. Proporcione informaciProporcione informacióón de contexto y n de contexto y orientaciorientacióónn

Para ayudar a los usuarios a entender los elementos Para ayudar a los usuarios a entender los elementos o po pááginas complejasginas complejas

Page 26: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

26

DirectricesDirectrices13.13.Proporcione mecanismos de Proporcione mecanismos de

navegacinavegacióón clarosn clarosProporcione mecanismos de navegaciProporcione mecanismos de navegacióón n claros y consistentes claros y consistentes ––informaciinformacióón n orientativaorientativa, barras de navegaci, barras de navegacióón, un mapa n, un mapa del sitio, etc.del sitio, etc.–– para incrementar la para incrementar la probabilidad de que una persona encuentre probabilidad de que una persona encuentre lo que estlo que estáá buscando en el sitiobuscando en el sitio

14.14.AsegAsegúúrese de que los documentos rese de que los documentos sean claros y sencillos sean claros y sencillos AsegAsegúúrese de que los documentos sean rese de que los documentos sean claros y sencillos de manera que puedan claros y sencillos de manera que puedan ser mser máás fs fáácilmente comprendidoscilmente comprendidos

Resumen de puntosResumen de puntosDirectriz

1234567891011121314

Prioridad 1 TotalesPrioridad 2 Prioridad 3

4 0 1 51 1 0 20 7 0 71 0 2 32 2 2 63 2 0 51 4 0 51 0 0 11 2 2 50 2 3 51 2 1 41 3 0 40 4 6 101 0 2 3

17 6529 19

Page 27: Diseño Web Accesible - Clase 1 - UPM · 1 Diseño Web Accesible 1 Loïc Martínez Normand Fundación Sidar Facultad de Informática. UPM loic@fi.upm.es Contenidos • Presentación

27

Resumen de puntosResumen de puntos

0

1

2

3

4

5

6

7

8

9

10

1 2 3 4 5 6 7 8 9 10 11 12 13 14

P3P2P1

0

1

2

3

4

5

6

7

8

9

10

1 2 3 4 5 6 7 8 9 10 11 12 13 14

P3P2P1