Este documento presenta los principios del diseño inclusivo de sitios web, incluyendo la importancia de hacerlos accesibles para todos los usuarios, cómo lograr la accesibilidad siguiendo estándares como WCAG, y cómo evitar problemas comunes como formularios y navegación no accesibles. También proporciona ejemplos de código HTML accesible y no accesible, y recursos adicionales para aprender sobre el tema.

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

2. 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

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 NECESITA
PORQUE EL CLIENTE LO PIDE
PORQUE ES MÁS RENTABLE
• Más clientes satisfechos
• SEO
Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

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 agregados
Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

5. ¿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

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/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

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 COMUNES
Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

8. ¿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

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

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

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

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

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

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

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

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

17. ¿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

18. ¿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 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-desarrolladores
Martin Szyszlican - Sebastian Zelonka | 28-10-10 | UTN

19. 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

20. 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/estadisti-
cas.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

21. 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

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