Respetando el diseño inclusivo al programar un sitio web, Martín Szyszlican y Sebastian Zelonka

Respetando el diseño inclusivo al programar un sitio web Martín Szyszlican Sebastian Zelonka

Esta presentación y todos los ejemplos, los podés encontrar en www.sebastianzelonka.com.ar/mdi Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿POR QUÉ HACER UN SITIO ACCESIBLE? PORQUE LA WEB ES DE TODOS • Seguir las normativas del W3C • En 2002 había 2 millones de personas con discapacidad en argentina (INDEC, endi) PORQUE EL GOBIERNO LO EXIGE • section 508 / usability.gov • GCBA • Ley nacional? PORQUE EL DISEÑO LO NECESITA PORQUE EL CLIENTE LO PIDE PORQUE ES MÁS RENTABLE • Más clientes satisfechos • SEO Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CÓMO ES UN SITIO WEB ACCESIBLE? PUEDE SER ACCEDIDO • Con cualquier dispositivo conectado a la web ▪ El servidor tiene que estar prendido (Uptime) ▪ El hosting tiene que poder ser accedido (conectividad) • Con cualquier ancho de banda ▪ Tiempo de descarga aceptable • Con cualquier navegador ▪ Modo gráfico ▪ Modo texto ▪ Lectores de pantalla • Con cualquier extensiones o agregados Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CÓMO ES UN SITIO WEB ACCESIBLE? PUEDE SER OPERADO POR • Cualquier dispositivo conectado a la web ▪ Teclado ▪ Mouse ▪ Táctil ▪ Joystick PUEDE SER COMPRENDIDO POR • Niños • Personas con problemas cognitivos • Personas con visión reducida ▪ Diversidad de resoluciones y tamaños de pantalla • Extranjeros ▪ Encoding Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿TENGO UN SITIO WEB ACCESIBLE? EL VALIDADOR NO ES TU ENEMIGO, ES TU HERRAMIENTA DE TRABAJO • HERA: http://www.sidar.org/hera • Examinator: http://examinator.ws • Total Validator: http://www.totalvalidator.com • YSlow: http://developer.yahoo.com/yslow TESTEAR CON USUARIOS • Si no sabés cómo navega un ciego, nunca vas a encontrar el problema. LECTORES DE PANTALLA • NVDA: http://www.nvda-project.org • JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp • Fangs (emulador firefox): https://addons.mozilla.org/en-US/firefox/addon/402/ Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CÓMO HAGO UN SITIO ACCESIBLE? CONOCER LOS ESTÁNDARES Y RECOMENDACIONES • World Wide Web Consortium (W3C) ▪ Web Content Accesibility Guidelines (WAI-WCAG2) ▪ Accesible Rich Internet Applications (WAI-ARIA) ▪ HTML, CSS, EcmaScript, RSS, etc. CAPACITAR Y ALINEAR A TODO EL EQUIPO • Si para nadie es importante, no se hará. • Area de control de calidad. DIFERENCIAR CADA PROYECTO • Cada proyecto es diferente. • Decidir a qué nivel de cumplimiento se va a llegar. CONOCER Y EVITAR LOS PROBLEMAS MÁS COMUNES Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CUÁLES SON LOS PROBLEMAS MÁS COMUNES EN UN SITIO WEB? NAVEGACIÓN (MENÚES Y LINKS) • Repetición (link para saltar al contenido) • Sub-item ocultos por display:none • Mismo color en links visitados y no visitados • Texto de los enlaces poco claros fuera de contexto FORMULARIOS • Onclick (mal uso de JavaScript) • Focus en el campo activo (los reset lo desactivan) • Uso de la etiqueta label IMÁGENES • Imágen sin alt o longdesc MAQUETACIÓN SEMÁNTICA • Uso de encabezados <h1> a <h6> Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

EJEMPLOS HTML Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

PROBLEMAS CON LA NAVEGACIÓN Ejemplo de menu inaccesible Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

Ejemplo de menu accesible Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

FORMULARIOS Ejemplo de formulario inaccesible Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

Ejemplo de formulario accesible Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

IMÁGENES Ejemplo de imágen con problemas de accesibilidad Ejemplo de imágen accesible Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

SEMÁNTICA Ejemplo de títulos inaccesibles Ejemplo de títulos accesibles Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

