Accesibilidad adolescente Estado actual

591 views
520 views

Published on

Introducción a la accesibilidad y su estado actual a 4 años de las WCAG 2.0 ¿Qué es? ¿Cómo abordarla? ¿A quién beneficia? ¿Quién debe hacerse cargo? Metodología de Evaluación y referencias. Charla dada en las Jornada de Usabilidad y Accesibilidad Digital UANL 2012, Monterrey, México

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
591
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Accesibilidad adolescente Estado actual

    1. 1. IDEASDIGITALESAPLICADAS #UAdigital2012 @uadigital ACCESIBILIDAD ADOLESCENTE Maximiliano Martin maximiliano.cl / ida.cl @maxymiliano Noviembre 2012
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Quién beneficia ¿Y la accesibilidad web?✓ Personas con algún tipo de discapacidad o con capacidades especiales www.maximiliano.cl
    12. 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. 13. Quién beneficia ¿Y la accesibilidad web?✓ Personas con algún tipo de discapacidad o con capacidades especiales www.maximiliano.cl
    14. 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. 15. Quién beneficia ¿Y la accesibilidad web?A todos los usuarios www.maximiliano.cl
    16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Un poco historia www.maximiliano.cl
    25. 25. Un poco historiaq 1989 Web www.maximiliano.cl
    26. 26. Un poco historia 1997 Master Documentq 1989 Web www.maximiliano.cl
    27. 27. Un poco historia 1997 Master Documentq 1989 q Web 1999 WCAG 1.0 www.maximiliano.cl
    28. 28. Un poco historia 1997 Master Documentq q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
    29. 29. Un poco historia 1997 Master Document 2002-2012 España UNE 139803 2004q q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
    30. 30. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004q q 1989 q 2001 USA Web Sección 508 1999 WCAG 1.0 www.maximiliano.cl
    31. 31. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004q q 1989 q 2001 USA q Web Sección 508 1999 2006 WCAG 1.0 Chile Decreto 100 www.maximiliano.cl
    32. 32. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004q 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. 33. Un poco historia 1997 Master 2002-2006 Document eEurope / Normativa CWA 2002-2012 España UNE 139803 2004q 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. 34. Un poco historia 1997 Master 2002-2006 eEurope / Normativa CWA Document 2010 2002-2012 Argentina España Ley 26.653 UNE 139803 2004q 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. 35. Un poco historia 1997 Master 2002-2006 eEurope / Normativa CWA Document 2010 2002-2012 Argentina España Ley 26.653 UNE 139803 2004q 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. 36. Y el estado real de la situación Un poco de historia www.maximiliano.cl
    37. 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. 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. 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. 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. 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. 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. 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. 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. 45. Principios ¿Qué son las WCAG 2.0?✓ Perceptible✓ Operable✓ Comprensible✓ Robusto www.maximiliano.cl
    46. 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. 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. 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. 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. 50. Principios¿Qué son las WCAG 2.0? www.maximiliano.cl
    51. 51. Principios¿Qué son las WCAG 2.0? www.maximiliano.cl
    52. 52. Principios¿Qué son las WCAG 2.0? www.maximiliano.cl
    53. 53. Principios¿Qué son las WCAG 2.0? www.maximiliano.cl
    54. 54. Principios¿Qué son las WCAG 2.0? www.maximiliano.cl
    55. 55. Y para ser accesibleHerramientas de validación, software, productos de apoyo www.maximiliano.cl
    56. 56. Y para ser accesible Herramientas de validación, software, productos de apoyo✓ Debo querer hacerlo www.maximiliano.cl
    57. 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. 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. 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. 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. 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. 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. 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. 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. 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. 66. Evaluación Automática Evaluación Paso 2✓ Sintaxis del código ✓ Accesibilidad HTML/CSS www.maximiliano.cl
    67. 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. 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. 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. 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. 71. Debe estar presente en todo el proceso ¿Quién debe hacerse cargo? www.maximiliano.cl
    72. 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. 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. 74. Un ejemploEn casa de herrero, cuchillo de palo www.maximiliano.cl
    75. 75. Un ejemploEn casa de herrero, cuchillo de palo www.maximiliano.cl
    76. 76. HTML/SEO OBJETIVOS GENERALES Conocer el contexto actual de HTML y dominar losparámetros básicos para la generación de contenido con estructura semántica.
    77. 77. HTML ETIQUETAS Y PROPIEDADESEtiquetas y propiedades HTML ¿Para qué sirve?
    78. 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. 79. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> </html>www.maximiliano.cl
    80. 80. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> </html>www.maximiliano.cl
    81. 81. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> <body> </body> </html>www.maximiliano.cl
    82. 82. HTML ETIQUETAS Y PROPIEDADES Estructura de documento <html> <head> </head> <body> </body> </html>www.maximiliano.cl
    83. 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. 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>•Otroswww.maximiliano.cl
    85. 85. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? UsuariosComunicamos/Informamos
    86. 86. HTML ETIQUETAS Y PROPIEDADES ¿Para quién?Humanos Usuarios Máquinas Comunicamos/Informamos
    87. 87. HTML ETIQUETAS Y PROPIEDADES ¿Para quién?Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”
    88. 88. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6
    89. 89. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6Contenido del artículo ➡ p, blockquote
    90. 90. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6Contenido del artículo ➡ p, blockquoteLista de elementos ➡ ol, ul, li, dl, dt, dd.
    91. 91. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6Contenido del artículo ➡ p, blockquoteLista de elementos ➡ ol, ul, li, dl, dt, dd.Datos en excel ➡ table, td, tr,
    92. 92. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6Contenido del artículo ➡ p, blockquoteLista de elementos ➡ ol, ul, li, dl, dt, dd.Datos en excel ➡ table, td, tr, ➡ Valores de atributos
    93. 93. HTML ETIQUETAS Y PROPIEDADES ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible”Titulares ➡ h1, h2, h3, h4, h5, h6Contenido del artículo ➡ p, blockquoteLista de elementos ➡ ol, ul, li, dl, dt, dd.Datos en excel ➡ table, td, tr, ➡ Valores de atributos
    94. 94. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento<a href=”” title=””>texto de enlace</a>
    95. 95. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final><a href=”” title=””>texto de enlace</a>
    96. 96. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Contenido<a href=”” title=””>texto de enlace</a>
    97. 97. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido<a href=”” title=””>texto de enlace</a>
    98. 98. HTML ETIQUETAS Y PROPIEDADES Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido<a href=”” title=””>texto de enlace</a>
    99. 99. HTML ETIQUETAS Y PROPIEDADES Valores de AtributosPropiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots) Elemento <a> vínculo o ancla </a>
    100. 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. 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. 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. 103. Y en el Taller analizaremos www.uanl.mx www.maximiliano.cl
    104. 104. Muchas Gracias ¿Preguntas? Maximiliano Martin @maxymilianowww.ida.cl - www.maximiliano.cl maximiliano@ida.cl www.maximiliano.cl

    ×