SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
Mitos, leyendas y
                 apuntes de
                Accesibilidad
                  Pinceladas Básicas
                          :)




@cottonfieldsbcn                        @WebCat. Marzo 2012
Accesible! Seguro?




             Hombre, gracias, “arquitectos”! ¬¬
@cottonfieldsbcn                             @WebCat. Marzo 2012
Al grano
                      Accesibilidad Web. Definición.
  Grado con el que puede utilizarse un sitio web, con independencia de las capacidades
                              físicas y técnicas del usuario.




                                  Autor de la imagen: Gustavo Karcher.
                                         Fuente: @olgacarreras

@cottonfieldsbcn                                                          @WebCat. Marzo 2012
“La Accesibilidad Web es para personas
          ciegas o con discapacidad...

             ...Y, tampoco afecta a tantos
                   usuarios de mi web”


                   En serio?

@cottonfieldsbcn                        @WebCat. Marzo 2012
En datos:
                             Personas con problemas de interacción:
                        •   personas mayores de 65 años.
                        •   personas con discapacidades importantes.
                        •   Niños.
                        •   personas discapacitadas temporalmente.

                        30% de la población mundial, unos 1.714 mill.

    Unión Europea:                                  Situación en España:
 Personas discapacitadas:                               • Aprox.vez más personas mayores de 65
                                                                 20% de personas con discapacidad
      • Aprox. 50 millones de personas (un 15% de
        la població).
                                                        • años
                                                          Cada

 Personas mayores de 65 años:                           • Tendencia a los trámites online
                                                          Crece el número de usuarios conectados
      • Aprox. 100 millones de personas.                •

                   Te parece poco?
@cottonfieldsbcn                                                            @WebCat. Marzo 2012
No todo el mundo navega por la red como tú.
                      Si entiendes la diferencia,
       ya has dado primer paso para que hacer webs accesibles
                        sea parte de tu rutina.




@cottonfieldsbcn                                   @WebCat. Marzo 2012
Consecuencias:




                  http://www.youtube.com/watch?v=o2w0s8jz9R4
