SlideShare a Scribd company logo
1 of 104
Download to read offline
IDEAS
DIGITALES
APLICADAS




                                 #UAdigital2012
                                    @uadigital




            ACCESIBILIDAD ADOLESCENTE
                        Maximiliano Martin
                           maximiliano.cl / ida.cl
                                 @maxymiliano
                                Noviembre 2012
¿QUIÉN SOY? Y QUÉ HAGO



                        Maximiliano Martin
                              @maxymiliano


✓ Diseñador gráfico de la PUCV
✓ 11 años haciendo internet en Chile
✓ Más de 90 sitios de experiencia
  Banca, Gobierno, Turismo, Medios online, Móviles, Sistemas y más.

✓ Formación en Accesibilidad Web WCAG 2.0 – Tawdis
✓ Socio fundador y actual CEO en IDA – Ideas Digitales
  Aplicadas - www.ida.cl
  Consultora de experiencia de usuarios, estrategia digital, diseño y desarrollo


                                                                    www.maximiliano.cl
¿Qué veremos en esta
                presentación?

✓ ¿Qué es la Accesibilidad?
✓ ¿Y la accesibilidad web?
✓ Un poco de Historia
✓ ¿Qué son las WCAG 2.0?
✓ Y para ser accesible: Metodología de evaluación
✓ ¿Quién debe hacerse cargo?
✓ Recursos, Ejemplos, listas y más.
                                                    www.maximiliano.cl
José Ignacio Cuadra


✓ 27 años
✓ Estudiante de periodismo. Se titula en Diciembre
✓ Nació viendo 0,05 en el ojo izquierdo hasta el mes
  pasado

  “He quedado fuera, al menos de momento, de las
  opciones laborales”



                                             www.maximiliano.cl
Sobre la accesibilidad
                     José Ignacio Cuadra




✓ Al fin la falta de algún sentido -en este caso el visual-
   deja de ser una barrera a la información.

✓ Si todos fuésemos iguales -a nivel de sentidos-
   quizás no habría nadie sufriendo por no poder hacer
   algo.

✓ Es el acceso el que trae progreso


                                                 www.maximiliano.cl
¿Qué es la Accesibilidad?

✓ Es el grado en el que todas las personas pueden
  utilizar un objeto, visitar un lugar o acceder a un
  servicio. (wiki)

  ✓ rampas
  ✓ ascensores
  ✓ baños amplios
  ✓ acceso o atención preferencial
  ✓ lenguaje de señas, etc.
                                                www.maximiliano.cl
¿Qué es la Accesibilidad?

✓ Es el grado en el que todas las personas pueden
  utilizar un objeto, visitar un lugar o acceder a un
  servicio. (wiki)

  ✓ rampas
  ✓ ascensores
  ✓ baños amplios
  ✓ acceso o atención preferencial
  ✓ lenguaje de señas, etc.
                                                www.maximiliano.cl
¿Qué es la Accesibilidad?

✓ Es el grado en el que todas las personas pueden
  utilizar un objeto, visitar un lugar o acceder a un
  servicio. (wiki)

  ✓ rampas
  ✓ ascensores
  ✓ baños amplios
  ✓ acceso o atención preferencial
  ✓ lenguaje de señas, etc.
                                                www.maximiliano.cl
¿Y la accesibilidad web?



✓ Debe ser entendida como un derecho
✓ Capacidad de acceso a la web y a su contenido
✓ Independiente de sus capacidades físicas,
  intelectuales, tecnológicas o ambientales.

✓ Apuntar a un acceso universal


                                               www.maximiliano.cl
Por qué es importante
                   ¿Y la accesibilidad web?




✓ Por la relevancia actual que tiene la web
✓ Fomenta la igualdad de oportunidades
✓ Ocasión sin precedentes



                                              www.maximiliano.cl
Quién beneficia
                 ¿Y la accesibilidad web?



✓ Personas con algún tipo de discapacidad o con
  capacidades especiales




                                            www.maximiliano.cl
Quién beneficia
                 ¿Y la accesibilidad web?



✓ Personas con algún tipo de discapacidad o con
  capacidades especiales

                                  Físicas o
                                  motrices
     Visuales

                                            Cognitivas o
         Auditivas                          neurológicas


                                                   www.maximiliano.cl
Quién beneficia
                 ¿Y la accesibilidad web?



✓ Personas con algún tipo de discapacidad o con
  capacidades especiales




                                            www.maximiliano.cl
Quién beneficia
                 ¿Y la accesibilidad web?



✓ Personas con algún tipo de discapacidad o con
  capacidades especiales
                                 Navegadores
  Por el entorno                 antiguos

           Equipos o                         Idioma
           Conexiones
                                        Usuarios
 Envejecimiento                         inexpertos
                                              www.maximiliano.cl
Quién beneficia
     ¿Y la accesibilidad web?




A todos los usuarios


                                www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Productos de apoyo
                  ¿Y la accesibilidad web?




✓ Braile
✓ Lectores de pantalla
✓ Navegadores de Texto
✓ Ampliadores de pantalla
✓ Teclados alternativos
✓ Teclados amplios o reducidos
                                             www.maximiliano.cl
Por qué crear webs accesibles
                   ¿Y la accesibilidad web?




✓ Aumentar de forma inmediata los potenciales
  usuarios

✓ Mejora la distribución del contenido y la inteligencia
  colectiva. Convirtiéndonos en un mejor sociedad

✓ Reduce el tiempo de carga de las páginas
✓ Amplía los dispositivos que pueden acceder
✓ Mejora la usabilidad del sitio
                                               www.maximiliano.cl
Por qué crear webs accesibles
                  ¿Y la accesibilidad web?




✓ Ayuda a cumplir obligaciones legales
✓ Motores de búsqueda
✓ Mejor comportamiento en navegadores
✓ Mejora la imagen y transparenta la RSE
✓ Reducen costos de matención

                                             www.maximiliano.cl
Un poco historia




                   www.maximiliano.cl
Un poco historia




q
    1989
    Web




                              www.maximiliano.cl
Un poco historia

           1997
           Master
           Document




q
    1989
    Web




                                         www.maximiliano.cl
Un poco historia

          1997
          Master
          Document




q
    1989 q
    Web


             1999
             WCAG 1.0
                                           www.maximiliano.cl
Un poco historia

          1997
          Master
          Document




q              q
    1989 q         2001
                   USA
    Web
                   Sección 508

             1999
             WCAG 1.0
                                           www.maximiliano.cl
Un poco historia

          1997
          Master
          Document
                          2002-2012
                          España
                          UNE 139803 2004


q              q
    1989 q         2001
                   USA
    Web
                   Sección 508

             1999
             WCAG 1.0
                                            www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
          Document        eEurope / Normativa CWA

                          2002-2012
                          España
                          UNE 139803 2004


q              q
    1989 q         2001
                   USA
    Web
                   Sección 508

             1999
             WCAG 1.0
                                                    www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
          Document        eEurope / Normativa CWA

                          2002-2012
                          España
                          UNE 139803 2004


