SlideShare uma empresa Scribd logo
1 de 10
Campus 5.0.
HTML, CSS y Accesibilidad Web.

Arantxa Hernández
Eines per a la Comunitat
Accesibilidad. Definición
UNIVERSITAT OBERTA DE CATALUNYA   11    Office of Learning Technologies · learningtechnologies.uoc.edu




1. ACCESIBILIDAD. Definición



                          ACCESIBILIDAD       =      ACCESO PARA CIEGOS

                         Grado con el que puede utilizarse un sitio Web,
                         con independencia de las capacidades físicas y
                                      técnicas del usuario.
UNIVERSITAT OBERTA DE CATALUNYA   12   Office of Learning Technologies · learningtechnologies.uoc.edu




1. ACCESIBILIDAD. Definición
       “No todo el mundo navega por la red como tú. Si entiendes la
       diferencia, ya has dado el primer paso para que hacer webs accesibles
       sea parte de tu rutina”
UNIVERSITAT OBERTA DE CATALUNYA   13   Office of Learning Technologies · learningtechnologies.uoc.edu




2. ACCESIBILIDAD = ACCESO UNIVERSAL
Mitos y Beneficios
UNIVERSITAT OBERTA DE CATALUNYA   14       Office of Learning Technologies · learningtechnologies.uoc.edu




3. Mitos
       ·     FALSO: La accesibilidad es sólo para discapacitados y en la práctica el número de usuarios
             beneficiados es muy bajo

       ·     FALSO: La accesibilidad obliga a crear dos versiones del sitio. Con una versión sólo texto se
             satisfacen los requisitos de accesibilidad

       ·     FALSO: Una web accesible es mucho más cara, compleja y lleva mucho más tiempo: no
             tenemos ni tiempo ni recursos

       ·     ERROR: Primero hagamos el sitio, luego ya lo haremos accesible

       ·     FALSO: La accesibilidad obliga a diseños primitivos y simples

       ·     FALSO: Los sitios accesibles deben tener el mismo aspecto en todos los navegadores

       ·     FALSO: Si el cliente no lo pide no es necesario

             FALSO: Si mi sitio tiene un público muy específico donde conozco el tipo de usuarios (una
             administración, una Intranet, …) no es necesario hacerlo accesible
UNIVERSITAT OBERTA DE CATALUNYA   14       Office of Learning Technologies · learningtechnologies.uoc.edu




4. Beneficios
       ·     Económicos: incrementa la cuota de mercado y alcance de audiencia, más visitas

       ·     Eficiencia técnica: más fácil de mantener y actualizar, mejora el motor de búsqueda del
             sitio, se reduce el tiempo de carga de las páginas

       ·     Calidad: sigue los estándares, independencia del dispositivo, multinavegador

       ·     Prestigio: demuestra responsabilidad social, diferenciación de la competencia, refuerza
             positivamente la imagen empresarial

       ·     Usabilidad: mejora la navegación y la experiencia de usuario, mayor claridad y eficacia

       ·     Legales: responsabilidad legal

       ·     Posicionamiento: proporciona un patrón de búsqueda más rápido en los buscadores porque
             el esquema de contenidos de la página es claro y conciso. Esto permite a los buscadores
             leer el contenido con facilidad, lo que conlleva un mejor posicionamiento Web en los
             buscadores por un tema concreto; y da soporte a la Web Semántica (Pauta 13.2
             Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2]
             ): metadatos, ficheros RDF, microformatos, atributos "rel" o "rev“, navegación semántica, etc.
Reglas de oro
UNIVERSITAT OBERTA DE CATALUNYA   14       Office of Learning Technologies · learningtechnologies.uoc.edu




5. 10 Reglas de oro para aplicar la Accesibilidad Web
       ·     Proporcionar alternativas de texto

       ·     Estructurar los contenidos

       ·     Evitar depender de un único sentido

       ·     Crear toda la funcionabilidad accesible
             con teclado

       ·     Dar tiempo suficiente

       ·     Evitar interferencias

       ·     Identificar enlaces y contenidos

       ·     Interfaces de navegación consistentes

       ·     Ayudar a los usuarios a evitar errores

       ·     Asegurar la compatibilidad

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Este
EsteEste
Este
 