TEXTOS Y LINKS Ejemplo de un texto inaccesible Ejemplo de un texto pensado para el usuario Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CÓMO EVITO LOS PROBLEMAS MAS COMUNES EN UN SITIO WEB? El texto de los enlaces debe ser claro cuando se lea fuera de contexto (no usar “click aquí”) Usar atributo title=“” para agregar una descripción a un enlace o cualquier elemento (no es la forma de hacer tooltips en firefox) Usar encabezados <h1> a <h6> Forms: Usar <fieldset>, <legend> y <label> Forms: Ordenar los campos en una secuencia lógica. Usar tabindex te com- plica la vida y ayuda poco. Extraído de http://www.deinterfaz.com/blog/navegando-una-pagina-web-con-jaws-con- sideraciones-de-accesibilidad-para-desarrolladores Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

¿CÓMO EVITO LOS PROBLEMAS MAS COMUNES EN UN SITIO WEB? Tablas: Usar <thead>, <th>, <tbody> y <tfoot> Usar atributo lang=“” para marcar el idioma del documento y los cambios de idioma dentro de este Usar enlaces de texto normales para el menú (no imágenes, no flash, no javascript) Usar posicionamiento fuera de pantalla para ocultar menúes desplegables (no usar display:none) Extraído de http://www.deinterfaz.com/blog/navegando-una-pagina-web-con-jaws-con- sideraciones-de-accesibilidad-para-desarrolladores Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

PARA SEGUIR LEYENDO LINEAMIENTOS XHTML http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm CSS 2 http://www.sidar.org/recur/desdi/traduc/es/css/cover.html WCAG 2 http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Otras directrices en español http://www.sidar.org/recur/desdi/traduc/es/index.php VALIDADORES HERA http://www.sidar.org/hera Examinator http://examinator.ws Total Validator http://www.totalvalidator.com YSlow http://developer.yahoo.com/yslow LECTORES DE PANTALLA NVDA http://www.nvda-project.org JAWS http://www.freedomscientific.com/products/fs/jaws-product-page.asp Fangs (emulador firefox): https://addons.mozilla.org/en-US/firefox/addon/402/ Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

PARA SEGUIR LEYENDO ESTADISTICAS DE DIVERSAS COSAS: Mobile http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.php Mobile http://www.engadget.com/2010/03/29/stats-iphone-os-is-still-king-of-the-mobile-web-space-but-andr/ Resoluciones http://www.w3schools.com/browsers/browsers_display.asp Resoluciones http://www.webdevelopersnotes.com/design/web-screen-resolution-usage-statistics.php Web dev http://www.webdevelopersnotes.com/design/index.php3 Uso de JS http://www.webintenta.com/cuantos-usuarios-tienen-javaScript-deshabilitado.html Personas discapacitadas en Argentina http://www.buenosaires.gov.ar/areas/des_social/discapacidad/discapacidades/estadisticas.php?menu_id=16668 Personas discapacitadas en Argentina http://www.indec.gov.ar/webcenso/ENDI_NUEVA/ampliada_index_total.asp?mode=01 EJEMPLOS CATEGORIZADOS DE PROGRAMACIÓN ACCESIBLE: Página de ejemplos http://accesibilidadweb.dlsi.ua.es/?menu=ejemplos Forms http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html LISTA DE CORREO ÚTIL: AccesoWeb http://es.groups.yahoo.com/group/accesoweb/ SEMINARIO IBEROAMERICANO SOBRE DISCAPACIDAD Y ACCESIBILIDAD EN LA RED SID@R http://www.sidar.org/index.php Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

Esta presentación y todos los ejemplos, los podés encontrar en www.sebastianzelonka.com.ar/mdi Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

Muchas gracias Respetando el diseño inclusivo al programar un sitio web @martinszy @sebazelonka Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

http://moodlep12a.poligran.edu.co	822
http://blog.soreygarcia.me	302
http://escuelab.org	133
http://www.disenoinclusivo.org.ar	118
http://www.escuelab.org	110
http://moodlep11b.poligran.edu.co	42
http://www.avanet.org	16
http://iconoclastismo.blogspot.com	14
http://avanet.org	9
http://iconoclastismo.blogspot.com.ar	8
http://www.usarte.org	6
https://twitter.com	5
http://us-w1.rockmelt.com	2
http://dev.disenoinclusivo.org.ar	2
http://kred.com	1

Respetando el diseño inclusivo al programar un sitio web, Martín Szyszlican y Sebastian Zelonka

by movimientodisenoinclusivo on Nov 04, 2010

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 1,590

Statistics

Respetando el diseño inclusivo al programar un sitio web, Martín Szyszlican y Sebastian Zelonka Presentation Transcript