Pautas de Acesibilidad al Contenido Web

W3C: Web Accessibility Initiative (WAI)

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:

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)

Contenido de las pautas

Por cada pauta:

Las pautas están disponibles en:

Prioridades de los puntos de verificación

Prioridad 1

El desarrollador tiene que satisfacer este punto de verificación. Sino un grupo de usuarios encontrará imposible acceder

Prioridad 2

El desarrollador debe satisfacer este punto de verificación. Sino un grupo de usuarios encontrará dificultades al acceder

Prioridad 3

El desarrollador puede satisfacer este punto de verificación. Sino un grupo de usuarios encontrará alguna dificultad al acceder

Ejemplo: Pauta número 2

[1] Proporcionar alternativas equivalentes para el contenido visual y auditivo

Texto equivalente para contenido no textual:

Imágenes sencillas

Atributo alt de la etiqueta <image> para descripciones cortas. Prioridad 1

Código HTML

							
	<img src="images/logo- accesibilidad.png" alt="Logo de accesibilidad: dibujo de una silueta que representa una persona en silla de ruedas."/>

							
						

En imágenes que contengan hipervínculos alt describe el destino del enlace

Código HTML

							
	<a href="home.html"><img src="images/home.gif" alt="Inicio"/></a>					
							

						

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

						

En la dirección indicada en por longdesc se encuentra la descripción detallada.

Mapas de imágenes

Se deben suministrar enlaces redundantes. Prioridad 1

Mapa de continentes

Imágenes decorativas

Ejemplo de imagen con texto alternativo redudante, dado que ya tiene una desripción asociada

Ejemplo: En El Mundo los textos alternativos son redundantes

Objetos HTML: applets, flash, SVG

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>			
							
						

Emoticons

Código Título del ejemplo

							
	<p>¿De acuerdo? <abbr title="Sonrisa con guiño">;-)</abbr> </p>

							
						

Navegador

¿De acuerdo? ;-)

Scripts

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>
							

						

Navegador

[2] No confiar sólo en el color

Problemas:

Por ello

Lo transmitido con color debe poder ser accedido sin él. Prioridad 1

Ejemplo incorrecto

¿Cuántas calzadas tiene una vía rápida?

  1. Una sola, utilizable en los dos sentidos
  2. Dos, con un sentido para cada calzada
  3. Dos o más

Ejemplo correcto

¿Cuántas calzadas tiene una vía rápida?

  1. Una sola, utilizable en los dos sentidos
  2. Dos, con un sentido para cada calzada
  3. Dos o más

La respuesta correcta es la a

Esto no significa no utilizar el color como apoyo para mostrar datos. Pero no puede ser el único modo.

Contrastes adecuados

¿A que soy incómodo de leer?

Hombre pintando. Ejemplo de mal contraste de color. Hombre pintando. Ejemplo de buen contraste de color.

Fuente: SIDAR

[3] Utilizar etiquetas HTML y hojas de estilo apropiadamente

Uso de etiquetas en vez de imágenes para transmitir información Prioridad 2

El texto puede ser transformado

Utilizar hojas de estilo para controlar presentación. Prioridad 2

Código Título del ejemplo

							
	<div
		style="text-align: center; font: caption; width: 200px; padding: 2px; color: #FFFFFF; background-color: #FF0000; border: 3px outset #990000">
		Página de inicio
	</div>						
							
						

Navegador

Página de inicio

¿Son feas las CSS?

Utilizar unidades de tamaño relativas Prioridad 2

Unidades relativas
medida en relación a otra medida
em
al elemento padre (tanto por 1)
ex
a la altura de la ?x? del elemento padre
porcentaje
al tamaño del elemento padre (%)
Unidades absolutas predefinidas
xx-small, x-small, small, medium, large, x-large, xx-large
Más pequeñas o más grandes que el elemento padre
larger, smaller
Unidades absolutas
in
pulgadas
cm
centímetros
mm
milímetros
pt
puntos (1pt = 1/72 pulgadas)
pc
picas (1pc =12 puntos)
px
pixeles

