Respetando el diseño inclusivoal programar un sitio webMartín SzyszlicanSebastian Zelonka
Esta presentación y todos los ejemplos, los podés encontrar en                                                www.sebastia...
¿POR QUÉ HACER UN SITIO ACCESIBLE?PORQUE LA WEB ES DE TODOS  •	 Seguir las normativas del W3C  •	 En 2002 había 2 millones...
¿CÓMO ES UN SITIO WEB ACCESIBLE?PUEDE SER ACCEDIDO  •	 Con cualquier dispositivo conectado a la web     ▪▪ El servidor tie...
¿CÓMO ES UN SITIO WEB ACCESIBLE?PUEDE SER OPERADO POR  •	 Cualquier dispositivo conectado a la web     ▪▪ Teclado     ▪▪ M...
¿TENGO UN SITIO WEB ACCESIBLE?EL VALIDADOR NO ES TU ENEMIGO, ES TU HERRAMIENTA DE TRABAJO  •	 HERA: http://www.sidar.org/h...
¿CÓMO HAGO UN SITIO ACCESIBLE?CONOCER LOS ESTÁNDARES Y RECOMENDACIONES  •	 World Wide Web Consortium (W3C)     ▪▪ Web Cont...
¿CUÁLES SON LOS PROBLEMAS MÁSCOMUNES EN UN SITIO WEB?NAVEGACIÓN (MENÚES Y LINKS)  •	 Repetición (link para saltar al conte...
EJEMPLOS HTMLMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
PROBLEMAS CON LA NAVEGACIÓNEjemplo de menu inaccesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
Ejemplo de menu accesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
FORMULARIOSEjemplo de formulario inaccesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
Ejemplo de formulario accesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
IMÁGENESEjemplo de imágen con problemas de accesibilidadEjemplo de imágen accesibleMartin Szyszlican - Sebastian Zelonka |...
SEMÁNTICAEjemplo de títulos inaccesiblesEjemplo de títulos accesiblesMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
TEXTOS Y LINKSEjemplo de un texto inaccesibleEjemplo de un texto pensado para el usuarioMartin Szyszlican - Sebastian Zelo...
¿CÓMO EVITO LOS PROBLEMAS MASCOMUNES EN UN SITIO WEB?El texto de los enlaces debe ser claro cuando se lea fuera de context...
¿CÓMO EVITO LOS PROBLEMAS MASCOMUNES EN UN SITIO WEB?Tablas: Usar <thead>, <th>, <tbody> y <tfoot>Usar atributo lang=“” pa...
PARA SEGUIR LEYENDOLINEAMIENTOSXHTML http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htmCSS 2 http://www.sidar.or...
PARA SEGUIR LEYENDOESTADISTICAS DE DIVERSAS COSAS:Mobile http://www.webdevelopersnotes.com/articles/mobile-web-browser-usa...
Esta presentación y todos los ejemplos, los podés encontrar en                                                www.sebastia...
Muchas gracias                                                 Respetando el diseño inclusivo                             ...
Próxima SlideShare
Cargando en…5
×

Presentacion MDI - 28/10/10

271 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
271
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Presentacion MDI - 28/10/10

  1. 1. Respetando el diseño inclusivoal programar un sitio webMartín SzyszlicanSebastian Zelonka
  2. 2. Esta presentación y todos los ejemplos, los podés encontrar en www.sebastianzelonka.com.ar/mdiMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  3. 3. ¿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 NECESITAPORQUE EL CLIENTE LO PIDEPORQUE ES MÁS RENTABLE • Más clientes satisfechos • SEOMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  4. 4. ¿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 agregadosMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  5. 5. ¿CÓMO ES UN SITIO WEB ACCESIBLE?PUEDE SER OPERADO POR • Cualquier dispositivo conectado a la web ▪▪ Teclado ▪▪ Mouse ▪▪ Táctil ▪▪ JoystickPUEDE SER COMPRENDIDO POR • Niños • Personas con problemas cognitivos • Personas con visión reducida ▪▪ Diversidad de resoluciones y tamaños de pantalla • Extranjeros ▪▪ EncodingMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  6. 6. ¿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/yslowTESTEAR 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
  7. 7. ¿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 COMUNESMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  8. 8. ¿CUÁLES SON LOS PROBLEMAS MÁSCOMUNES 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 contextoFORMULARIOS • Onclick (mal uso de JavaScript) • Focus en el campo activo (los reset lo desactivan) • Uso de la etiqueta labelIMÁGENES • Imágen sin alt o longdescMAQUETACIÓN SEMÁNTICA • Uso de encabezados <h1> a <h6>Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  9. 9. EJEMPLOS HTMLMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  10. 10. PROBLEMAS CON LA NAVEGACIÓNEjemplo de menu inaccesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  11. 11. Ejemplo de menu accesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  12. 12. FORMULARIOSEjemplo de formulario inaccesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  13. 13. Ejemplo de formulario accesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  14. 14. IMÁGENESEjemplo de imágen con problemas de accesibilidadEjemplo de imágen accesibleMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  15. 15. SEMÁNTICAEjemplo de títulos inaccesiblesEjemplo de títulos accesiblesMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  16. 16. TEXTOS Y LINKSEjemplo de un texto inaccesibleEjemplo de un texto pensado para el usuarioMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  17. 17. ¿CÓMO EVITO LOS PROBLEMAS MASCOMUNES EN UN SITIO WEB?El texto de los enlaces debe ser claro cuando se lea fuera de contexto (nousar “click aquí”)Usar atributo title=“” para agregar una descripción a un enlace o cualquierelemento (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-desarrolladoresMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  18. 18. ¿CÓMO EVITO LOS PROBLEMAS MASCOMUNES EN UN SITIO WEB?Tablas: Usar <thead>, <th>, <tbody> y <tfoot>Usar atributo lang=“” para marcar el idioma del documento y los cambios deidioma dentro de esteUsar enlaces de texto normales para el menú (no imágenes, no flash, no ja-vascript)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-desarrolladoresMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  19. 19. PARA SEGUIR LEYENDOLINEAMIENTOSXHTML http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htmCSS 2 http://www.sidar.org/recur/desdi/traduc/es/css/cover.htmlWCAG 2 http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htmOtras directrices en español http://www.sidar.org/recur/desdi/traduc/es/index.phpVALIDADORESHERA http://www.sidar.org/heraExaminator http://examinator.wsTotal Validator http://www.totalvalidator.comYSlow http://developer.yahoo.com/yslowLECTORES DE PANTALLANVDA http://www.nvda-project.orgJAWS http://www.freedomscientific.com/products/fs/jaws-product-page.aspFangs (emulador firefox): https://addons.mozilla.org/en-US/firefox/addon/402/Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  20. 20. PARA SEGUIR LEYENDOESTADISTICAS DE DIVERSAS COSAS:Mobile http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.phpMobile 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.aspResoluciones http://www.webdevelopersnotes.com/design/web-screen-resolution-usage-statistics.phpWeb dev http://www.webdevelopersnotes.com/design/index.php3Uso de JS http://www.webintenta.com/cuantos-usuarios-tienen-javaScript-deshabilitado.htmlPersonas discapacitadas en Argentina http://www.buenosaires.gov.ar/areas/des_social/discapacidad/discapacidades/estadisti-cas.php?menu_id=16668Personas discapacitadas en Argentina http://www.indec.gov.ar/webcenso/ENDI_NUEVA/ampliada_index_total.asp?mode=01EJEMPLOS CATEGORIZADOS DE PROGRAMACIÓN ACCESIBLE:Página de ejemplos http://accesibilidadweb.dlsi.ua.es/?menu=ejemplosForms http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.htmlLISTA DE CORREO ÚTIL:AccesoWeb http://es.groups.yahoo.com/group/accesoweb/SEMINARIO IBEROAMERICANO SOBRE DISCAPACIDAD Y ACCESIBILIDAD EN LA REDSID@R http://www.sidar.org/index.phpMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  21. 21. Esta presentación y todos los ejemplos, los podés encontrar en www.sebastianzelonka.com.ar/mdiMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
  22. 22. Muchas gracias Respetando el diseño inclusivo al programar un sitio web @martinszy @sebazelonkaMartin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

×