Herramientas informaticas trabajo 1
Herramientas informaticas trabajo 1Herramientas informaticas trabajo 1
Herramientas informaticas trabajo 1
 
La web (web 1, web 2, web 3, web 4)
La web (web 1, web 2, web 3, web 4)La web (web 1, web 2, web 3, web 4)
La web (web 1, web 2, web 3, web 4)
 
La web cuadro comparativo
La web cuadro comparativoLa web cuadro comparativo
La web cuadro comparativo
 
DISEÑO WEB
DISEÑO WEBDISEÑO WEB
DISEÑO WEB
 
01 Accesibilidad.pptx
01 Accesibilidad.pptx01 Accesibilidad.pptx
01 Accesibilidad.pptx
 
INFORMACIÓN DE LAS WEBS
INFORMACIÓN DE LAS WEBSINFORMACIÓN DE LAS WEBS
INFORMACIÓN DE LAS WEBS
 
Relación entre la gestión del conocimento y web 2
Relación entre la gestión del conocimento y web 2Relación entre la gestión del conocimento y web 2
Relación entre la gestión del conocimento y web 2
 
Evolución de la Web
Evolución de la Web Evolución de la Web
Evolución de la Web
 
Presentación1
Presentación1Presentación1
Presentación1
 
Página web
Página webPágina web
Página web
 
Accesibilidad Web
Accesibilidad WebAccesibilidad Web
Accesibilidad Web
 
Modulo 3 (Parte 2)
Modulo 3 (Parte 2)Modulo 3 (Parte 2)
Modulo 3 (Parte 2)
 
La evolución de la web
La evolución de la webLa evolución de la web
La evolución de la web
 
Web presentacion
Web  presentacionWeb  presentacion
Web presentacion
 
Accesibilidad web acceso y credibilidad
Accesibilidad web   acceso y credibilidadAccesibilidad web   acceso y credibilidad
Accesibilidad web acceso y credibilidad
 

Semelhante a Campus 5.0. HTML, CSS y Accesibilidad Web

Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webpaoloarevaloortiz
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacionsoniafm
 
Accesibilidad web por Luis Felipe Martinez
Accesibilidad web por Luis Felipe MartinezAccesibilidad web por Luis Felipe Martinez
Accesibilidad web por Luis Felipe Martinezbareto
 
Accesibilidad Web
Accesibilidad WebAccesibilidad Web
Accesibilidad Webqweos
 
Caracteristica,usos,ventajay deventajas de la web 1
Caracteristica,usos,ventajay deventajas de la web 1Caracteristica,usos,ventajay deventajas de la web 1
Caracteristica,usos,ventajay deventajas de la web 1luis catillo
 
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebAccesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebJesus Jimenez
 
Atividad evaluada de laboratorio (2)
Atividad evaluada de laboratorio (2)Atividad evaluada de laboratorio (2)
Atividad evaluada de laboratorio (2)doroteamendezr
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolioEnrique Reyes
 
Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert Arevalo
 

Semelhante a Campus 5.0. HTML, CSS y Accesibilidad Web (20)

Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la web
 
Web
WebWeb
Web
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacion
 
Accesibilidad web por Luis Felipe Martinez
Accesibilidad web por Luis Felipe MartinezAccesibilidad web por Luis Felipe Martinez
Accesibilidad web por Luis Felipe Martinez
 
Articulo Accesibilidad
Articulo AccesibilidadArticulo Accesibilidad
Articulo Accesibilidad
 
Accesibilidad Web
Accesibilidad WebAccesibilidad Web
Accesibilidad Web
 
Sesion 01v3
Sesion 01v3Sesion 01v3
Sesion 01v3
 
Caracteristica,usos,ventajay deventajas de la web 1
Caracteristica,usos,ventajay deventajas de la web 1Caracteristica,usos,ventajay deventajas de la web 1
Caracteristica,usos,ventajay deventajas de la web 1
 
Investigación unidad II
Investigación unidad IIInvestigación unidad II
Investigación unidad II
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
interfaz
interfazinterfaz
interfaz
 
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebAccesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
 