Lo mejor: utilizar unidades de tamaño relativas

Utilizar unidades absolutas sólo cuando son aconsejables para el dispositivo de destino. Ejemplo: impresora

Utilizar etiquetas de encabezado

Niveles de encabezado HTML

Código Niveles de encabezado

							
	<h1>Encabezado 1</h1>
	<h2>Encabezado 2</h2>

	<h3>Encabezado 3</h3>
	<h4>Encabezado 4</h4>
	<h5>Encabezado 5</h5>
	<h6>Encabezado 6</h6>			
							

						

Navegador

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5
Encabezado 6

Utilizar etiquetas de encabezado (II)

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.

Etiquetar correctamente las listas Prioridad 2

HTML proporciona 3 etiquetas para listas

<dl>
Listas de definiciones
<ul>
Listas sin ordenar
<ol>
Listas ordenadas (numeradas)

No utilizarlos para conseguir efectos de composición

Utilizar cuando sea adecuada su semántica

Por ejemplo, lista de enlaces en una barra de navegación

Etiquetar correctamente las listas (II)

Listas sin ordenar

Código Listas sin ordenar

							

	<ul>
	  <li>Elemento 1</li>
	  <li>Elemento 2</li>
	  <li>Elemento 3</li>

	</ul>						
							
						

Navegador

  • Elemento 1
  • Elemento 2
  • Elemento 3

Listas ordenadas

Código Listas ordenadas

							
	<ol>
	  <li>Elemento 1</li>
	  <li>Elemento 2</li>
	  <li>Elemento 3 </li>

	</ol>						
							
						

Navegador

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Listas de definiciones

Código Listas de definiciones

							
	<dl>
	  <dt>D1</dt> <dd>Definicion 1</dd>
	  <dt>D2</dt> <dd>Definicion 2</dd>

	  <dt>D3</dt> <dd>Definicion 3</dd>
	</dl>			
							
						

Navegador

D1
Definicion 1
D2
Definicion 2
D3
Definicion 3

Etiquetar correctamente las citas Prioridad 2

Citas cortas

Código Citas cortas

							
	<p>

	  <q lang="en">The most incomprensible thing  in this world is that everything in it is comprehensible.</q> Por Albert Einstein
	</p>					
							
						

Navegador

The most incomprensible thing in this world is that everything in it is comprehensible. Por Albert Einstein

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>			
						
						

Navegador

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo...

Para citas largas: etiqueta <blockquote>

[4] Aclarar el lenguaje natural utilizado

[4] Aclarar el lenguaje natural utilizado

Si se etiqueta el lenguaje utilizado, los dispositivos de ayuda para discapacitados pueden interpretarlo correctamente

Se debe identificar:

Identificar el idioma principal de la página Prioridad 3

Utilizar el atributo lang en la etiqueta <html>.

					
	<html lang="es">
	  <head></head>
	  <body></body>
	</html>

					
				

Identificar los cambios de idioma Prioridad 1

El atributo lang permite identificar el idioma utilizado cuando se usan varios idiomas

					
	<p lang="en">This paragraph is in English.</p>
	<p lang="fr">Ce paragraphe est en français.</p>
	<p lang="es">Este párrafo está en español.</p>

					
				

El atributo hreflang de la etiqueta <a> permite indicar cambio de idioma en el destino de los enlaces

Cada idioma se identifica con código de dos letras:

Alemán
de
Español
es
Francés
fr
Inglés
en
Italiano
it

Lista con códigos de idioma de ISO

Ventajas de cara a:

Abreviaturas y acrónimos Prioridad 3

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>						
							
						

Navegador

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.

Ejemplo para ver la utilidad de este marcado

[5] Crear tablas que se transformen adecuadamente

Las tablas deben ser utilizadas para representar datos de forma tabular

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

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

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

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

Ejemplo

Comparar:

Comparar la experiencia visitando anteriores enlaces con navegador modo texto