q              q
    1989 q         2001
                   USA           q
    Web
                   Sección 508

             1999                    2006
             WCAG 1.0                Chile Decreto 100
                                                         www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
          Document        eEurope / Normativa CWA

                          2002-2012
                          España
                          UNE 139803 2004


q              q                      q
    1989 q         2001
                   USA           q        2007
    Web                                   Mexico
                   Sección 508
                                          Manual Urbano

             1999                    2006
             WCAG 1.0                Chile Decreto 100
                                                          www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
          Document        eEurope / Normativa CWA

                          2002-2012
                          España
                          UNE 139803 2004


q              q                                   q
                                      q
                   2001                                2008
    1989 q         USA           q        2007         WCAG 2.0
    Web                                   Mexico
                   Sección 508
                                          Manual Urbano

             1999                    2006
             WCAG 1.0                Chile Decreto 100
                                                                  www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
                          eEurope / Normativa CWA
          Document                                                2010
                          2002-2012                               Argentina
                          España                                  Ley 26.653
                          UNE 139803 2004


q              q                                   q
                                      q
                   2001                                2008
    1989 q         USA           q        2007         WCAG 2.0
    Web                                   Mexico
                   Sección 508
                                          Manual Urbano

             1999                    2006
             WCAG 1.0                Chile Decreto 100
                                                                  www.maximiliano.cl
Un poco historia

          1997
          Master          2002-2006
                          eEurope / Normativa CWA
          Document                                                2010
                          2002-2012                               Argentina
                          España                                  Ley 26.653
                          UNE 139803 2004


q              q                                   q
                                      q                           q
                   2001                                2008
    1989 q         USA           q        2007         WCAG 2.0       2011
    Web                                   Mexico                      Mexico
                   Sección 508
                                          Manual Urbano               LEY
                                                                      GAP
             1999                    2006
             WCAG 1.0                Chile Decreto 100
                                                                  www.maximiliano.cl
Y el estado real de la situación
          Un poco de historia




                                www.maximiliano.cl
Y el estado real de la situación
                   Un poco de historia




✓ A 22 años
  De la creación de la web




                                         www.maximiliano.cl
Y el estado real de la situación
                    Un poco de historia




✓ A 22 años
  De la creación de la web

✓ A 15 años
  De la primera referencia




                                          www.maximiliano.cl
Y el estado real de la situación
                    Un poco de historia




✓ A 22 años
  De la creación de la web

✓ A 15 años
  De la primera referencia

✓ A 13 años
  De las WCAG 1.0




                                          www.maximiliano.cl
Y el estado real de la situación
                    Un poco de historia




✓ A 22 años
  De la creación de la web

✓ A 15 años
  De la primera referencia

✓ A 13 años
  De las WCAG 1.0

✓ A 4 años
  De las WCAG 2.0

                                          www.maximiliano.cl
¿Qué son las WCAG 2.0?


✓ Iniciativa de Accesibilidad a la web - WAI
✓ Grupo de trabajo permanente de las W3C
  Org. internacional desarrollo de estándares

✓ WAI actúa sobre cinco áreas
  ✓   Asegurar que las tecnologías web den soporte a la accesibilidad
  ✓   Desarrollar pautas de accesibilidad
  ✓   Crear herramientas de evaluación y corrección de la accesibilidad web
  ✓   Desarrollar materiales para la educación y difusión
  ✓   Coordinar proyectos de investigación y desarrollo

                                                              www.maximiliano.cl
La trilogía WCAG, UAAG, ATAG
                  ¿Qué son las WCAG 2.0?




✓ WCAG
  Guía de accesibilidad para el contenido

✓ ATAG
✓ Guía de accesibilidad para herramientas de autor
✓ UAAG
  Guía de accesibilidad para agentes de usuario


                                            www.maximiliano.cl
La trilogía WCAG, UAAG, ATAG
                  ¿Qué son las WCAG 2.0?




✓ WCAG
  Guía de accesibilidad para el contenido

✓ ATAG
✓ Guía de accesibilidad para herramientas de autor
✓ UAAG
  Guía de accesibilidad para agentes de usuario


                                            www.maximiliano.cl
¿Qué son las WCAG 2.0?



✓ Web Content Accessibility Guidelines, WCAG
  ✓ Principios (4)
     ✓ Pautas (12)
       ✓ Criterios de conformidad (61)
       ✓ Niveles de cumplimiento (3)


                                          www.maximiliano.cl
Principios
                 ¿Qué son las WCAG 2.0?



✓ Perceptible
✓ Operable
✓ Comprensible
✓ Robusto




                                          www.maximiliano.cl
Principios
                 ¿Qué son las WCAG 2.0?



✓ Perceptible          La información y los
                       componentes de la interfaz de
✓ Operable             usuario deben ser presentados
                       a los usuarios de modo que
✓ Comprensible         ellos puedan percibirlos.

✓ Robusto




                                             www.maximiliano.cl
Principios
                 ¿Qué son las WCAG 2.0?



✓ Perceptible
✓ Operable             Los componentes de la interfaz
                       de usuario y la navegación
✓ Comprensible         deben ser operables.

✓ Robusto




                                              www.maximiliano.cl
Principios
                 ¿Qué son las WCAG 2.0?



✓ Perceptible
✓ Operable
✓ Comprensible         La información y el manejo de la
                       interfaz de usuario deben ser
✓ Robusto              comprensibles.




                                              www.maximiliano.cl
Principios
                 ¿Qué son las WCAG 2.0?



✓ Perceptible
✓ Operable
✓ Comprensible
✓ Robusto              El contenido debe ser
                       suficientemente robusto como
                       para ser interpretado de forma
                       fiable por una amplia variedad
                       de aplicaciones de usuario,
                       incluyendo los productos de
                       apoyo.
                                              www.maximiliano.cl
Principios
¿Qué son las WCAG 2.0?




                         www.maximiliano.cl
Principios
¿Qué son las WCAG 2.0?




                         www.maximiliano.cl
Principios
¿Qué son las WCAG 2.0?




                         www.maximiliano.cl
Principios
¿Qué son las WCAG 2.0?




                         www.maximiliano.cl
Principios
¿Qué son las WCAG 2.0?




                         www.maximiliano.cl
Y para ser accesible
Herramientas de validación, software, productos de apoyo




                                                    www.maximiliano.cl
Y para ser accesible
      Herramientas de validación, software, productos de apoyo




✓ Debo querer hacerlo




                                                          www.maximiliano.cl
Y para ser accesible
      Herramientas de validación, software, productos de apoyo




✓ Debo querer hacerlo
✓ Comprometer a la organización. NO es
  responsabilidad de una sola persona




                                                          www.maximiliano.cl
Y para ser accesible
      Herramientas de validación, software, productos de apoyo




✓ Debo querer hacerlo
✓ Comprometer a la organización. NO es
  responsabilidad de una sola persona

✓ Adaptar mis metodologías con buenas prácticas
  accesibles y validación de estándares W3C




                                                          www.maximiliano.cl
Y para ser accesible
      Herramientas de validación, software, productos de apoyo




✓ Debo querer hacerlo
✓ Comprometer a la organización. NO es
  responsabilidad de una sola persona

✓ Adaptar mis metodologías con buenas prácticas
  accesibles y validación de estándares W3C

