Agenda
- Ideas falsas
- Barreras
- Visión general del WAI
- Puntos de chequeo
- Conclusiones
- Bibliografía
Ideas falsas (1/2)
- No soy discapacitado, luego no me interesa
- WAI es para todos
- 20% de población con algún tipo de problema
- Las barreras afectan a varios dispositivos: (teléfonos móviles, PDA, TV digital, kioscos, sistemas de voz, ...)
- Las personas discapacitadas no pueden usar ordenadores
- Internet como un importante vehículo de integración
- Existe Hw + Sw especializado (Braille, voz, magnificadores, ...)
- Otras discapacidades temporales: conducción, brazo escayolado, ...
Ideas falsas (2/2)
- Aburrida versión alternativa sólo texto
- Discriminación (no todas las personas tienen los mismos problemas)
- Replicación innecesaria de esfuerzos y recursos
- Una versión sólo texto puede ser incluso menos accesible
- Accesibilidad y belleza con CSS no son incompatibles
- Especificar un diseño para cada tipo de usuario o dispositivo
- Diseño para CUALQUIER tipo de usuario
- Independencia del dispositivo
Visión
- Ceguera total → dispositivos Braille, transcripciones sonoras
- Dificultad en distinguir colores (daltonismo) → colores personalizados
- Visión reducida (miopía) → lente magnificadora, hoja de estilo personalizada con fuentes grandes
- Visión tipo túnel o sólo periférica (un agujero negro en el medio)
- Visión ocupada en otra actividad (conducción), pantallas reducidas, pantallas monocromo
Oído
- Sordera total
- Sordera parcial
- Entornos ruidosos
- Entornos silenciosos (biblioteca)
Discapacidades físicas
- Discapacidad motriz
- Teclado adaptado
- Discapacidad en el habla
- Sin ratón, con teclado distinto al habitual
Discapacidades cognitivas y neurológicas
- Dislexia, discalculia
- Desorden y déficit atencional
- Limitaciones en la memoria
- Fotosensibilidad
- Entorno con distracciones
Tecnología
- Navegador demasiado viejo
- Navegador demasiado nuevo
- Sistema operativo diferente
- Plug-ins no instalados
- Conexiones lentas
Independencia del dispositivo
Discapacidad como una función de la edad
Fuente: U.S. Census Bureau Report on Americans with Disabilities: 1994-1995 (August 1997).
Algunas barreras eliminables
- Fuentes configurables: imágenes no necesarias para representar texto con estilo, descargas más rápidas
- Navegadores de voz: leen la página sintetizando palabras e interactuando con sonidos
- Tamaños relativos: escalado adecuado para personas con visión reducida
- Independencia del dispositivo: amplio rango de dispositivos utilizables
- Estilos alternativos: estilos escogibles y redefinibles por el usuario
Visión general de WCAG 1.0
- 14 Pautas (alto nivel de abstracción)
- 65 Puntos de chequeo (bajo nivel de abstracción)
- 3 Prioridades
- Prioridad 1: Must
- Prioridad 2: Should
- Prioridad 3: May
Visión general de WCAG 1.0
Niveles de cumplimiento de los WCAG
| 1 | 2 | 3 |
 | OK | | |
 | OK | OK | |
 | OK | OK | OK |