Proporcionar resúmenes de las tablas Prioridad 3

Utilizar la propiedad summary de la etiqueta <table>

Ejemplo


					
	<table summary="Esta tabla muestra la relación entre los paises europeos y el crecimiento econ&oacute;mico desde 1997 hasta 2003">

	</table>
					
				

[6] Asegurar que las páginas que incluyen nuevas tecnologías se transformen adecuadamente

Asegurar que las páginas que incluyen nuevas tecnologías se transformen adecuadamente

Ejemplo

Comparar:

Asegurar que el contenido dinámico es accesible o proporcionar una alternativa

Ejemplo

					
	<frameset rows="20%,80%" title="Página de marcos">

	  <frame name="galeria" src="../images/paleta.gif" 
	    title="Galería de imágenes">
	  <frame name="principal" src="contenidos.htm" 
	    title="Página principal">

	  <noframes>
	    <body>
	      <h1>Título página principal</h1>
	      <ul>
	        <li><a href="imagenes.htm">Imagenes</a></li>

	        <li><a href="contenidos.htm">Contenidos</a></li>
	      </ul>
	    </body>
	  </noframes>

	</frameset>  		
					
				

Antiejemplo: cómo no usar noframes

Las páginas han de ser accesibles cuando los elementos de programación estén desactivados Prioridad 1

Scripts y applets pueden

Si al desconectarlos, la página deja de ser utilizable:

Para scripts
  • Proporcionar una alternativa mediante la etiqueta <noscript>
  • Utilizar scripts en el lado del servidor en lugar de en el cliente
  • Proporcionar una página accesible alternativa
Para applets
  • Proporcionar una página accesible alternativa

Ejemplo de página que queda inutilizable sin Javascript

Asegurar que los manejadores de eventos en scripts y applets son independientes del dispositivo de entrada Prioridad 2

Ejemplo

Código Ejemplo

						
	<button name="boton" type="button"
	    onmousedown="mensaje()" onkeydown="mensaje()">

	  Mensaje 
	</button>

	<script type="text/javascript">
	  function mensaje() { 
	  alert ("¡Hagamos páginas acccesibles!") 
	  }
	</script>
	<noscript>

	  <p>¡Hagamos páginas accesibles!</p>
	</noscript>  					
						
					

Navegador

[7] Asegurar al usuario el control del contenido que cambia con el tiempo

[7] Asegurar al usuario el control del contenido que cambia con el tiempo

Los puntos de verificación se presentan bajo la denominación hasta que las aplicaciones de usuario permitan

Evitar el parpadeo

Evitar el movimiento en las páginas Prioridad 2

Ejemplo de un molesto movimiento

No crear páginas que periódicamente se autorefresquen Prioridad 2

El refresco automático puede lograrse en HTML a través del elemento <meta> siendo sus atributos:

http-equiv
"refresh"
content
Número de segundos para cada refresco

Ejemplo

					
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta http-equiv="refresh" content="2"/>					
					

				

Recomendación

No se puede adivinar cuanto tiempo necesitará el usuario para entender la página. Mejor

Ejemplo de refresco automático que no deja casi tiempo a leer contenido

No crear páginas que se redireccionen automáticamente Prioridad 2

La redirección automática puede lograrse en HTML a través del elemento <meta> siendo sus atributos:

http-equiv
"refresh"
content
número de segundos para la redirección ?;? dirección destino

Ejemplo

					
	<meta http-equiv="refresh" content="5; http://www.pagina2.html"/>

					
				

Recomendación

Desorienta al usuario. Mejor:

[8] Garantizar la accesibilidad a las interfaces de usuario incrustadas

[8] Garantizar la accesibilidad a las interfaces de usuario incrustadas

Ejemplo de página en flash con alternativa accesible

[9] Diseñar para la independencia del dispositivo de entrada

[9] Diseñar para la independencia del dispositivo de entrada

Crear un orden lógico de tabulación Prioridad 3

Ejemplo

