WAI
es el grupo de interés en materia de Accesibilidad Web constituido en el seno del W3C
WAI publica pautas en materia de accesibilidad Web:
Contenido de sitios WEB
Herramientas de autor
Agentes de usuario (Navegadores)
Estas pautas son consideradas en la Consideradas en la UE como normas ?de facto?
En esta charla nos centraremos en la primeras: Pautas de Accesibilidad al Contenido en la Web. Son un conjunto de recomendaciones técnicas para conseguir sitios Web Accesibles.
Pautas de Accesibilidad al Contenido en la Web (WCAG) 1.0
Pautas de Accesibilidad al Contenido en la Web (WCAG) 1.0
14 Pautas:
Permitir una transformación adecuada (1-11)
Hacer el contenido entendible y navegable (12-14)
Permitir una transformación adecuada (1-11)
Separación de presentación y contenido
Proporcionar textos equivalentes
Diseñar con independencia del dispositivo de navegación
En El Mundo pueden verse ejemplos de un texto alternativo mal puesto foto de la noticia
Imágenes complejas
Atributo longdesc de la etiqueta <image> permite enlazar una página con descripción más extensa. Prioridad 1
Código HTML
<img src="images/ quesoRespuestas.png" style="width:60%" alt="Gráfico de respuestas a la pregunta 5" longdesc="examples/ distribucionRespuestas.html"/>
Ejemplo: En El Mundo los textos alternativos son redundantes
Objetos HTML: applets, flash, SVG
Atributo title para descripción breve
Descripción más detallada en el contenido del mismo
Ejemplo con SVG
Código HTML
<object data="images/tux.svg"
type="image/svg+xml"
width="50%"
height="60%"
title="Tux: La mascota oficial de Linux">
<img src="images/tux.png" style="width:60%"
alt="Tux: La mascota oficial de Linux" />
</object>
Proporcionar alternativas al utilizar scripts por si el navegador no los soporta: etiqueta <noscript>. Prioridad 1
Se interpreta cuando el navegador no soporta scripts incrustados
Código HTML
var texto = "Este es un
molesto ejemplo javascrip"
var pos = 0
function dame_texto(){
pos = pos + 1
if (pos == texto.length){
pos = 0
return texto
}else{
return texto.substring(0,pos)
}
}
function anima_texto(){
xInnerHtml('textomovimiento',
dame_texto())
setTimeout("anima_texto()",
100)
}
...
<div id="textomovimiento"></div>
<noscript>
<p>Esto es lo que se interpreta si el navegador no soporta Javascript</p>
</noscript>
Los encabezados incorporan semántica al documento: su estructura. Prioridad 2
No utilizarlos para determinar la representación (cambiar el tamaño de la fuente)
Ejemplo
Curso HCI (título principal: H1)
Conceptos clave (sección 1: H2)
Directivas (sección 2: H2)
Directiva 1: Proporcionar alternativas para el contenido visual y sonoro (subsección 1: H3)
Aunque algunas personas no pueden usar imágenes, películas o sonidos que estén contenidas en un Sitio Web, pueden usar esas páginas si incluyen información equivalente al contenido visual o sonoro. Por ejemplo, el texto equivalente a una imagen de una flecha apuntando hacia arriba puede ser "Ir a la tabla de contenidos". Esto puede ser indicado de una manera sencilla utilizando el campo ALT del elemento IMG con HTML.
Directiva 2: No confiar sólo en el color (subsección 2: H3)
Si únicamente utilizamos el color para expresar el contenido de la información, las personas que no pueden diferenciar entre ciertos colores y los usuarios que accedan al sitio utilizando dispositivos que no muestren los colores o que sean de modo texto, no podrán recibir la información.
The most incomprensible thing in this world is that everything in it is comprehensible. Por Albert Einstein
Para citas cortas: etiqueta <q>
Las comillas pueden ser mostradas de diferentes formas si el navegador soporta internacionalización
El atributo lang puede ser utilizado por lectores de pantalla para una correcta pronunciación
Citas largas
Código Citas largas
<blockquote
cite="http://cvc.cervantes.es/
obref/quijote/parte1/parte01/
cap01/default.htm">
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo...</p>
</blockquote>
Pueden seleccionar los códigos de control apropiados para que se generen los caracteres correctos
Usuarios que utilizan sintetizadores de voz
Pueden escuchar los textos en una pronunciación adecuada
Usuarios que desconocen el idioma
Pueden utilizar software de traducción
Abreviaturas y acrónimos Prioridad 3
Abreviaturas: etiqueta <abbr>
Acrónimos: Etiqueta <acronym>
Utilizar atributo title para identificar la expresión completa
Ejemplo
Código Ejemplo
<p> Las páginas que demandan
conformidad con las
<acronym title="Web Content
Accessibility Guidelines
1.0" lang="en">WCAG</acronym>
1.0 del <abbr title="World Wide Web
Consortium" lang="en">W3C</abbr>
pueden incluir uno de los tres
íconos proporcionados,
según el nivel de conformidad
alcanzado. </p>
Las páginas que demandan conformidad con las
WCAG
1.0 del
W3C
pueden incluir uno de los tres íconos proporcionados,
según el nivel de conformidad alcanzado.
Las tablas deben ser utilizadas para representar datos de forma tabular
No utilizarlas para organizar la disposición (layout) de elementos de la página
Los lectores de pantalla tendrían problemas para interpretarlas
Tablas en HTML
<td>
Representa una celda
<th>
Representa una celda de encabezado
<tr>
Representa una fila (un conjunto de elementos <td> o <th>)
<table>
Representa la tabla (un conjunto de elmentos TR)
<caption>
Título (descripción breve) de la tabla
<thead>, <tbody>, <tfoot>
Permiten marcar la cabecera, cuerpo y pie de una tabla
Identificar los encabezados Prioridad 1
Suministrar un encabezado por cada fila y columna
Añaden la semántica de ?contenido? de la fila/columna
No usar encabezados para efectos de formateo (por ejemplo, para poner en negrita una celda)
Ejemplo
Código Ejemplo
<table summary="Hola esto es una tabla" border="1">
<caption>Título de la tabla breve</caption>
<thead>
<tr>
<td></td>
<th>Encabezado de la columna 1</th>
<th>Encabezado de la columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Encabezado de la fila 1</th>
<td>Columna 1 - Fila 1</td>
<td>Columna 2 - Fila 1</td>
</tr>
</tbody>
</table>
Navegador
Título de la tabla breve
Encabezado de la columna 1
Encabezado de la columna 2
Encabezado de la fila 1
Columna 1 - Fila 1
Columna 2 - Fila 1
Asociar celdas de datos con celdas de encabezados
La información contenida en una tabla representada en 2D puede ser comprendida de un vistazo
Los lectores de pantalla leen las tablas celda a celda
Si hay más de 2 niveles de filas o columnas se recomienda asociar los encabezados con las celdas de datos mediante etiquetas. Prioridad 1
Para las celdas de cabecera de las columnas utilizar el atributo id para asociarles un nombre
Desde cada celdas de datos especificar cual es su cabecera asociando al atributo headers el id de la cabecera correspondiente
Ejemplo
Código Ejemplo
<table>
<tr>
<th></th>
<th id="c1">Africa</th>
<th id="c2">América</th>
</tr>
<tr>
<th>Superficie (millones de km cuadrados)</th>
<td headers="c1">30</td>
<td headers="c2">41</td>
</tr>
<tr>
<th>Población (miles de habitantes)</th>
<td headers="c1">858.584</td>
<td headers="c2">853.245</td>
</tr>
</table>
Navegador
Africa
América
Superficie (millones de km cuadrados)
30
41
Población (miles de habitantes)
858.584
853.245
Proporcionar abreviaturas para los encabezados Prioridad 3
Un lector de pantalla leería para cada celda, el encabezado correspondiente a su columna
Es interesante proporcionar una abreviatura
Si el título es muy largo, el usuario no tendrá que escuchar la frase para cada celda
Ejemplo
<tr>
<th></th>
<th id="c1" abbr="superficie">superficie (millones de km cuadrados)</th>
<th id="c2" abbr="población">población (miles de habitantes)</th>
</tr>
Ejemplo de lector de pantallas leyendo una tabla (JAWS)
Ejemplo cuando no se usa un buen marcado
Ejemplo cuando se usa un marcado correcto
No usar tablas para enmaquetar Prioridad 2
Un lector de pantalla no puede discernir entre una tabla de datos y una tabla de disposición
El texto del vínculo tiene que tener significado suficiente cuando sea leído fuera de contexto (por sí mismo o como parte de una secuencia de vínculos). También debe ser conciso.
Ejemplo de lector de pantalla leyendo secuencias de clic here
Usar metadatos para añadir información semántica Prioridad 2
Se denominan metadatos porque son información acerca de los datos que contiene la página Web
Se incluyen en la cabecera de la página contenidos en la etiqueta <head>
<address>
Información del autor de la página
<link>
Metainformación en forma de enlaces Prioridad 3
<meta>
Metainformación en forma de atributos: nombre-valor
Actualmente están en estado de recomendación candidata
Estructura
Estructura en dos niveles:
Principios (Principles)
Pautas o Directrices (Guidelines)
Principios
Principios POUR: el contenido debe ser
Percibible
Operable
Entendible
Robusto
Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented; it can't be invisible to all of their senses.
Operable - User interface components and navigation must be operable by users. This means that users must be able to operate the interface; the interface can't require interaction that the user can not perform.
Understandable - Information and the operation of the user interface must be understandable by users. This means that users must be able to understand the information as well as the operation of the user interface; the content or operation cannot be beyond their understanding.
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance; as technologies and user agents evolve, the content should remain accessible.
Los informativos, como las técnicas, no requieren seguirlos. Ojo
How to Meet WCAG 2.0, previously called the "Quick Reference", is customizable list of WCAG 2.0 requirements ("success criteria") and techniques.
Techniques for WCAG 2.0 gives you specific details on how to develop accessible Web content, such as HTML code examples.
Understanding WCAG 2.0 has additional guidance on learning and implementing WCAG 2.0 for people who want to understand the guidelines and success criteria more thoroughly.
Mayor precisión
Principios (Principles)
Pautas o Directrices (Guidelines)
Criterios de éxito (Success Criteria) de niel A, AA, AAA
Nótese como en las WCAG ahora ya no se hace referencia a tecnologías concretas, todo es a nivel conceptual
Mayor flexibilidad
La definición normativa es a nivel conceptual, no tecnológico. Ejemplo: abreviaturas
Concepto de Tecnologías que dan soporte a la accesibilidad (accessibility-supported technologies)
Lista de tecnologías que permiten construir sitios accesibles (no necesariamente del W3C)
La puede definir la WAI, un Gobierno, una organización con intereses en accesibilidad...
An accessibility supported technology is a technology (HTML, CSS, etc.) that will work with assistive technologies (AT) and the accessibility features of browsers and other user agents. Only technologies (including features of the technologies), that are "accessibility supported" can be used to conform to WCAG 2.0 Success Criteria.
Criterios para que una tecnología sea una accessibility-supported technology