✓ Usar herramientas que me ayuden a validar
  constantemente

                                                          www.maximiliano.cl
Comprometer a la organización
                    Y para ser accesible




✓ En todas las etapas del proceso hay pequeñas cosas
  que se deben hacer de forma accesible

✓ Crear conciencia que es algo que mejora el producto
✓ Conocer realidades (online o presenciales)


                                               www.maximiliano.cl
Adaptar metodologías
                     Y para ser accesible




✓ Asimilar los principios, sus pautas y aplicar los
  criterios definidos por las WCAG 2.0

✓ Instalar, conocer y usar herramientas de apoyo
✓ Validar y declarar el nivel de accesibilidad de forma
  correcta y verdadera.



                                                www.maximiliano.cl
Que Validar
                        Y para ser accesible




✓ Validar sintaxis de
  HTML, CSS, XML

✓ Definir el nivel de conformidad (A, AA, AAA)
✓ Validar PDFs
✓ Verificar comportamiento en móviles
✓ Visualizar en múltiples opciones. Sin imágenes, sin
  CSS, con lectores de pantalla, etc.

                                                 www.maximiliano.cl
Que Validar
                    Y para ser accesible




✓ Complejidad de los textos
  Lo medular v/s lo accesorio

✓ Ortografía
✓ Colores, tamaños y contrastes
✓ Animaciones, audios, videos y el control de ellas
✓ Links rotos, disponibilidad de las imágenes,
  implementación de ellas.

                                                 www.maximiliano.cl
Metodología de evaluación



✓ Análisis previo
✓ Evaluación Automática
✓ Evaluación Manual
✓ Pruebas de Usuario
✓ Monitoreo continuo

                                 www.maximiliano.cl
Análisis Previo
                            Evaluación Paso 1




✓ Nivel de conformidad y ámbito
    ✓ A, AA, AAA
    ✓ Alcance: Sitio completo, Subdominio, directorio, etc
✓   Análisis del diseño del sitio
✓   Selección de una muestra
✓   Elección de las herramientas
✓   Evaluación manual preliminar

                                                             www.maximiliano.cl
Evaluación Automática
                        Evaluación Paso 2




✓ Sintaxis del código           ✓ Accesibilidad
  HTML/CSS




                                                  www.maximiliano.cl
Evaluación Manual
                    Evaluación Paso 3




✓ Texto alternativo de imágenes




  <img
  src="http://uadigital.uanl.mx/imag/Slide02.jpg"
  width="940" height="340"/>

                                         www.maximiliano.cl
Evaluación Manual
                       Evaluación Paso 3




✓   Texto alternativo de imágenes
✓   Tablas con encabezados
✓   Tabulación y Lectura
✓   Información por Color
✓   Cambios de Idioma
✓   Lenguaje claro y sencillo
✓   Usar teclado y lectores de pantalla

                                           www.maximiliano.cl
Evaluación Manual
                       Evaluación Paso 3




✓   Texto alternativo de imágenes
✓   Tablas con encabezados
✓   Tabulación y Lectura
✓   Información por Color
✓   Cambios de Idioma
✓   Lenguaje claro y sencillo
✓   Usar teclado y lectores de pantalla

                                           www.maximiliano.cl
Pruebas de Usuario y Monitoreo continuo
                    Evaluación Paso 4 y 5




✓ Nivel de adecuación y ámbito o alcance requerido
✓ Responsables y procedimientos rápidos.
✓ Evaluar páginas nuevas antes de que se añadan al
  sitio web.
✓ Disponer del software para facilitar la evaluación.
✓ Añadir opciones de feedback sobre la accesibilidad

                                             www.maximiliano.cl
Debe estar presente en todo el proceso
           ¿Quién debe hacerse cargo?




                                        www.maximiliano.cl
Debe estar presente en todo el proceso
                       ¿Quién debe hacerse cargo?




Estrategia   Estudio Usuarios   Arquitectura   Diseño Visual   Pro&Des




                                                                www.maximiliano.cl
¿Quién debe hacerse cargo?

✓ Periodistas
✓ Diseñadores Visuales
✓ Arquitectos de Información
✓ Programadores
✓ Diseñadores de Interacción
✓ Front End
✓ Proveedores de servicios y/o productos
                                           www.maximiliano.cl
Un ejemplo
En casa de herrero, cuchillo de palo




                                       www.maximiliano.cl
Un ejemplo
En casa de herrero, cuchillo de palo




                                       www.maximiliano.cl
HTML/SEO OBJETIVOS GENERALES




 Conocer el contexto actual de HTML y dominar los
parámetros básicos para la generación de contenido
           con estructura semántica.
HTML ETIQUETAS Y PROPIEDADES



Etiquetas y propiedades HTML
      ¿Para qué sirve?
HTML ETIQUETAS Y PROPIEDADES



     Etiquetas y propiedades HTML
                       ¿Para qué sirve?

- Lenguaje de Marcado
- Otorga estructura semántica al contenido
- Describir estructura y contenido
- Complementar el texto con Objetos
- Se escribe en forma de “Etiquetas”
- Rodeada por Corchetes Angulares



                   <                          >
HTML ETIQUETAS Y PROPIEDADES


                     Estructura de documento
                                  <html>




                                  </html>
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


                     Estructura de documento
                                  <html>

                                  <head>


                                  </head>




                                  </html>
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


                     Estructura de documento
                                  <html>

                                  <head>


                                  </head>

                                  <body>




                                  </body>
                                  </html>
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


                     Estructura de documento
                                  <html>

                                  <head>


                                  </head>

                                  <body>




                                  </body>
                                  </html>
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


                     Estructura de documento
 Módulos de:                      <html>
 •Estructura
   •html, head, title, body       <head>
 •Metainformación
 •Estilos                          <title> y otros elementos
 •Link
 •Base                            </head>

                                  <body>




                                  </body>
                                  </html>
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


                Estructura de documento
 Módulos de:                                  <html>
 •Estructura
   •html, head, title, body                   <head>
 •Metainformación
 •Estilos                                     <title> y otros elementos
 •Link
 •Base                                        </head>
Módulos de:
•Texto                                        <body>
   •p, code, div, em, strong, span, q, pre,
   samp, h1, h2, h3, etc                      elementos
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios                                  </body>
•Tablas
•Imágen                                       </html>
•Otros
www.maximiliano.cl
HTML ETIQUETAS Y PROPIEDADES


   ¿Para quién?

        Usuarios


Comunicamos/Informamos
HTML ETIQUETAS Y PROPIEDADES


          ¿Para quién?

Humanos       Usuarios           Máquinas


      Comunicamos/Informamos
HTML ETIQUETAS Y PROPIEDADES


            ¿Para quién?

Humanos        Usuarios           Máquinas


       Comunicamos/Informamos
  Visible                      “Invisible”
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios            Máquinas


                 Comunicamos/Informamos
            Visible                       “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios            Máquinas


                 Comunicamos/Informamos
            Visible                       “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
Contenido del artículo      ➡       p, blockquote
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios               Máquinas


                 Comunicamos/Informamos
            Visible                         “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