Sergio alexis guerrero portafolio
Sergio alexis guerrero portafolioSergio alexis guerrero portafolio
Sergio alexis guerrero portafolio
 
Cloud
CloudCloud
Cloud
 
Atividad evaluada de laboratorio (2)
Atividad evaluada de laboratorio (2)Atividad evaluada de laboratorio (2)
Atividad evaluada de laboratorio (2)
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolio
 
Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.
 
Actividad Nº29
Actividad Nº29Actividad Nº29
Actividad Nº29
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
Internet
Internet Internet
Internet
 

Mais de Office of Learning Technologies, Universitat Oberta de Catalunya

Mais de Office of Learning Technologies, Universitat Oberta de Catalunya (20)

My uoc mobil
My uoc mobilMy uoc mobil
My uoc mobil
 
How to design a mobile learning environement csedu 2014
How to design a mobile learning environement csedu 2014How to design a mobile learning environement csedu 2014
How to design a mobile learning environement csedu 2014
 
Presentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprintPresentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprint
 
Introducció a la programació en android (recovered)
Introducció a la programació en android (recovered)Introducció a la programació en android (recovered)
Introducció a la programació en android (recovered)
 
Diseño universal y personalización en entornos virtuales de aprendizaje para...
Diseño universal y personalización en entornos virtuales  de aprendizaje para...Diseño universal y personalización en entornos virtuales  de aprendizaje para...
Diseño universal y personalización en entornos virtuales de aprendizaje para...
 
2.0 features in institutional repositories: The point of view of end-users
2.0 features in institutional repositories: The point of view of end-users2.0 features in institutional repositories: The point of view of end-users
2.0 features in institutional repositories: The point of view of end-users
 
Using the personas method to describe visually impaired students using an onl...
Using the personas method to describe visually impaired students using an onl...Using the personas method to describe visually impaired students using an onl...
Using the personas method to describe visually impaired students using an onl...
 
Estudiantes con discapacidad visual en la uoc y elearning: recomendaciones
Estudiantes con discapacidad visual en la uoc y elearning: recomendacionesEstudiantes con discapacidad visual en la uoc y elearning: recomendaciones
Estudiantes con discapacidad visual en la uoc y elearning: recomendaciones
 
Augmented reality & cultural heritage eiasm 2013
Augmented reality & cultural heritage   eiasm 2013Augmented reality & cultural heritage   eiasm 2013
Augmented reality & cultural heritage eiasm 2013
 
Augmented reality, education & tourism
Augmented reality, education & tourism Augmented reality, education & tourism
Augmented reality, education & tourism
 
E-learning, tourism and augmented reality
E-learning, tourism and augmented realityE-learning, tourism and augmented reality
E-learning, tourism and augmented reality
 
Education and augmented reality: the cultural heritage
Education and augmented reality: the cultural heritageEducation and augmented reality: the cultural heritage
Education and augmented reality: the cultural heritage
 
Augmented reality
Augmented reality   Augmented reality
Augmented reality
 
Exploration in m-learning, two case studies: iPad application and web version...
Exploration in m-learning, two case studies: iPad application and web version...Exploration in m-learning, two case studies: iPad application and web version...
Exploration in m-learning, two case studies: iPad application and web version...
 
Laboratorio de Accesibilidad:
Laboratorio de Accesibilidad:Laboratorio de Accesibilidad:
Laboratorio de Accesibilidad:
 
Iuoc mobile2.0 2011
Iuoc mobile2.0 2011Iuoc mobile2.0 2011
Iuoc mobile2.0 2011
 
iUOC: enhanced mobile learning at UOC_EUNIS 2011
iUOC: enhanced mobile learning at UOC_EUNIS 2011iUOC: enhanced mobile learning at UOC_EUNIS 2011
iUOC: enhanced mobile learning at UOC_EUNIS 2011
 
Mobile learning scenarios from a UCD perspective. Madness session presentatio...
Mobile learning scenarios from a UCD perspective. Madness session presentatio...Mobile learning scenarios from a UCD perspective. Madness session presentatio...
Mobile learning scenarios from a UCD perspective. Madness session presentatio...
 
