Respetando el Diseño inclusivo al programar un sitio web

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


¿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


¿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


¿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


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


¿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


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


EJEMPLOS HTML


PROBLEMAS CON LA NAVEGACIÓN

Ejemplo de menu inaccesible


Ejemplo de menu accesible


FORMULARIOS

Ejemplo de formulario inaccesible


Ejemplo de formulario accesible


IMÁGENES

Ejemplo de imágen con problemas de accesibilidad

Ejemplo de imágen accesible


SEMÁNTICA

Ejemplo de títulos inaccesibles

Ejemplo de títulos accesibles


TEXTOS Y LINKS

Ejemplo de un texto inaccesible

Ejemplo de un texto pensado para el usuario


¿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


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?


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/


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


Esta presentación y todos los ejemplos, los podés encontrar en

www.sebastianzelonka.com.ar/mdi


Respetando el diseño inclusivo al programar un sitio web

Muchas gracias

@martinszy@sebazelonka

Respetando el Diseño inclusivo al programar un sitio web

Design

Transcript of Respetando el Diseño inclusivo al programar un sitio web