Contenido del artículo      ➡       p, blockquote
Lista de elementos          ➡       ol, ul, li, dl, dt, dd.
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios               Máquinas


                 Comunicamos/Informamos
            Visible                         “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
Contenido del artículo      ➡       p, blockquote
Lista de elementos          ➡       ol, ul, li, dl, dt, dd.
Datos en excel              ➡       table, td, tr,
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios               Máquinas


                 Comunicamos/Informamos
            Visible                         “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
Contenido del artículo      ➡       p, blockquote
Lista de elementos          ➡       ol, ul, li, dl, dt, dd.
Datos en excel              ➡       table, td, tr,
                            ➡       Valores de atributos
HTML ETIQUETAS Y PROPIEDADES


                      ¿Para quién?

      Humanos            Usuarios               Máquinas


                 Comunicamos/Informamos
            Visible                         “Invisible”


Titulares                   ➡       h1, h2, h3, h4, h5, h6
Contenido del artículo      ➡       p, blockquote
Lista de elementos          ➡       ol, ul, li, dl, dt, dd.
Datos en excel              ➡       table, td, tr,
                            ➡       Valores de atributos
HTML ETIQUETAS Y PROPIEDADES



     Estructura de Elementos


                Elemento




<a href=”” title=””>texto de enlace</a>
HTML ETIQUETAS Y PROPIEDADES



       Estructura de Elementos


                      Elemento

 <Etiqueta inicial>                 </Etiqueta final>




<a href=”” title=””>texto de enlace</a>
HTML ETIQUETAS Y PROPIEDADES



       Estructura de Elementos


                      Elemento

 <Etiqueta inicial>                 </Etiqueta final>

                           Contenido




<a href=”” title=””>texto de enlace</a>
HTML ETIQUETAS Y PROPIEDADES



       Estructura de Elementos


                          Elemento

 <Etiqueta inicial>                     </Etiqueta final>

       Atributo=”valor”        Contenido




<a href=”” title=””>texto de enlace</a>
HTML ETIQUETAS Y PROPIEDADES



       Estructura de Elementos


                          Elemento

 <Etiqueta inicial>                     </Etiqueta final>

       Atributo=”valor”        Contenido




<a href=”” title=””>texto de enlace</a>
HTML ETIQUETAS Y PROPIEDADES



         Valores de Atributos
Propiedad de algunos elementos a los que se les
 asigna Valores específicos (Humanos/Robots)
                   Elemento
          <a> vínculo o ancla </a>
HTML ETIQUETAS Y PROPIEDADES



             Valores de Atributos
   Propiedad de algunos elementos a los que se les
    asigna Valores específicos (Humanos/Robots)
                          Elemento
               <a> vínculo o ancla </a>
                 •href       •hreflang
                 •title      •accesskey
                 •class      •rel
                 •id         •tabindex


       <a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo o
                       ancla </a>
Recursos, productos de
                    apoyo, blogs, listas y más.

Recursos y documentación                                    Validadores
✓   WAI
                                                            ✓   WCAG 2.0 Checklist
    http://www.w3.org/WAI/
                                                                http://olgacarreras.blogspot.com/2009/04/wcag-20-
✓   Blog de Olga Carreras                                       checklist.html
    http://olgacarreras.blogspot.com/2007/02/wcag-20.html
                                                            ✓   Guías Prácticas para Profesionales Web:
✓   SIDAR                                                       Puntos de verificación
    www.sidra.org                                               http://qweos.net/blog/2009/01/28/guias-practicas-
                                                                para-profesionales-web-puntos-de-verificacion-de-
✓   WCAG 2.0                                                    las-pautas-de-accesibilidad-al-contenido-web-
    http://www.w3.org/TR/WCAG20/                                wcag-20/
    http://www.codexexempla.org/traducciones/pautas-
    accesibilidad-contenido-web-2.0.htm                     ✓   TAW
                                                                http://www.tawdis.net/index.html?lang=es
✓   WCAG 1.0
    http://www.w3.org/TR/WCAG10/                            ✓   Web Accessibility Checker
                                                                http://achecker.ca/checker/
✓   Wiki
    http://es.wikipedia.org/wiki/Accesibilidad_web          ✓   Accessibility Inspector Firefox
                                                                http://code.google.com/p/ainspector/
✓   How to Meet WCAG 2.0
    http://www.w3.org/WAI/WCAG20/quickref/                  ✓   WAVE
                                                                http://wave.webaim.org/toolbar
✓   Understanding WCAG 2.0
                                                            ✓   EXAMINATOR
    http://www.w3.org/TR/UNDERSTANDING-WCAG20/
                                                                x

                                                                                                 www.maximiliano.cl
Recursos, productos de
                    apoyo, blogs, listas y más.

Lectores de Pantalla
✓   NVDA (Free)
    http://www.nvda-project.org/

✓   Jaws
    http://www.freedomscientific.com/jaws-hq.asp

✓   Window-Eyes
    http://www.gwmicro.com/window-eyes/

✓   Lectores de Pantalla Wiki
    http://es.wikipedia.org/wiki/Lector_de_pantalla

✓   CCA Color Contrast Analyzer




                                                      www.maximiliano.cl
Y en el Taller analizaremos
       www.uanl.mx




                              www.maximiliano.cl
Muchas Gracias
      ¿Preguntas?



   Maximiliano Martin
        @maxymiliano




www.ida.cl - www.maximiliano.cl

      maximiliano@ida.cl


                                  www.maximiliano.cl

More Related Content

Similar to Accesibilidad adolescente Estado actual

Accesibilidad Web
Accesibilidad WebAccesibilidad Web
Accesibilidad Webqweos
 
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.Arantxa Hernandez
 
iCapax Soluciones Informáticas para todos
iCapax Soluciones Informáticas para todosiCapax Soluciones Informáticas para todos
iCapax Soluciones Informáticas para todosmanuel.escobar
 
Manuel Razzari - Accesibilidad web e Inclusión Social
Manuel Razzari - Accesibilidad web e Inclusión SocialManuel Razzari - Accesibilidad web e Inclusión Social
Manuel Razzari - Accesibilidad web e Inclusión SocialIxDA La Plata
 
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017Fausto García
 
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS Try Design
 
Historia y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesHistoria y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesAdriana Tienda
 
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosLa web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosFer Torres
 
Accesibilidad y Turismo. Daniel Iglesias. Andalucía Lab
Accesibilidad y Turismo. Daniel Iglesias. Andalucía LabAccesibilidad y Turismo. Daniel Iglesias. Andalucía Lab
Accesibilidad y Turismo. Daniel Iglesias. Andalucía Labandalucialab
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacionsoniafm
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacionsoniafm
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Nervo Verdezoto
 
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)PROQUAME
 
Cómo hacer portales accesibles sobre Liferay 6.1
Cómo hacer portales accesibles sobre Liferay 6.1Cómo hacer portales accesibles sobre Liferay 6.1
Cómo hacer portales accesibles sobre Liferay 6.1Julio Camarero
 
Accesibilidad Laura
Accesibilidad LauraAccesibilidad Laura
Accesibilidad Laurainformatica4
 
Savia. Introducción al Marketing Online (2009)
Savia. Introducción al Marketing Online (2009)Savia. Introducción al Marketing Online (2009)
Savia. Introducción al Marketing Online (2009)inaki1980
 

