SlideShare una empresa de Scribd logo
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

Más contenido relacionado

PPT
Campus 5.0. HTML, CSS y Accesibilidad
PPT
Accesibilidad y usabilidad
PDF
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
PPTX
Accesibilidad rd
PPTX
Evolucion de la web
PPTX
Accesibilidad web presentacion
PPTX
Accesibilidad web
PPTX
CUADRO COMPARATIVO
Campus 5.0. HTML, CSS y Accesibilidad
Accesibilidad y usabilidad
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
Accesibilidad rd
Evolucion de la web
Accesibilidad web presentacion
Accesibilidad web
CUADRO COMPARATIVO

La actualidad más candente (16)

PPT
Herramientas informaticas trabajo 1
PPTX
La web (web 1, web 2, web 3, web 4)
PPTX
La web cuadro comparativo
PPTX
DISEÑO WEB
PPTX
01 Accesibilidad.pptx
DOCX
INFORMACIÓN DE LAS WEBS
DOCX
Relación entre la gestión del conocimento y web 2
PPTX
Evolución de la Web
PPT
Presentación1
PPTX
Página web
PDF
Accesibilidad Web
PPT
Modulo 3 (Parte 2)
PPTX
La evolución de la web
PPT
Web presentacion
PPSX
Accesibilidad web acceso y credibilidad
Herramientas informaticas trabajo 1
La web (web 1, web 2, web 3, web 4)
La web cuadro comparativo
DISEÑO WEB
01 Accesibilidad.pptx
INFORMACIÓN DE LAS WEBS
Relación entre la gestión del conocimento y web 2
Evolución de la Web
Presentación1
Página web
Accesibilidad Web
Modulo 3 (Parte 2)
La evolución de la web
Web presentacion
Accesibilidad web acceso y credibilidad
Publicidad

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

PPTX
Accesibilidad y usabilidad de la web
PPTX
Accesibilidad web presentacion
PPT
Accesibilidad web por Luis Felipe Martinez
PDF
Articulo Accesibilidad
PPT
Accesibilidad Web
PPTX
Caracteristica,usos,ventajay deventajas de la web 1
PPTX
Investigación unidad II
PDF
Clase no 3
PDF
interfaz
PDF
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
PDF
Sergio alexis guerrero portafolio
PPTX
Cloud
DOC
Atividad evaluada de laboratorio (2)
PDF
Universidad gerardo barrio portafolio
PDF
Herbert mauricio leiva portafolio.
PPTX
Actividad Nº29
PPT
Usabilidad y accesibilidad web
PPTX
Internet
Accesibilidad y usabilidad de la web
Accesibilidad web presentacion
Accesibilidad web por Luis Felipe Martinez
Articulo Accesibilidad
Accesibilidad Web
Caracteristica,usos,ventajay deventajas de la web 1
Investigación unidad II
Clase no 3
interfaz
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Sergio alexis guerrero portafolio
Cloud
Atividad evaluada de laboratorio (2)
Universidad gerardo barrio portafolio
Herbert mauricio leiva portafolio.
Actividad Nº29
Usabilidad y accesibilidad web
Internet
Publicidad

Más de Office of Learning Technologies, Universitat Oberta de Catalunya (20)

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

Último (20)

PDF
capacitación de aire acondicionado Bgh r 410
PPTX
ccna: redes de nat ipv4 stharlling cande
PDF
TRABAJO DE TECNOLOGIA.pdf...........................
PDF
Distribucion de frecuencia exel (1).pdf
PDF
programa-de-estudios-2011-guc3ada-para-el-maestro-secundarias-tecnicas-tecnol...
PDF
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
PDF
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
PPTX
Mecanismos-de-Propagacion de ondas electromagneticas
PDF
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
PDF
Diapositiva proyecto de vida, materia catedra
PPTX
Curso de generación de energía mediante sistemas solares
PDF
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PPTX
unidad 3 tecnología 8° básico: planificación y elaboración de un objeto
DOCX
TRABAJO GRUPAL (5) (1).docxjesjssjsjjskss
PDF
MANUAL de recursos humanos para ODOO.pdf
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
PDF
Estrategia de Apoyo de Daylin Castaño (5).pdf
PPTX
Diapositivas Borrador Rocha Jauregui David Paolo (3).pptx
PDF
CyberOps Associate - Cisco Networking Academy
capacitación de aire acondicionado Bgh r 410
ccna: redes de nat ipv4 stharlling cande
TRABAJO DE TECNOLOGIA.pdf...........................
Distribucion de frecuencia exel (1).pdf
programa-de-estudios-2011-guc3ada-para-el-maestro-secundarias-tecnicas-tecnol...
CONTABILIDAD Y TRIBUTACION, EJERCICIO PRACTICO
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
Mecanismos-de-Propagacion de ondas electromagneticas
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
Diapositiva proyecto de vida, materia catedra
Curso de generación de energía mediante sistemas solares
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
historia_web de la creacion de un navegador_presentacion.pptx
unidad 3 tecnología 8° básico: planificación y elaboración de un objeto
TRABAJO GRUPAL (5) (1).docxjesjssjsjjskss
MANUAL de recursos humanos para ODOO.pdf
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
Estrategia de Apoyo de Daylin Castaño (5).pdf
Diapositivas Borrador Rocha Jauregui David Paolo (3).pptx
CyberOps Associate - Cisco Networking Academy

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