Código Ejemplo

							
	<a href="\begin{itemize}
		\item  
	\end{itemize}

	links.html" tabindex="5">1</a> - 

	<a href="links.html" tabindex="7">3</a><br/> 
	<a href="links.html" tabindex="6">2</a>  - 

	<a href="links.html" tabindex="8">4</a> 						
							
						

Proporcionar atajos de teclado Prioridad 3

Es posible definir atajos para los elementos de la página mediante el atributo accesskey aplicable sobre:

					
	<a href="contenidos.html" accesskey="T">Tabla de contenidos</a>

					
				

Ejemplo de página que ofrece atajos de teclado

Artículo que discute necesidad de utilizar atajos y problemas con atajos existentes en el navegador

En la página puesta de ejemplo probar la combinación de teclas ALT + d, que en Firefox lleva el control a la barra de direcciones.

[10] Utilizar soluciones provisionales

[10] Utilizar soluciones provisionales

Deben utilizarse soluciones provisionales hasta que las aplicaciones de usuario no permitan controlar adecuadamente:

Ventajas emergentes

Evitar la aparición de ventanas emergentes sin avisar al usuario Prioridad 2

Ejemplo

Galería de imágenes (nueva ventana)

Asociar etiquetas a elementos

Ejemplo

Código Ejemplo

							
	<label>Nombre: 
	   <input type="text" id="nom"/>
	</label>

	<label
	  for="controlNombre">Nombre:

	</label>
	<input type="text" id="controlNombre"/>						
							
						

Separar enlaces adyacentes Prioridad 3

Un ejemplo en la web del W3C

[11] Utilizar tecnologías y directrices de la W3C

[11] Utilizar tecnologías y directrices de la W3C

Evitar usar elementos obsoletos de las tecnologías W3C Prioridad 2

Ejemplo etiqueta HTML <font>. Utilizar estilos CSS

¿Tan obvio que no hay que recordarlo?

Cuando la creación de una página accesible es imposible proporcionar alternativa Prioridad 1

Ejemplos

[12] Proporcionar información sobre el contexto

[12] Proporcionar información sobre el contexto

Agrupar bloques de información Prioridad 2

[13] Proporcionar mecanismos de navegación claros

[13] Proporcionar mecanismos de navegación claros

Identificar el objetivo de cada vínculo Prioridad 2

Ejemplo

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

Proporcionar información sobre la estructura del sitio

Si el sitio tiene cierta complejidad, se debe proporcionar una tabla de contenidos o un mapa del sitio Prioridad 2

Ejemplo: Seguridad Social

Mecanismos de navegación

Agrupar los enlaces relacionados Prioridad 3

Ejemplo de Web que usa enlaces para saltar barras de navegación

Probar a visitar con navegador en modo texto el ejemplo

Colocar información distintiva al comienzo de los bloques Prioridad 3

Un ejemplo negativo: los titulares de barrapunto

[14] Asegurarse que los documentos son claros y sencillos

Utilizar el lenguaje más claro y sencillo apropiado para nuestro sitio Prioridad 1

Recomendaciones

Ejemplo: Gmail

Usar un estilo de presentación consistente Prioridad 3

Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.0

Motivación

Actualmente están en estado de recomendación candidata

Estructura

Estructura en dos niveles:

Principios

Principios POUR: el contenido debe ser

Documentos

Normativos
WCAG 2.0
Informativos

Los informativos, como las técnicas, no requieren seguirlos. Ojo

Mayor precisión

Esquema de los cotenidos de los documentos de accesibilidad: TODO

Algunos ejemplos

Nótese como en las WCAG ahora ya no se hace referencia a tecnologías concretas, todo es a nivel conceptual

Mayor flexibilidad

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

Los recoge las WCAG 2.0

Se permiten otro tipo de tecnologías siempre que el contenido siga siendo usable sin ellas

Definición en glosario de las WCAG 2

Sustituyen lo antiguo: hasta que las tecnologías de usuario soporten...