Gestion de proyectos orientados a dispositivos móviles
Gestion de proyectos orientados a dispositivos móvilesGestion de proyectos orientados a dispositivos móviles
Gestion de proyectos orientados a dispositivos móviles
 
Presentació o2
Presentació o2Presentació o2
Presentació o2
 

Último

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 

Último (11)

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 

Campus 5.0. HTML, CSS y Accesibilidad Web

  • 1. Campus 5.0. HTML, CSS y Accesibilidad Web. Arantxa Hernández Eines per a la Comunitat
  • 3. UNIVERSITAT OBERTA DE CATALUNYA 11 Office of Learning Technologies · learningtechnologies.uoc.edu 1. ACCESIBILIDAD. Definición ACCESIBILIDAD = ACCESO PARA CIEGOS Grado con el que puede utilizarse un sitio Web, con independencia de las capacidades físicas y técnicas del usuario.
  • 4. UNIVERSITAT OBERTA DE CATALUNYA 12 Office of Learning Technologies · learningtechnologies.uoc.edu 1. ACCESIBILIDAD. Definición “No todo el mundo navega por la red como tú. Si entiendes la diferencia, ya has dado el primer paso para que hacer webs accesibles sea parte de tu rutina”
  • 5. UNIVERSITAT OBERTA DE CATALUNYA 13 Office of Learning Technologies · learningtechnologies.uoc.edu 2. ACCESIBILIDAD = ACCESO UNIVERSAL
  • 7. UNIVERSITAT OBERTA DE CATALUNYA 14 Office of Learning Technologies · learningtechnologies.uoc.edu 3. Mitos · FALSO: La accesibilidad es sólo para discapacitados y en la práctica el número de usuarios beneficiados es muy bajo · FALSO: La accesibilidad obliga a crear dos versiones del sitio. Con una versión sólo texto se satisfacen los requisitos de accesibilidad · FALSO: Una web accesible es mucho más cara, compleja y lleva mucho más tiempo: no tenemos ni tiempo ni recursos · ERROR: Primero hagamos el sitio, luego ya lo haremos accesible · FALSO: La accesibilidad obliga a diseños primitivos y simples · FALSO: Los sitios accesibles deben tener el mismo aspecto en todos los navegadores · FALSO: Si el cliente no lo pide no es necesario FALSO: Si mi sitio tiene un público muy específico donde conozco el tipo de usuarios (una administración, una Intranet, …) no es necesario hacerlo accesible
  • 8. UNIVERSITAT OBERTA DE CATALUNYA 14 Office of Learning Technologies · learningtechnologies.uoc.edu 4. Beneficios · Económicos: incrementa la cuota de mercado y alcance de audiencia, más visitas · Eficiencia técnica: más fácil de mantener y actualizar, mejora el motor de búsqueda del sitio, se reduce el tiempo de carga de las páginas · Calidad: sigue los estándares, independencia del dispositivo, multinavegador · Prestigio: demuestra responsabilidad social, diferenciación de la competencia, refuerza positivamente la imagen empresarial · Usabilidad: mejora la navegación y la experiencia de usuario, mayor claridad y eficacia · Legales: responsabilidad legal · Posicionamiento: proporciona un patrón de búsqueda más rápido en los buscadores porque el esquema de contenidos de la página es claro y conciso. Esto permite a los buscadores leer el contenido con facilidad, lo que conlleva un mejor posicionamiento Web en los buscadores por un tema concreto; y da soporte a la Web Semántica (Pauta 13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2] ): metadatos, ficheros RDF, microformatos, atributos "rel" o "rev“, navegación semántica, etc.
  • 10. UNIVERSITAT OBERTA DE CATALUNYA 14 Office of Learning Technologies · learningtechnologies.uoc.edu 5. 10 Reglas de oro para aplicar la Accesibilidad Web · Proporcionar alternativas de texto · Estructurar los contenidos · Evitar depender de un único sentido · Crear toda la funcionabilidad accesible con teclado · Dar tiempo suficiente · Evitar interferencias · Identificar enlaces y contenidos · Interfaces de navegación consistentes · Ayudar a los usuarios a evitar errores · Asegurar la compatibilidad