@cottonfieldsbcn                                                @WebCat. Marzo 2012
Consecuencias:
        Cuando afectan a las capacidades físicas, se resume en una sola palabra:

                                discriminación
    • Nono pueden informacióntrabajo en la empresa por tener aplicaciones o una
    que
         acceso a
                   realizar su
                               relacionada con el empleo: empleados minusválidos

    intranet inaccesible.
    • No accesolos información sobre actividades cívicas y relacionadas con el
    ejercicio de
                 a
                   derechos ciudadanos.
    • No acceso a programas educativos.
    • No acceso al comercio en la red.
    • No acceso e incomunicación. de la Web y, en general, cierto estado de
    desconexión
                 a información general


    • Sancionessidar.org // olgacarreras.blogspot.com )
    es España:
                 económicas importantes desde el 01/01/2009. (Sobre legislación




@cottonfieldsbcn                                                 @WebCat. Marzo 2012
Otros mitos:
   FALSO: La accesibilidad obliga a crear dos versiones del sitio
   FALSO: La accesibilidad web significa no usar Flash
   FALSO: 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. Las webs accesibles
   son feas y aburridas
   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
   FALSO: Las herramientas automáticas determinan el nivel de accesibilidad
                                                                            Fuente: @olgacarreras



@cottonfieldsbcn                                                     @WebCat. Marzo 2012
Beneficios:
   ECONÓMICO: Incrementa la cuota de mercado
   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 es claro y conciso.
   WEB SEMÁNTICA: Da soporte (Pauta13.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.
                                                                             Fuente: @olgacarreras

@cottonfieldsbcn                                                     @WebCat. Marzo 2012
Entonces, cómo lo hago?
                  Estándares!
                  Estándares!
             Estándares!
       Vale... también con ayuda de las WCAG
           Y... Mucho, mucho, sentido común!

@cottonfieldsbcn                        @WebCat. Marzo 2012
Pautas de Accesibilidad al Contenido Web
      (WCAG = Web Content Accessibility Guidelines)
  El W3C y la WAI                         Las Pautas WCAG
    • W3C: World Wide Web Consortium       • Contenido web = información + interfaz +
    • WAI: Web Accessibility Initiative      servicios
    • Pautas WAI:                          • WCAG 1.0 (mayo 1999)
       o WCAG (Web Content)                • WCAG 2.0 (diciembre 2008)
       o UAAG (User Agent)                 • Recomendaciones del W3C
       o ATAG (Authoring Tools)            • Documentación de soporte

                     WCAG 1.0 y 2.0: resumen y diferencias
  WCAG 1.0                                WCAG 2.0
    • Orientadas a tecnologías del          • Tecnológicamente neutrales
      W3C (HTML / CSS)                      • 4 principios; 13 pautas; criterios de
    • 14 pautas; puntos de verificación        éxito
    • Prioridades y niveles de              • Sólo niveles de cumplimiento (A, AA,
      cumplimiento                            AAA)
       o A = P1;                            • Requisitos de conformidad
       o AA = P1 + P2                       • Técnicas y también fallos communes
       o AAA = P1 + P2 + P3
    • Técnicas como “ejemplos”
@cottonfieldsbcn                                                 @WebCat. Marzo 2012
Vale, pero, cómo lo hago?
                                                10 reglas de oro para el diseño web accesible


                                                    • Proporcionar alternativas de texto
                                                    • Estructurar los contenidos
                                                    • Evitar depender de un único sentido
                                                    • Crear toda la funcionalidad accesible con
                                                     teclado
                                                    • Dar tiempo suficiente
                                                    • Evitar interferencias
                                                    • Identificar enlaces y contenidos
                                                    • Crear interfaces de navegación
                                                     consistentes
                                                    • Ayudar a los usuarios a evitar errores
           Autor de la imagen: Daniel Ulczyk.
                     @DanielUlczyk
                                                    • Asegurar la compatibilidad
@cottonfieldsbcn                                                         @WebCat. Marzo 2012
Y...
                  Evaluación
                  Evaluación
              Evaluación
                       ... Pero, mucha!


@cottonfieldsbcn                      @WebCat. Marzo 2012
Tengo que esperar al W3C?




                  ... depende!
@cottonfieldsbcn       @WebCat. Marzo 2012
Recuerdas?
              Sentido común!




@cottonfieldsbcn                @WebCat. Marzo 2012
En un futuro próximo...
                ... en el #webcat
  Pautas WCAG

                  Buenas Prácticas

                                Técnicas de Validación




@cottonfieldsbcn                         @WebCat. Marzo 2012
Gracias!



                    Arantxa Hernández

                  aridesign.bcn@gmail.com

                     @cottonfieldsbcn


@cottonfieldsbcn                             @WebCat. Marzo 2012

Más contenido relacionado

Más de webcat

"Pushing the boundaries" por @danielguillan
"Pushing the boundaries" por @danielguillan"Pushing the boundaries" por @danielguillan
"Pushing the boundaries" por @danielguillanwebcat
 
"One size fits none" por @martuishere
"One size fits none" por @martuishere"One size fits none" por @martuishere
"One size fits none" por @martuisherewebcat
 
"Designing digital products for kids" por @karinai
"Designing digital products for kids" por @karinai"Designing digital products for kids" por @karinai
"Designing digital products for kids" por @karinaiwebcat
 
"How to write better User Stories" por @jrhuerta
"How to write better User Stories" por @jrhuerta"How to write better User Stories" por @jrhuerta
"How to write better User Stories" por @jrhuertawebcat
 
"GTD & Pomodoro Technique" por @deambulando
"GTD & Pomodoro Technique" por @deambulando"GTD & Pomodoro Technique" por @deambulando
"GTD & Pomodoro Technique" por @deambulandowebcat
 
"Esqueuomorfismo: la ruptura de la metáfora" por @omixam
"Esqueuomorfismo: la ruptura de la metáfora" por @omixam"Esqueuomorfismo: la ruptura de la metáfora" por @omixam
"Esqueuomorfismo: la ruptura de la metáfora" por @omixamwebcat
 
"The work I love" por @karinai
"The work I love" por @karinai"The work I love" por @karinai
"The work I love" por @karinaiwebcat
 
"APIS, como reutilizar contenidos en tu web" por @daniel_julia
"APIS, como reutilizar contenidos en tu web" por @daniel_julia"APIS, como reutilizar contenidos en tu web" por @daniel_julia
"APIS, como reutilizar contenidos en tu web" por @daniel_juliawebcat
 
"Web performance optimization for everyone" por @abellonch
"Web performance optimization for everyone" por @abellonch"Web performance optimization for everyone" por @abellonch
"Web performance optimization for everyone" por @abellonchwebcat
 
"HTML & CSS apps & internet powered TV" por @JeronimJackson
"HTML & CSS apps & internet powered TV" por @JeronimJackson"HTML & CSS apps & internet powered TV" por @JeronimJackson
"HTML & CSS apps & internet powered TV" por @JeronimJacksonwebcat
 
"Cuadro de mandos para UX. El método HEART" por @galu
"Cuadro de mandos para UX. El método HEART" por @galu"Cuadro de mandos para UX. El método HEART" por @galu
"Cuadro de mandos para UX. El método HEART" por @galuwebcat
 
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelowebcat
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriaraiwebcat
 
"Humans.txt" por @JuanjoBernabeu y @lafabricaverde
"Humans.txt" por @JuanjoBernabeu y @lafabricaverde"Humans.txt" por @JuanjoBernabeu y @lafabricaverde
"Humans.txt" por @JuanjoBernabeu y @lafabricaverdewebcat
 
"Meta datos & Google Rich Snippets" por @iplarodriguez
"Meta datos & Google Rich Snippets" por @iplarodriguez"Meta datos & Google Rich Snippets" por @iplarodriguez
"Meta datos & Google Rich Snippets" por @iplarodriguezwebcat
 
"Javascript con MVVM Knockout" por @Marc_Rubino
"Javascript con MVVM Knockout" por @Marc_Rubino"Javascript con MVVM Knockout" por @Marc_Rubino
"Javascript con MVVM Knockout" por @Marc_Rubinowebcat
 
"Gestion de expectativas" por @xavi_b
"Gestion de expectativas" por @xavi_b"Gestion de expectativas" por @xavi_b
"Gestion de expectativas" por @xavi_bwebcat
 
"No sirves ni pa' poner la lavadora" por @galu
"No sirves ni pa' poner la lavadora" por @galu"No sirves ni pa' poner la lavadora" por @galu
"No sirves ni pa' poner la lavadora" por @galuwebcat
 
"Proyectos audiovisuales en Internet" por @yerblues
"Proyectos audiovisuales en Internet" por @yerblues"Proyectos audiovisuales en Internet" por @yerblues
"Proyectos audiovisuales en Internet" por @yerblueswebcat
 
"Aprende a diseñar (un poco) en 13 minutos" por @martuishere
"Aprende a diseñar (un poco) en 13 minutos" por @martuishere"Aprende a diseñar (un poco) en 13 minutos" por @martuishere
"Aprende a diseñar (un poco) en 13 minutos" por @martuisherewebcat
 

Más de webcat (20)

"Pushing the boundaries" por @danielguillan
"Pushing the boundaries" por @danielguillan"Pushing the boundaries" por @danielguillan
"Pushing the boundaries" por @danielguillan
 
"One size fits none" por @martuishere
"One size fits none" por @martuishere"One size fits none" por @martuishere
"One size fits none" por @martuishere
 
"Designing digital products for kids" por @karinai
"Designing digital products for kids" por @karinai"Designing digital products for kids" por @karinai
"Designing digital products for kids" por @karinai
 
"How to write better User Stories" por @jrhuerta
"How to write better User Stories" por @jrhuerta"How to write better User Stories" por @jrhuerta
"How to write better User Stories" por @jrhuerta
 
"GTD & Pomodoro Technique" por @deambulando
"GTD & Pomodoro Technique" por @deambulando"GTD & Pomodoro Technique" por @deambulando
"GTD & Pomodoro Technique" por @deambulando
 
"Esqueuomorfismo: la ruptura de la metáfora" por @omixam
"Esqueuomorfismo: la ruptura de la metáfora" por @omixam"Esqueuomorfismo: la ruptura de la metáfora" por @omixam
"Esqueuomorfismo: la ruptura de la metáfora" por @omixam
 
"The work I love" por @karinai
"The work I love" por @karinai"The work I love" por @karinai
"The work I love" por @karinai
 
"APIS, como reutilizar contenidos en tu web" por @daniel_julia
"APIS, como reutilizar contenidos en tu web" por @daniel_julia"APIS, como reutilizar contenidos en tu web" por @daniel_julia
"APIS, como reutilizar contenidos en tu web" por @daniel_julia
 
"Web performance optimization for everyone" por @abellonch
"Web performance optimization for everyone" por @abellonch"Web performance optimization for everyone" por @abellonch
"Web performance optimization for everyone" por @abellonch
 
"HTML & CSS apps & internet powered TV" por @JeronimJackson
"HTML & CSS apps & internet powered TV" por @JeronimJackson"HTML & CSS apps & internet powered TV" por @JeronimJackson
"HTML & CSS apps & internet powered TV" por @JeronimJackson
 
"Cuadro de mandos para UX. El método HEART" por @galu
"Cuadro de mandos para UX. El método HEART" por @galu"Cuadro de mandos para UX. El método HEART" por @galu
"Cuadro de mandos para UX. El método HEART" por @galu
 
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai
 
"Humans.txt" por @JuanjoBernabeu y @lafabricaverde
"Humans.txt" por @JuanjoBernabeu y @lafabricaverde"Humans.txt" por @JuanjoBernabeu y @lafabricaverde
"Humans.txt" por @JuanjoBernabeu y @lafabricaverde
 
"Meta datos & Google Rich Snippets" por @iplarodriguez
"Meta datos & Google Rich Snippets" por @iplarodriguez"Meta datos & Google Rich Snippets" por @iplarodriguez
"Meta datos & Google Rich Snippets" por @iplarodriguez
 
"Javascript con MVVM Knockout" por @Marc_Rubino
"Javascript con MVVM Knockout" por @Marc_Rubino"Javascript con MVVM Knockout" por @Marc_Rubino
"Javascript con MVVM Knockout" por @Marc_Rubino
 
"Gestion de expectativas" por @xavi_b
"Gestion de expectativas" por @xavi_b"Gestion de expectativas" por @xavi_b
"Gestion de expectativas" por @xavi_b
 
"No sirves ni pa' poner la lavadora" por @galu
"No sirves ni pa' poner la lavadora" por @galu"No sirves ni pa' poner la lavadora" por @galu
"No sirves ni pa' poner la lavadora" por @galu
 
"Proyectos audiovisuales en Internet" por @yerblues
"Proyectos audiovisuales en Internet" por @yerblues"Proyectos audiovisuales en Internet" por @yerblues
"Proyectos audiovisuales en Internet" por @yerblues
 
"Aprende a diseñar (un poco) en 13 minutos" por @martuishere
"Aprende a diseñar (un poco) en 13 minutos" por @martuishere"Aprende a diseñar (un poco) en 13 minutos" por @martuishere
"Aprende a diseñar (un poco) en 13 minutos" por @martuishere
 

Último

Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoTIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoWilsonChambi4
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Normas de convivencia para imprimir gratis
Normas de convivencia para imprimir gratisNormas de convivencia para imprimir gratis
Normas de convivencia para imprimir gratisbrasilyamile
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna  Walter Gropius- Frank Lloyd WrightArquitectura Moderna  Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna Walter Gropius- Frank Lloyd Wrightimariagsg
 
Arquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMArquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMNaza59
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHEAPORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHEgonzalezdfidelibus
 
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Modernasofpaolpz
 
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...MayerlyAscanioNavarr
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 

Último (20)

Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoTIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Normas de convivencia para imprimir gratis
Normas de convivencia para imprimir gratisNormas de convivencia para imprimir gratis
Normas de convivencia para imprimir gratis
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna  Walter Gropius- Frank Lloyd WrightArquitectura Moderna  Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
 
Arquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMArquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSM
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHEAPORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
 
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
 
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...
Guía de actividades y rúbrica de evaluación - Unidad 3 - Escenario 4 - Rol de...
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 

"Mitos, leyendas y apuntes de Accesibilidad" por @cottonfieldsbcn

  • 1. Mitos, leyendas y apuntes de Accesibilidad Pinceladas Básicas :) @cottonfieldsbcn @WebCat. Marzo 2012
  • 2. Accesible! Seguro? Hombre, gracias, “arquitectos”! ¬¬ @cottonfieldsbcn @WebCat. Marzo 2012
  • 3. Al grano Accesibilidad Web. Definición. Grado con el que puede utilizarse un sitio web, con independencia de las capacidades físicas y técnicas del usuario. Autor de la imagen: Gustavo Karcher. Fuente: @olgacarreras @cottonfieldsbcn @WebCat. Marzo 2012
  • 4. “La Accesibilidad Web es para personas ciegas o con discapacidad... ...Y, tampoco afecta a tantos usuarios de mi web” En serio? @cottonfieldsbcn @WebCat. Marzo 2012
  • 5. En datos: Personas con problemas de interacción: • personas mayores de 65 años. • personas con discapacidades importantes. • Niños. • personas discapacitadas temporalmente. 30% de la población mundial, unos 1.714 mill. Unión Europea: Situación en España: Personas discapacitadas: • Aprox.vez más personas mayores de 65 20% de personas con discapacidad • Aprox. 50 millones de personas (un 15% de la població). • años Cada Personas mayores de 65 años: • Tendencia a los trámites online Crece el número de usuarios conectados • Aprox. 100 millones de personas. • Te parece poco? @cottonfieldsbcn @WebCat. Marzo 2012
  • 6. No todo el mundo navega por la red como tú. Si entiendes la diferencia, ya has dado primer paso para que hacer webs accesibles sea parte de tu rutina. @cottonfieldsbcn @WebCat. Marzo 2012
  • 7. Consecuencias: http://www.youtube.com/watch?v=o2w0s8jz9R4 @cottonfieldsbcn @WebCat. Marzo 2012
  • 8. Consecuencias: Cuando afectan a las capacidades físicas, se resume en una sola palabra: discriminación • Nono pueden informacióntrabajo en la empresa por tener aplicaciones o una que acceso a realizar su relacionada con el empleo: empleados minusválidos intranet inaccesible. • No accesolos información sobre actividades cívicas y relacionadas con el ejercicio de a derechos ciudadanos. • No acceso a programas educativos. • No acceso al comercio en la red. • No acceso e incomunicación. de la Web y, en general, cierto estado de desconexión a información general • Sancionessidar.org // olgacarreras.blogspot.com ) es España: económicas importantes desde el 01/01/2009. (Sobre legislación @cottonfieldsbcn @WebCat. Marzo 2012
  • 9. Otros mitos: FALSO: La accesibilidad obliga a crear dos versiones del sitio FALSO: La accesibilidad web significa no usar Flash FALSO: 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. Las webs accesibles son feas y aburridas 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 FALSO: Las herramientas automáticas determinan el nivel de accesibilidad Fuente: @olgacarreras @cottonfieldsbcn @WebCat. Marzo 2012
  • 10. Beneficios: ECONÓMICO: Incrementa la cuota de mercado 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 es claro y conciso. WEB SEMÁNTICA: Da soporte (Pauta13.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. Fuente: @olgacarreras @cottonfieldsbcn @WebCat. Marzo 2012
  • 11. Entonces, cómo lo hago? Estándares! Estándares! Estándares! Vale... también con ayuda de las WCAG Y... Mucho, mucho, sentido común! @cottonfieldsbcn @WebCat. Marzo 2012
  • 12. Pautas de Accesibilidad al Contenido Web (WCAG = Web Content Accessibility Guidelines) El W3C y la WAI Las Pautas WCAG • W3C: World Wide Web Consortium • Contenido web = información + interfaz + • WAI: Web Accessibility Initiative servicios • Pautas WAI: • WCAG 1.0 (mayo 1999) o WCAG (Web Content) • WCAG 2.0 (diciembre 2008) o UAAG (User Agent) • Recomendaciones del W3C o ATAG (Authoring Tools) • Documentación de soporte WCAG 1.0 y 2.0: resumen y diferencias WCAG 1.0 WCAG 2.0 • Orientadas a tecnologías del • Tecnológicamente neutrales W3C (HTML / CSS) • 4 principios; 13 pautas; criterios de • 14 pautas; puntos de verificación éxito • Prioridades y niveles de • Sólo niveles de cumplimiento (A, AA, cumplimiento AAA) o A = P1; • Requisitos de conformidad o AA = P1 + P2 • Técnicas y también fallos communes o AAA = P1 + P2 + P3 • Técnicas como “ejemplos” @cottonfieldsbcn @WebCat. Marzo 2012
  • 13. Vale, pero, cómo lo hago? 10 reglas de oro para el diseño web accesible • Proporcionar alternativas de texto • Estructurar los contenidos • Evitar depender de un único sentido • Crear toda la funcionalidad accesible con teclado • Dar tiempo suficiente • Evitar interferencias • Identificar enlaces y contenidos • Crear interfaces de navegación consistentes • Ayudar a los usuarios a evitar errores Autor de la imagen: Daniel Ulczyk. @DanielUlczyk • Asegurar la compatibilidad @cottonfieldsbcn @WebCat. Marzo 2012
  • 14. Y... Evaluación Evaluación Evaluación ... Pero, mucha! @cottonfieldsbcn @WebCat. Marzo 2012
  • 15. Tengo que esperar al W3C? ... depende! @cottonfieldsbcn @WebCat. Marzo 2012
  • 16. Recuerdas? Sentido común! @cottonfieldsbcn @WebCat. Marzo 2012
  • 17. En un futuro próximo... ... en el #webcat Pautas WCAG Buenas Prácticas Técnicas de Validación @cottonfieldsbcn @WebCat. Marzo 2012
  • 18. Gracias! Arantxa Hernández aridesign.bcn@gmail.com @cottonfieldsbcn @cottonfieldsbcn @WebCat. Marzo 2012