Similar to Accesibilidad adolescente Estado actual (20)

Technisys accesibilidad mobile
Technisys accesibilidad mobileTechnisys accesibilidad mobile
Technisys accesibilidad mobile
 
Accesibilidad Web
Accesibilidad WebAccesibilidad Web
Accesibilidad Web
 
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
Mitos, leyendas y apuntes de Accesibilidad. Pinceladas básicas.
 
iCapax Soluciones Informáticas para todos
iCapax Soluciones Informáticas para todosiCapax Soluciones Informáticas para todos
iCapax Soluciones Informáticas para todos
 
Manuel Razzari - Accesibilidad web e Inclusión Social
Manuel Razzari - Accesibilidad web e Inclusión SocialManuel Razzari - Accesibilidad web e Inclusión Social
Manuel Razzari - Accesibilidad web e Inclusión Social
 
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017
Conferencia: Servicios / Estrategia de diferenciación - IPADE 2017
 
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS
Taller accesibilidad web Centro de Sistemas Públicos UCH - SENADIS
 
Historia y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesHistoria y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visuales
 
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosLa web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
 
NAVEGABILIDAD (1).pptx
NAVEGABILIDAD (1).pptxNAVEGABILIDAD (1).pptx
NAVEGABILIDAD (1).pptx
 
Accesibilidad y Turismo. Daniel Iglesias. Andalucía Lab
Accesibilidad y Turismo. Daniel Iglesias. Andalucía LabAccesibilidad y Turismo. Daniel Iglesias. Andalucía Lab
Accesibilidad y Turismo. Daniel Iglesias. Andalucía Lab
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacion
 
Accesibilidad web presentacion
Accesibilidad web presentacionAccesibilidad web presentacion
Accesibilidad web presentacion
 
Canal digital
Canal digitalCanal digital
Canal digital
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
 
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)
¿Cómo beneficiar a tu empresa con las redes sociales? (Parte 2)
 
Cómo hacer portales accesibles sobre Liferay 6.1
Cómo hacer portales accesibles sobre Liferay 6.1Cómo hacer portales accesibles sobre Liferay 6.1
Cómo hacer portales accesibles sobre Liferay 6.1
 
Accesibilidad Laura
Accesibilidad LauraAccesibilidad Laura
Accesibilidad Laura
 
Accesibilidad
AccesibilidadAccesibilidad
Accesibilidad
 
Savia. Introducción al Marketing Online (2009)
Savia. Introducción al Marketing Online (2009)Savia. Introducción al Marketing Online (2009)
Savia. Introducción al Marketing Online (2009)
 

More from Maximiliano Martin

MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados Maximiliano Martin
 
Metodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchileMetodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchileMaximiliano Martin
 
IDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.clIDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.clMaximiliano Martin
 
Evaluación, Diseño Front CSS
Evaluación, Diseño Front CSSEvaluación, Diseño Front CSS
Evaluación, Diseño Front CSSMaximiliano Martin
 
Marcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMarcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMaximiliano Martin
 
Eficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidadEficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidadMaximiliano Martin
 
Explorando el mundo de la Energía Sola
Explorando el mundo de la Energía SolaExplorando el mundo de la Energía Sola
Explorando el mundo de la Energía SolaMaximiliano Martin
 
HTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementosHTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementosMaximiliano Martin
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?Maximiliano Martin
 
Qué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarmeQué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarmeMaximiliano Martin
 
Metodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMetodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMaximiliano Martin
 

More from Maximiliano Martin (20)

MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados MIOR Modelo de Interacción Orientada a Resultados
MIOR Modelo de Interacción Orientada a Resultados
 
Metodología FOP
Metodología FOPMetodología FOP
Metodología FOP
 
Metodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchileMetodologia Diseño Centrado en el Usuario @IDAchile
Metodologia Diseño Centrado en el Usuario @IDAchile
 
IDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.clIDA Responsive webprendedor 2012 - Capital.cl
IDA Responsive webprendedor 2012 - Capital.cl
 
Clase 09
Clase 09Clase 09
Clase 09
 
Evaluación, Diseño Front CSS
Evaluación, Diseño Front CSSEvaluación, Diseño Front CSS
Evaluación, Diseño Front CSS
 
Marcado HTML Resumen y Evaluación
Marcado HTML Resumen y EvaluaciónMarcado HTML Resumen y Evaluación
Marcado HTML Resumen y Evaluación
 
Div, Validadores,
Div, Validadores, Div, Validadores,
Div, Validadores,
 
Taller horno solar
Taller horno solarTaller horno solar
Taller horno solar
 
Hornos Solares
Hornos SolaresHornos Solares
Hornos Solares
 
Energía Solar y Robótica
Energía Solar y  RobóticaEnergía Solar y  Robótica
Energía Solar y Robótica
 
Eficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidadEficiencia energética: propuestas de sustentabilidad
Eficiencia energética: propuestas de sustentabilidad
 
Explorando el mundo de la Energía Sola
Explorando el mundo de la Energía SolaExplorando el mundo de la Energía Sola
Explorando el mundo de la Energía Sola
 
HTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementosHTML Contenedores y tipos de elementos
HTML Contenedores y tipos de elementos
 
Estructura principal de HTML
Estructura principal de HTMLEstructura principal de HTML
Estructura principal de HTML
 
Energías Alternativas
Energías AlternativasEnergías Alternativas
Energías Alternativas
 
WordPress en servidor local
WordPress en servidor localWordPress en servidor local
WordPress en servidor local
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Qué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarmeQué es Sprites y por qué debería interesarme
Qué es Sprites y por qué debería interesarme
 
Metodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMetodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el Usuario
 

Recently uploaded

EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxJulioSantin2
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariamichel carlos Capillo Dominguez
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCEIP TIERRA DE PINARES
 
Programación Anual 2024 - CIENCIAS SOCIALES.docx
Programación Anual 2024  - CIENCIAS SOCIALES.docxProgramación Anual 2024  - CIENCIAS SOCIALES.docx
Programación Anual 2024 - CIENCIAS SOCIALES.docxJhordanBenitesSanche1
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativaricardoruizaleman
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCarolVigo1
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxKarenSepulveda23
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdfdiana593621
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...Unidad de Espiritualidad Eudista
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaElizabeth252489
 
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.docGLADYSPASTOR
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAlejandrino Halire Ccahuana
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 

Recently uploaded (20)

EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptx
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primaria
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
 
Tema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdfTema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdf
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
VISITA DE ESTUDO À CRUZ VERMELHA _
VISITA DE ESTUDO À CRUZ VERMELHA                   _VISITA DE ESTUDO À CRUZ VERMELHA                   _
VISITA DE ESTUDO À CRUZ VERMELHA _
 
Programación Anual 2024 - CIENCIAS SOCIALES.docx
Programación Anual 2024  - CIENCIAS SOCIALES.docxProgramación Anual 2024  - CIENCIAS SOCIALES.docx
Programación Anual 2024 - CIENCIAS SOCIALES.docx
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativa
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacion
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptx
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primaria
 
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendiciones
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 

