Respetando el Diseño inclusivo al programar un sitio web

1,031 views

Published on

Respetar el diseño al momento de la programación.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Respetando el Diseño inclusivo al programar un sitio web

  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 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-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 de idioma 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

×