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