Download - Presentacion MDI - 28/10/10
Respetando el diseño inclusivo al programar un sitio web
Martín SzyszlicanSebastian Zelonka
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
¿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ÚESYLINKS)•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í”)
Usaratributotitle=“”paraagregarunadescripciónaunenlaceocualquierelemento(noeslaformadehacertooltipsenfirefox)
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
Tablas:Usar<thead>,<th>,<tbody>y<tfoot>
Usaratributolang=“”paramarcarelidiomadeldocumentoyloscambiosdeidioma dentro de este
Usarenlacesdetextonormalesparaelmenú(noimágenes,noflash,noja-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-desarrolladores
¿CÓMO EVITO LOS PROBLEMAS MAS COMUNES EN UN SITIO WEB?
Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN
PARA SEGUIR LEYENDO
LINEAMIENTOSXHTML 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
VALIDADORESHERA http://www.sidar.org/hera
Examinator http://examinator.ws
Total Validator http://www.totalvalidator.com
YSlow http://developer.yahoo.com/yslow
LECTORES DE PANTALLANVDA 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
PersonasdiscapacitadasenArgentinahttp://www.buenosaires.gov.ar/areas/des_social/discapacidad/discapacidades/estadisti-cas.php?menu_id=16668
PersonasdiscapacitadasenArgentinahttp://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
LISTADECORREOÚTIL:AccesoWeb http://es.groups.yahoo.com/group/accesoweb/
SEMINARIO IBEROAMERICANO SOBRE DISCAPACIDAD Y ACCESIBILIDAD EN LA REDSID@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
Respetando el diseño inclusivo al programar un sitio web
Muchas gracias
@martinszy@sebazelonka