Accesibilidad adolescente Estado actual

  • 1. IDEAS DIGITALES APLICADAS #UAdigital2012 @uadigital ACCESIBILIDAD ADOLESCENTE Maximiliano Martin maximiliano.cl / ida.cl @maxymiliano Noviembre 2012
  • 2. ¿QUIÉN SOY? Y QUÉ HAGO Maximiliano Martin @maxymiliano ✓ Diseñador gráfico de la PUCV ✓ 11 años haciendo internet en Chile ✓ Más de 90 sitios de experiencia Banca, Gobierno, Turismo, Medios online, Móviles, Sistemas y más. ✓ Formación en Accesibilidad Web WCAG 2.0 – Tawdis ✓ Socio fundador y actual CEO en IDA – Ideas Digitales Aplicadas - www.ida.cl Consultora de experiencia de usuarios, estrategia digital, diseño y desarrollo www.maximiliano.cl
  • 3. ¿Qué veremos en esta presentación? ✓ ¿Qué es la Accesibilidad? ✓ ¿Y la accesibilidad web? ✓ Un poco de Historia ✓ ¿Qué son las WCAG 2.0? ✓ Y para ser accesible: Metodología de evaluación ✓ ¿Quién debe hacerse cargo? ✓ Recursos, Ejemplos, listas y más. www.maximiliano.cl
  • 4. José Ignacio Cuadra ✓ 27 años ✓ Estudiante de periodismo. Se titula en Diciembre ✓ Nació viendo 0,05 en el ojo izquierdo hasta el mes pasado “He quedado fuera, al menos de momento, de las opciones laborales” www.maximiliano.cl
  • 5. Sobre la accesibilidad José Ignacio Cuadra ✓ Al fin la falta de algún sentido -en este caso el visual- deja de ser una barrera a la información. ✓ Si todos fuésemos iguales -a nivel de sentidos- quizás no habría nadie sufriendo por no poder hacer algo. ✓ Es el acceso el que trae progreso www.maximiliano.cl
  • 6. ¿Qué es la Accesibilidad? ✓ Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio. (wiki) ✓ rampas ✓ ascensores ✓ baños amplios ✓ acceso o atención preferencial ✓ lenguaje de señas, etc. www.maximiliano.cl
  • 7. ¿Qué es la Accesibilidad? ✓ Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio. (wiki) ✓ rampas ✓ ascensores ✓ baños amplios ✓ acceso o atención preferencial ✓ lenguaje de señas, etc. www.maximiliano.cl
  • 8. ¿Qué es la Accesibilidad? ✓ Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio. (wiki) ✓ rampas ✓ ascensores ✓ baños amplios ✓ acceso o atención preferencial ✓ lenguaje de señas, etc. www.maximiliano.cl
  • 9. ¿Y la accesibilidad web? ✓ Debe ser entendida como un derecho ✓ Capacidad de acceso a la web y a su contenido ✓ Independiente de sus capacidades físicas, intelectuales, tecnológicas o ambientales. ✓ Apuntar a un acceso universal www.maximiliano.cl
  • 10. Por qué es importante ¿Y la accesibilidad web? ✓ Por la relevancia actual que tiene la web ✓ Fomenta la igualdad de oportunidades ✓ Ocasión sin precedentes www.maximiliano.cl
  • 11. Quién beneficia ¿Y la accesibilidad web? ✓ Personas con algún tipo de discapacidad o con capacidades especiales www.maximiliano.cl
  • 12. Quién beneficia ¿Y la accesibilidad web? ✓ Personas con algún tipo de discapacidad o con capacidades especiales Físicas o motrices Visuales Cognitivas o Auditivas neurológicas www.maximiliano.cl
  • 13. Quién beneficia ¿Y la accesibilidad web? ✓ Personas con algún tipo de discapacidad o con capacidades especiales www.maximiliano.cl
  • 14. Quién beneficia ¿Y la accesibilidad web? ✓ Personas con algún tipo de discapacidad o con capacidades especiales Navegadores Por el entorno antiguos Equipos o Idioma Conexiones Usuarios Envejecimiento inexpertos www.maximiliano.cl
  • 15. Quién beneficia ¿Y la accesibilidad web? A todos los usuarios www.maximiliano.cl
  • 16. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 17. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 18. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 19. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 20. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 21. Productos de apoyo ¿Y la accesibilidad web? ✓ Braile ✓ Lectores de pantalla ✓ Navegadores de Texto ✓ Ampliadores de pantalla ✓ Teclados alternativos ✓ Teclados amplios o reducidos www.maximiliano.cl
  • 22. Por qué crear webs accesibles ¿Y la accesibilidad web? ✓ Aumentar de forma inmediata los potenciales usuarios ✓ Mejora la distribución del contenido y la inteligencia colectiva. Convirtiéndonos en un mejor sociedad ✓ Reduce el tiempo de carga de las páginas ✓ Amplía los dispositivos que pueden acceder ✓ Mejora la usabilidad del sitio www.maximiliano.cl
  • 23. Por qué crear webs accesibles ¿Y la accesibilidad web? ✓ Ayuda a cumplir obligaciones legales ✓ Motores de búsqueda ✓ Mejor comportamiento en navegadores ✓ Mejora la imagen y transparenta la RSE ✓ Reducen costos de matención www.maximiliano.cl
  • 24. Un poco historia www.maximiliano.cl
  • 25. Un poco historia q 1989 Web www.maximiliano.cl
  • 26. Un poco historia 1997 Master Document q 1989 Web www.maximiliano.cl
  • 27. Un poco historia 1997 Master Document q 1989 q Web 1999 WCAG 1.0 www.maximiliano.cl
  • 28. Un poco historia 1997 Master Document q q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
  • 29. Un poco historia 1997 Master Document 2002-2012 España UNE 139803 2004 q q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
  • 30. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004 q q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
  • 31. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004 q q 1989 q 2001 USA q Web Sección 508 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
  • 32. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004 q q q 1989 q 2001 USA q 2007 Web Mexico Sección 508 Manual Urbano 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
  • 33. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004 q q q q 2001 2008 1989 q USA q 2007 WCAG 2.0 Web Mexico Sección 508 Manual Urbano 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
  • 34. Un poco historia 1997 Master 2002-2006 eEurope / Normativa CWA Document 2010 2002-2012 Argentina España Ley 26.653 UNE 139803 2004 q q q q 2001 2008 1989 q USA q 2007 WCAG 2.0 Web Mexico Sección 508 Manual Urbano 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
  • 35. Un poco historia 1997 Master 2002-2006 eEurope / Normativa CWA Document 2010 2002-2012 Argentina España Ley 26.653 UNE 139803 2004 q q q q q 2001 2008 1989 q USA q 2007 WCAG 2.0 2011 Web Mexico Mexico Sección 508 Manual Urbano LEY GAP 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
  • 36. Y el estado real de la situación Un poco de historia www.maximiliano.cl
  • 37. Y el estado real de la situación Un poco de historia ✓ A 22 años De la creación de la web www.maximiliano.cl
  • 38. Y el estado real de la situación Un poco de historia ✓ A 22 años De la creación de la web ✓ A 15 años De la primera referencia www.maximiliano.cl
  • 39. Y el estado real de la situación Un poco de historia ✓ A 22 años De la creación de la web ✓ A 15 años De la primera referencia ✓ A 13 años De las WCAG 1.0 www.maximiliano.cl
  • 40. Y el estado real de la situación Un poco de historia ✓ A 22 años De la creación de la web ✓ A 15 años De la primera referencia ✓ A 13 años De las WCAG 1.0 ✓ A 4 años De las WCAG 2.0 www.maximiliano.cl
  • 41. ¿Qué son las WCAG 2.0? ✓ Iniciativa de Accesibilidad a la web - WAI ✓ Grupo de trabajo permanente de las W3C Org. internacional desarrollo de estándares ✓ WAI actúa sobre cinco áreas ✓ Asegurar que las tecnologías web den soporte a la accesibilidad ✓ Desarrollar pautas de accesibilidad ✓ Crear herramientas de evaluación y corrección de la accesibilidad web ✓ Desarrollar materiales para la educación y difusión ✓ Coordinar proyectos de investigación y desarrollo www.maximiliano.cl
  • 42. La trilogía WCAG, UAAG, ATAG ¿Qué son las WCAG 2.0? ✓ WCAG Guía de accesibilidad para el contenido ✓ ATAG ✓ Guía de accesibilidad para herramientas de autor ✓ UAAG Guía de accesibilidad para agentes de usuario www.maximiliano.cl
  • 43. La trilogía WCAG, UAAG, ATAG ¿Qué son las WCAG 2.0? ✓ WCAG Guía de accesibilidad para el contenido ✓ ATAG ✓ Guía de accesibilidad para herramientas de autor ✓ UAAG Guía de accesibilidad para agentes de usuario www.maximiliano.cl
  • 44. ¿Qué son las WCAG 2.0? ✓ Web Content Accessibility Guidelines, WCAG ✓ Principios (4) ✓ Pautas (12) ✓ Criterios de conformidad (61) ✓ Niveles de cumplimiento (3) www.maximiliano.cl
  • 45. Principios ¿Qué son las WCAG 2.0? ✓ Perceptible ✓ Operable ✓ Comprensible ✓ Robusto www.maximiliano.cl
  • 46. Principios ¿Qué son las WCAG 2.0? ✓ Perceptible La información y los componentes de la interfaz de ✓ Operable usuario deben ser presentados a los usuarios de modo que ✓ Comprensible ellos puedan percibirlos. ✓ Robusto www.maximiliano.cl
  • 47. Principios ¿Qué son las WCAG 2.0? ✓ Perceptible ✓ Operable Los componentes de la interfaz de usuario y la navegación ✓ Comprensible deben ser operables. ✓ Robusto www.maximiliano.cl
  • 48. Principios ¿Qué son las WCAG 2.0? ✓ Perceptible ✓ Operable ✓ Comprensible La información y el manejo de la interfaz de usuario deben ser ✓ Robusto comprensibles. www.maximiliano.cl
  • 49. Principios ¿Qué son las WCAG 2.0? ✓ Perceptible ✓ Operable ✓ Comprensible ✓ Robusto El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo los productos de apoyo. www.maximiliano.cl
  • 50. Principios ¿Qué son las WCAG 2.0? www.maximiliano.cl
  • 51. Principios ¿Qué son las WCAG 2.0? www.maximiliano.cl
  • 52. Principios ¿Qué son las WCAG 2.0? www.maximiliano.cl
  • 53. Principios ¿Qué son las WCAG 2.0? www.maximiliano.cl
  • 54. Principios ¿Qué son las WCAG 2.0? www.maximiliano.cl
  • 55. Y para ser accesible Herramientas de validación, software, productos de apoyo www.maximiliano.cl
  • 56. Y para ser accesible Herramientas de validación, software, productos de apoyo ✓ Debo querer hacerlo www.maximiliano.cl
  • 57. Y para ser accesible Herramientas de validación, software, productos de apoyo ✓ Debo querer hacerlo ✓ Comprometer a la organización. NO es responsabilidad de una sola persona www.maximiliano.cl
  • 58. Y para ser accesible Herramientas de validación, software, productos de apoyo ✓ Debo querer hacerlo ✓ Comprometer a la organización. NO es responsabilidad de una sola persona ✓ Adaptar mis metodologías con buenas prácticas accesibles y validación de estándares W3C www.maximiliano.cl
  • 59. Y para ser accesible Herramientas de validación, software, productos de apoyo ✓ Debo querer hacerlo ✓ Comprometer a la organización. NO es responsabilidad de una sola persona ✓ Adaptar mis metodologías con buenas prácticas accesibles y validación de estándares W3C ✓ Usar herramientas que me ayuden a validar constantemente www.maximiliano.cl
  • 60. Comprometer a la organización Y para ser accesible ✓ En todas las etapas del proceso hay pequeñas cosas que se deben hacer de forma accesible ✓ Crear conciencia que es algo que mejora el producto ✓ Conocer realidades (online o presenciales) www.maximiliano.cl
  • 61. Adaptar metodologías Y para ser accesible ✓ Asimilar los principios, sus pautas y aplicar los criterios definidos por las WCAG 2.0 ✓ Instalar, conocer y usar herramientas de apoyo ✓ Validar y declarar el nivel de accesibilidad de forma correcta y verdadera. www.maximiliano.cl
  • 62. Que Validar Y para ser accesible ✓ Validar sintaxis de HTML, CSS, XML ✓ Definir el nivel de conformidad (A, AA, AAA) ✓ Validar PDFs ✓ Verificar comportamiento en móviles ✓ Visualizar en múltiples opciones. Sin imágenes, sin CSS, con lectores de pantalla, etc. www.maximiliano.cl
  • 63. Que Validar Y para ser accesible ✓ Complejidad de los textos Lo medular v/s lo accesorio ✓ Ortografía ✓ Colores, tamaños y contrastes ✓ Animaciones, audios, videos y el control de ellas ✓ Links rotos, disponibilidad de las imágenes, implementación de ellas. www.maximiliano.cl
  • 64. Metodología de evaluación ✓ Análisis previo ✓ Evaluación Automática ✓ Evaluación Manual ✓ Pruebas de Usuario ✓ Monitoreo continuo www.maximiliano.cl
  • 65. Análisis Previo Evaluación Paso 1 ✓ Nivel de conformidad y ámbito ✓ A, AA, AAA ✓ Alcance: Sitio completo, Subdominio, directorio, etc ✓ Análisis del diseño del sitio ✓ Selección de una muestra ✓ Elección de las herramientas ✓ Evaluación manual preliminar www.maximiliano.cl
  • 66. Evaluación Automática Evaluación Paso 2 ✓ Sintaxis del código ✓ Accesibilidad HTML/CSS www.maximiliano.cl
  • 67. Evaluación Manual Evaluación Paso 3 ✓ Texto alternativo de imágenes <img src="http://uadigital.uanl.mx/imag/Slide02.jpg" width="940" height="340"/> www.maximiliano.cl
  • 68. Evaluación Manual Evaluación Paso 3 ✓ Texto alternativo de imágenes ✓ Tablas con encabezados ✓ Tabulación y Lectura ✓ Información por Color ✓ Cambios de Idioma ✓ Lenguaje claro y sencillo ✓ Usar teclado y lectores de pantalla www.maximiliano.cl
  • 69. Evaluación Manual Evaluación Paso 3 ✓ Texto alternativo de imágenes ✓ Tablas con encabezados ✓ Tabulación y Lectura ✓ Información por Color ✓ Cambios de Idioma ✓ Lenguaje claro y sencillo ✓ Usar teclado y lectores de pantalla www.maximiliano.cl
  • 70. Pruebas de Usuario y Monitoreo continuo Evaluación Paso 4 y 5 ✓ Nivel de adecuación y ámbito o alcance requerido ✓ Responsables y procedimientos rápidos. ✓ Evaluar páginas nuevas antes de que se añadan al sitio web. ✓ Disponer del software para facilitar la evaluación. ✓ Añadir opciones de feedback sobre la accesibilidad www.maximiliano.cl
  • 71. Debe estar presente en todo el proceso ¿Quién debe hacerse cargo? www.maximiliano.cl
  • 72. Debe estar presente en todo el proceso ¿Quién debe hacerse cargo? Estrategia Estudio Usuarios Arquitectura Diseño Visual Pro&Des www.maximiliano.cl
  • 73. ¿Quién debe hacerse cargo? ✓ Periodistas ✓ Diseñadores Visuales ✓ Arquitectos de Información ✓ Programadores ✓ Diseñadores de Interacción ✓ Front End ✓ Proveedores de servicios y/o productos www.maximiliano.cl
  • 74. Un ejemplo En casa de herrero, cuchillo de palo www.maximiliano.cl
  • 75. Un ejemplo En casa de herrero, cuchillo de palo www.maximiliano.cl
  • 76. HTML/SEO OBJETIVOS GENERALES Conocer el contexto actual de HTML y dominar los parámetros básicos para la generación de contenido con estructura semántica.
  • 77. HTML ETIQUETAS Y PROPIEDADES Etiquetas y propiedades HTML ¿Para qué sirve?
  • 78. HTML ETIQUETAS Y PROPIEDADES Etiquetas y propiedades HTML ¿Para qué sirve? - Lenguaje de Marcado - Otorga estructura semántica al contenido - Describir estructura y contenido - Complementar el texto con Objetos - Se escribe en forma de “Etiquetas” - Rodeada por Corchetes Angulares < >
  • 79. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> </html> www.maximiliano.cl
  • 80. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> </html> www.maximiliano.cl
  • 81. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
  • 82. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
  • 83. HTML ETIQUETAS Y PROPIEDADES Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación •Estilos <title> y otros elementos •Link •Base </head> <body> </body> </html> www.maximiliano.cl
  • 84. HTML ETIQUETAS Y PROPIEDADES Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación •Estilos <title> y otros elementos •Link •Base </head> Módulos de: •Texto <body> •p, code, div, em, strong, span, q, pre, samp, h1, h2, h3, etc elementos •Hipertexto •Lista •Objetos •Presentación •Edición •Formularios </body> •Tablas •Imágen </html> •Otros www.maximiliano.cl
  • 85. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Usuarios Comunicamos/Informamos
  • 86. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos
  • 87. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”
  • 88. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6
  • 89. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6 Contenido del artículo ➡ p, blockquote
  • 90. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6 Contenido del artículo ➡ p, blockquote Lista de elementos ➡ ol, ul, li, dl, dt, dd.
  • 91. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6 Contenido del artículo ➡ p, blockquote Lista de elementos ➡ ol, ul, li, dl, dt, dd. Datos en excel ➡ table, td, tr,
  • 92. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6 Contenido del artículo ➡ p, blockquote Lista de elementos ➡ ol, ul, li, dl, dt, dd. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
  • 93. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titulares ➡ h1, h2, h3, h4, h5, h6 Contenido del artículo ➡ p, blockquote Lista de elementos ➡ ol, ul, li, dl, dt, dd. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
  • 94. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <a href=”” title=””>texto de enlace</a>
  • 95. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> <a href=”” title=””>texto de enlace</a>
  • 96. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Contenido <a href=”” title=””>texto de enlace</a>
  • 97. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a>
  • 98. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a>
  • 99. HTML ETIQUETAS Y PROPIEDADES Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) Elemento <a> vínculo o ancla </a>
  • 100. HTML ETIQUETAS Y PROPIEDADES Valores de Atributos Propiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) Elemento <a> vínculo o ancla </a> •href •hreflang •title •accesskey •class •rel •id •tabindex <a href=”http://www.wikipedia.com/ancla/” title=”Definición de Wikipedia” rel=”External”> vínculo o ancla </a>
  • 101. Recursos, productos de apoyo, blogs, listas y más. Recursos y documentación Validadores ✓ WAI ✓ WCAG 2.0 Checklist http://www.w3.org/WAI/ http://olgacarreras.blogspot.com/2009/04/wcag-20- ✓ Blog de Olga Carreras checklist.html http://olgacarreras.blogspot.com/2007/02/wcag-20.html ✓ Guías Prácticas para Profesionales Web: ✓ SIDAR Puntos de verificación www.sidra.org http://qweos.net/blog/2009/01/28/guias-practicas- para-profesionales-web-puntos-de-verificacion-de- ✓ WCAG 2.0 las-pautas-de-accesibilidad-al-contenido-web- http://www.w3.org/TR/WCAG20/ wcag-20/ http://www.codexexempla.org/traducciones/pautas- accesibilidad-contenido-web-2.0.htm ✓ TAW http://www.tawdis.net/index.html?lang=es ✓ WCAG 1.0 http://www.w3.org/TR/WCAG10/ ✓ Web Accessibility Checker http://achecker.ca/checker/ ✓ Wiki http://es.wikipedia.org/wiki/Accesibilidad_web ✓ Accessibility Inspector Firefox http://code.google.com/p/ainspector/ ✓ How to Meet WCAG 2.0 http://www.w3.org/WAI/WCAG20/quickref/ ✓ WAVE http://wave.webaim.org/toolbar ✓ Understanding WCAG 2.0 ✓ EXAMINATOR http://www.w3.org/TR/UNDERSTANDING-WCAG20/ x www.maximiliano.cl
  • 102. Recursos, productos de apoyo, blogs, listas y más. Lectores de Pantalla ✓ NVDA (Free) http://www.nvda-project.org/ ✓ Jaws http://www.freedomscientific.com/jaws-hq.asp ✓ Window-Eyes http://www.gwmicro.com/window-eyes/ ✓ Lectores de Pantalla Wiki http://es.wikipedia.org/wiki/Lector_de_pantalla ✓ CCA Color Contrast Analyzer www.maximiliano.cl
  • 103. Y en el Taller analizaremos www.uanl.mx www.maximiliano.cl
  • 104. Muchas Gracias ¿Preguntas? Maximiliano Martin @maxymiliano www.ida.cl - www.maximiliano.cl maximiliano@ida.cl www.maximiliano.cl

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. \n
  136. \n
  137. \n
  138. \n
  139. \n
  140. \n
  141. \n
  142. \n
  143. \n
  144. \n