Puntos de chequeo
- Muchos de ellos requieren chequeo manual, otros automatizables
- Abierto a interpretación subjetiva
- ¿Agrupación por pauta, prioridad, etiqueta, manual/automática ...?
- Un material pesado que requiere varias horas de estudio
Puntos de chequeo
- Prohibiciones
- Obligaciones
- Recomendaciones
Prohibiciones prioridad 1: color (1/7)
[2.1] Prohibido confiar semántica en el color 
Los preferidos se muestran en verde → ∅
Prohibiciones prioridad 1: dependencia del cliente (2/7)
[6.1] Prohibido confiar en contenido o posicionamiento dependiente del lado del cliente 
Marcado HTML degenerado para conseguir efectos presentacionales específicos → ∅
Prohibiciones prioridad 1: scripts necesarios (3/7)
[6.3] Prohibido scripts necesarios
<a href="javascript:loadUrl()">DEAD LINK</a> →
<a href="alternate.html" onclick="loadUrl(); return false" onkeypress="...">NON DEAD LINK</a> 
Prohibiciones prioridad 1: scripts necesarios (4/7)
[6.3] Prohibido scripts necesarios
document.write("<input type='submit' />") → ∅ 
Prohibiciones prioridad 1: scripts necesarios (5/7)
[6.3] Prohibido scripts necesarios
<select name="Books" onchange="jump()"> <option> ... </option> ... →
<select name="Books" onsubmit="check()"> <option> ... </option> ...
</select> <input type="submit" />
Prohibiciones prioridad 1: destellos (6/7)
[7.1] Prohibido destellos en la pantalla 
Molestos también para los no discapacitados
Prohibiciones prioridad 2: contraste (1/10)
[2.2] No usar imágenes con bajos contrastes
Prohibiciones prioridad 2: HTML anquilosado (2/10)
[3.3] No usar HTML anquilosado con equivalente CSS 
HTML anquilosado y CSS equivalente
| HTML anquilosado | Correcto |
|---|
| <font> | font-family, font-size, ... |
| or <blockquote> | text-indent, margin |
| H E L L O | letter-spacing |
| <big>H</big>ello | :first-letter |
| <center> | text-align |
| dots.gif | border-style:dotted |
| px.gif | margin, padding, ... |
| <table> | border |
Prohibiciones prioridad 2: tablas (3/10)
- [5.3] Prohibidas tablas mal serializables
Tablas de sólo presentación → ∅
- [5.4] Prohibidas las cabeceras de tablas en tablas de sólo presentación
Tablas de sólo presentación → ∅ (sí, otra vez)
Prohibiciones prioridad 2: parpadeo (4/10)
[7.2] Prohibido contenido parpadeante 
blink → CSS → ∅ (o detenible)
Prohibiciones prioridad 2: movimiento (5/10)
[7.3] Prohibidos movimientos del contenido 
(marquee, efectos DHTML, cambios inesperados de tamaño de ventanas, deshabilitación de scrolls o cambios de tamaño por el usuario ...) → ∅ (o detenibles)
Prohibiciones prioridad 2: eventos (6/10)
[6.4] No usar manejadores de eventos dependientes del dispositivo
- Independientes del dispositivo preferidos
- @onfocus
- @onblur
- @onselect
- Dependientes del dispositivo combinados
- @onmousedown ↔ @onkeydown
- @onmouseup ↔ @onkeyup
- @onclick ↔ @onkeypress
- No estándares rechazados
- @onpaste
- @onpropertychange
- @onresizestart
- @onselectstart
Prohibiciones prioridad 2: refrescos (7/10)
- [7.4] Prohibido auto-refresco ¬ ∃ meta/@http-equiv
<meta http-equiv="refresh" content="60" />
- [7.5] Prohibida auto-redirección ¬ ∃ meta/@http-equiv
<meta http-equiv="refresh" content="5; http://www.acme.com/newpage" />
Prohibiciones prioridad 2: ventanas emergentes (8/10)
[10.1] Prohibida la aparición de nuevas ventanas no solicitadas¬ ∃ a/@target, ¬ ∃ window.open() 
<a href="new.htm" target="_blank">Popup</a> → ¡Que el usuario decida!
Prohibiciones prioridad 2: etiquetas de formularios (9/10)
[10.2] Prohibidas las etiquetas confusas en los formularios (∀ ff ∈ (input|select|textarea) $ff → label como una dependencia funcional) 
Una etiqueta para cada control y un control para cada etiqueta
Prohibiciones prioridad 2: HTML anquilosado (10/10)
[11.2] Prohibido HTML anquilosado
HTML anquilosado y sus redefiniciones
| Anquilosado | Redefinición |
|---|
| <b>,<i> | <strong>, <em> |
| <applet> | <object> |
| <layer>, <ilayer> | <iframe> |
| <isindex> | <input> |
| <dir>, <xmp> | ∅ |
Prohibiciones prioridad 3
[2.2a] Prohibidos textos con bajos contrastes 
Defina inseparablemente los colores del texto y del fondo → ¿blanco sobre blanco?, ¿negro sobre negro?
Obligaciones prioridad 1: imágenes (1/11)
[1.1] Alternativa textual para las imágenes (img/@alt) 
<img src="pic.gif" alt="Texto alternativo" title="Texto complementario" />
Obligaciones prioridad 1: multimedia (2/11)
[1.1b] Texto alternativo para otros elementos multimedia (vídeo, audio, applets, plugins, scripts, ...) noscript, object/*
Que sea una alternativa real (imágenes en lugar de vídeo, transcripción de diálogos, narraciones, aplicaciones alternativas en el lado del servidor, ...)
Obligaciones prioridad 1: marcos (3/11)
[1.1e] Alternativa para los marcos (noframes) 
- <noframes>Your browser does not support frames!</noframes> → ∅
- Marcos → ∅
Obligaciones prioridad 1: mapas de servidor (5/11)
[1.2] Enlaces alternativos para mapas de imagen de servidor
Algunos dispositivos pueden tener problemas en especificar coordenadas
Obligaciones prioridad 1: temporización (6/11)
[1.4] Sincronización de eventos temporizados 
SMIL, vídeos, scripts, audio, ...
Obligaciones prioridad 1: cambio de idioma (7/11)
[4.1] Especificación de idioma (@xml:lang, @hreflang) 
- <q xml:lang="fr">Bon jour</q>
- <a href="italian.html" hreflang="it">Versión en italiano</a>
Obligaciones prioridad 1: cabeceras de tablas (8/11)
[5.1] Cabeceras en tablas (th)
No usarlas como celdas regulares de datos → <th></th> ≠ <td><strong></strong></td>
Obligaciones prioridad 1: actualización de alternativas (9/11)
[6.2] Actualización de alternativas de contenidos dinámicos
<noscript>Your browser does not support JavaScript!</noscript> →
<noscript><a href="alternate.html">Server side alternate</a></noscript>
Obligaciones prioridad 1: multimedia (10/11)
[8.1] Los scripts, plugins y applets importantes deben ser asimismo accesibles 
Obligaciones prioridad 1: versión alternativa (11/11)
[11.4] Mantener una versión alternativa accesible 
¡¡Como último recurso!!
Obligaciones prioridad 2: arte ASCII, cabeceras (2/12)
- [1.1d] Descripción alternativa para arte ASCII
- [3.5] Usar adecuadamente las cabeceras (h1 ... h6)
Pueden ser útiles para saltar secciones enteras
Obligaciones prioridad 2: listas, citas, ... (3/12)
- [3.6] Usar las listas con propiedad
- [3.7] Usar citaciones (q, blockquote) adecuadamente
- [6.5] Proporcionar alternativa a contenidos dinámicos no accesibles
Obligaciones prioridad 2: multimedia (4/12)
[8.1a] Los scripts plugins y applets no importantes deben ser asimismo accesibles
Los importantes en 8.1, prioridad 1
Obligaciones prioridad 2: formatos estándares (5/12)
[11.1] Usar las tecnologías del W3C 
- Incluso algunas que no estén contempladas por los navegadores actuales. Pensar en el futuro
- Los navegadores deben adaptarse a los estándares
- Los documentos no deben adaptarse a los navegadores
Obligaciones prioridad 2: enlaces (7/12)
[13.1] Enlaces claros y únicos (∀ i ∈ (a|area) ($i/text(), $i/@title) → $i/@href como una dependencia funcional) 
<a href="page1.html">Read more</a> ... <a href="page2.html">Read more</a>
Obligaciones prioridad 2: cabecera (8/12)
[13.2] Metadatos para añadir semántica 
Obligaciones prioridad 2: enlaces de cabecera (9/12)
[13.2a] Enlaces de contextualización en la cabecera (head/link/@rel)
<head>
<link rel="prev" href="1.htm" />
<link rel="contents" href="0.htm" />
<link rel="next" href="3.htm" />
</head>
Obligaciones prioridad 2: enlaces de cabecera (10/12)
Obligaciones prioridad 2: enlaces de cabecera (11/12)
Obligaciones prioridad 2: orientación (12/12)
- [13.3] Índices, tablas de contenidos, mapas del sitio Web, ...
- [13.4] Patrones de navegación consistentes
- Orientación (no perderse) → barras de navegación, tablas de contenido, ...
- Botón Back deshabilitado → ∅
- Consistencia
Obligaciones prioridad 3: acrónimos y abreviaturas (2/6)
[4.2] Declarar la explicación detallada de acrónimos y abreviaturas en su primera ocurrencia (acronym/@title, abbr/@title) 
Obligaciones prioridad 3: idioma del documento (3/6)
[4.3] Declarar idioma del documento (html/@xml:lang)
Obligaciones prioridad 3: tablas (4/6)
[5.5] Resúmenes de las tablas (table/caption, table/@summary)
<table summary="Explicación sobre la tabla, el significado de sus columnas y filas ..."> <caption>...
Obligaciones prioridad 3: controles editables (5/6)
[10.4] Mantener caracteres visibles en los controles editables
Obligaciones prioridad 3: texto entre enlaces (6/6)
[10.5] Caracteres no enlazados e imprimibles entre enlaces
[<a href="1.html">1</a>] [<a href="2.html">2</a>] [<a href="3.html">3</a>]
Recomendaciones prioridad 1: descripciones largas (1/3)
[1.1a] Descripciones largas para imágenes (img/@longdesc)
Si img/@alt no es suficiente
<img src="pic.gif" alt="Texto alternativo" longdesc="description.html" />
Recomendaciones prioridad 1: descripciones largas (2/3)
[12.2] Descripción larga para los marcos (frame/@longdesc)
Recomendaciones prioridad 1: tablas (3/3)
[5.2] En tablas, asociaciones entre celdas de datos y de cabeceras (th/@axis, th/@scope, td/@headers, thead, tfoot, tbody, col, colgroup)
Un consejo útil: leer la tabla en voz alta como quisiéramos que nos la leyeran por teléfono 
Recomendaciones prioridad 2: matemáticas y tamaños (1/4)
[3.1] Fórmulas matemáticas:
Entidades HTML, MathML o TeX o otros equivalentes basados en texto mejor que imágenes
Recomendaciones prioridad 2: tamaños (2/4)
[3.4] Unidades de medida 
absolutas (px, mm, cm, pt, ...) → relativas (%, em, ex)
Recomendaciones prioridad 2: consideraciones "mejor que" (3/4)
- [1.1c] Imágenes mejor que arte ASCII
- [9.1] Mapas de imagen de cliente mejor que mapas de imagen de servidor
Recomendaciones prioridad 2: grupos (4/4)
[12.3] Agrupar contenidos (optgroup, fieldset, p, ...)
Agrupar contenidos en partes manejables
Recomendaciones prioridad 3: orden de tabulación (2/9)
[9.4] Orden de tabulación lógico entre controles (@tabindex)
- La mejor tabulación suele ser la de por defecto: @tabindex → ∅
- Los botones de envío → al final del formulario
Recomendaciones prioridad 3: saltos intra-documento (4/9)
[13.6] Saltar grupos de enlaces
<div title="Navigation Bar"> <span class="skip">
[<a href="#how">Saltar barra de navegación</a>] </span>
[<a href="home.html">Principal</a>]
[<a href="sitemap.html">Mapa del sitio</a>] </div>
<h1
id="how">Formas de usar este Web</h1>
Recomendaciones prioridad 3: varios (5/9)
Recomendaciones prioridad 3: varios (6/9)
- [13.7] Si se proporciona funcionalidad de búsqueda, permitir búsquedas complejas
find all documents that contain WORD 1 and WORD 2 but not PHRASE 3 within 100 words of WORD 4 in documents created between DATE 1 and DATE 2
- [13.8] Front loading
Recomendaciones prioridad 3: varios (7/9)
Recomendaciones prioridad 3: consistencia (8/9)
[14.3] Mantener estilos consistentes
Recomendaciones prioridad 3: estilos (9/9)
- CSS externo + @class mejor que @style embebido
- CSS embebido: los mismos errores (redundancia, inconsistencias, ...) que hicimos con HTML reescritos en otra tecnología
- CSS embebido: conflictos con las hojas CSS del usuario (no las del autor)
¿Otras definidas de forma repetida?
- [1.3] Descripciones auditivas
- [9.2] Elementos con interfaces independientes del dispositivo
- [9.3] Manejadores de eventos lógicos
- [10.3] Tablas linearizables
Conclusiones
- WYSIWYG frente a WYSIWYM
- Viejo: Documentos ad-hoc para navegadores específicos que no son funcionales con otros navegadores
- Nuevo: Documentos flexibles que pueden ser mostrados de muchas formas distintas y en cualquier dispositivo (pensar en los que puedan aparecer en el futuro)
- Documentos líquidos: sin tablas de maquetación y con posibilidad de ser mostrados en cualquier dispositivo
- Diseño de documentos centrados en navegadores específicos (barreras) frente a Diseño centrado en el documento mismo (independencia del dispositivo)
- Presentación (CSS) separada del contenido (HTML)
Conclusiones
- Beneficios:
- Mantenimiento del sitio Web site (consistencia)
- Audiencia amplia (discapacitados, conductores de vehículos, dispositivos inalámbricos, ...)
- Transformación de documentos en otros formatos
- Valor semántico añadido (robots, Semantic Web, ...)
- Cumplimiento de la ley
- Muchos puntos de chequeo dicen lo mismo:
¡Use HTML con propiedad!
- El AA de hoy puede ser el A de mañana (evolución)
- WCAG 2.0 en preparación (WD)
¿Cómo hacer que un sitio Web existente sea conforme al WAI?
- Validar sus documentos frente a una gramática (DTD, Schema, ...). Cuanto más estricta, mejor.
- Analizar la estructura del documento
- Separar contenido relevante del marcado orientado a la presentación (requiere semántica)
- Reintroducir el contenido relevante dentro de un marcado adecuado
- Traducir reglas de presentación a un CSS externo
- ¡¡Varias horas para una única página HTML!!
- ¡Puede no verse igual que antes!
- Evaluar: navegadores, analizadores, gente ...
Evaluadores de accesibilidad
- Reglas automáticas
- No pueden certificar que sí se cumple
- Sí pueden certificar que no se cumple
- Incompletas (muchas condiciones sin cubrir)
- Reglas objetivas y reglas subjetivas
- Reglas semiautomáticas y manuales
- Costosos (requieren intervención humana)
- Bobby, Hera, Taw, Torquemada, WAEX ...
- Diferentes resultados posibles para una misma página
- Otras herramientas de reparación, transformación, presentación, ...
| 
| 
⊃ 
T ⊃ 
