Introducción a la accesibilidad web - RUA: Principal · 2016-04-28 · Introducción a la...

Introducción a la accesibilidad web

Sergio Luján Mora

Profesor visitante


PAUTAS DE ACCESIBILIDAD AL CONTENIDO WEB 1.0 PASO A PASO


Contenido

• Imágenes

• Colores

• Estructura

• Presentación

• Idioma

• Enlaces

• Tablas

• Formularios


Imágenes

• Pauta 1: Proporcione alternativas equivalentes para el contenido visual y auditivo – Proporcione un contenido que, presentado al usuario,

cumpla esencialmente la misma función o propósito que el contenido visual o auditivo.

– Si bien algunas personas no pueden utilizar imágenes, películas, sonidos, applets, etc directamente, sí pueden utilizar páginas que incluyen información equivalente a los contenidos visuales o auditivos. La información equivalente debe cumplir la misma finalidad que los contenidos visuales o auditivos. Así un texto equivalente para la imagen de una flecha ascendente que vincule con una tabla de contenidos, podría ser "Ir a tabla de contenidos". En algunos casos, un equivalente debería describir la apariencia del contenido visual (Por ejemplo, para tablas complejas, carteles o diagramas) o el sonido del contenido auditivo (Por ejemplo, para los ejemplos sonoros usados en educación).

– …


Imágenes • Puntos de verificación: • 1.1 Proporcione un texto equivalente para todo elemento no textual

(Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1]

– Por ejemplo, en HTML: • Utilice "alt" para los elementos IMG, INPUT y APPLET o proporcione texto

equivalente en el contenido de los elementos OBJECT Y APPLET. • Para contenidos complejos (Por ejemplo, las gráficas) en los que el texto del

atributo "alt" no es suficiente, proporcione una descripción adicional usando, por ejemplo "longdesc" con IMG o FRAME, un enlace dentro de un elemento OBJECT o un enlace descriptivo en el documento.

• Para mapas de imagen, use el atributo "alt" con AREA o el elemento MAP con elementos A (y otro texto) como contenido.

– Consultar también punto de verificación 9.1 y punto de verificación 13.10.


Imágenes

• No basta con poner un texto cualquiera, hay muchas formas de hacerlo

• Hay que pensar qué se quiere poner y para qué

• El texto alternativo no se emplea para crear un “tool tip”: el texto alternativo no tiene que proporcionar información adicional

– ¿Qué atributo se emplea para eso?


Imágenes

1. Texto alternativo para una imagen sencilla

2. Texto alternativo para imagen con enlace

3. Texto alternativo para imagen compleja

4. Texto alternativo para una animación

5. Textos o símbolos en imágenes

6. Texto para una imagen decorativa

<img src="casa.gif" alt=“Dibujo de una casa" />

<a href="inicio.htm"><img src="logo.gif" alt="Inicio" /></a>

<img src="grafico.gif" longdesc="grafico.html" alt="Gráfico

de datos demográficos por edades" />

<img src="faro.gif" alt="Animación: icono de un faro que se

enciende y se apaga" />

<img src="logo_grande.gif" alt="Diputación de alicante" />

<img src="cenefa.gif" alt="" />


Imágenes

• ¿Longitud del texto alternativo?

– 50 caracteres: • Guidelines on alt texts in img elements

– 80 caracteres: • Web Accessibility Evaluation Curriculum

– >7 y <81 caracteres: • Alternative Text Quality

– 100 caracteres: • HTML Test Suite for WCAG 2.0. Test 3 - Image Alt text is

short.


http://www.cs.tut.fi/~jkorpela/html/alt.html


Imágenes

• 1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. [Prioridad 1] – 9.1 Proporcione mapas de imagen controlados por el cliente

en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.

– 1.5 Uso de los mapas de imagen del cliente


Imágenes

• 1.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la pista visual de una presentación multimedia [Prioridad 1] – Sincronice la descripción auditiva con la banda sonora como

en el punto de verificación 1.4. – Consultar también punto de verificación 1.1 para información

sobre textos equivalentes para el contenido visual.


Imágenes

• 1.4 Para toda presentación multimedia tempodependiente (Por ejemplo, una película o animación) sincronice alternativas equivalentes (Por ejemplo, subtítulos o descripciones de la banda visual) con la presentación. [Prioridad 1]

• 1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente. [Prioridad 3]

– Consultar también punto de verificación 1.2 y punto de verificación 9.1.


Imágenes

<img src="planets.gif" width="145"

height="126" alt="Planets"

usemap="#planetmap" />

<map name="planetmap">

<area shape="rect" coords="0,0,82,126"

href="sun.htm" alt="Sun" />

<area shape="circle" coords="90,58,3"

href="mercur.htm" alt="Mercury" />

<area shape="circle" coords="124,58,8"

href="venus.htm" alt="Venus" />

</map>


Colores

• 2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores [Prioridad 1]

• ¿Por qué?


Colores

• Si emplea el color para proporcionar algún tipo de información, que también esté disponible con un método alternativo


Colores

• 2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para texto].


¿Se pueden emplear diferentes

combinaciones de colores en

un mismo sitiio web?


Estructura

• 3.2 Cree documentos que estén validados por las gramáticas formales publicadas [Prioridad 2]

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1" />


Estructura

• 3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2]

• 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2]

<h1>UNA PÁGINA DE PRUEBA</h1>

<h2>Sección 1</h2>

<h2>Sección 2</h2>


Estructura

• 3.6 Marque correctamente las listas y los ítems de las listas. [Prioridad 2]

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ul>

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ol>


Estructura

• ¿Y si queremos cambiar el diseño de la lista?

• Cambia el elemento gráfico: list-style-type: disc | circle | square | …

• Utiliza una imagen: list-style-image: url(imagen);

• Muestra los elementos en una línea: list-style-type: none;

display: inline;


Estructura

• 3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías. [Prioridad 2] – Por ejemplo en HTML, utilice los elementos <q> y <blockquote> para marcar citas cortas y largas, respectivamente.


Presentación

• 3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2]

• 14.3 Cree un estilo de presentación que sea coherente para todas las páginas. [Prioridad 3]

<link rel="stylesheet" type="text/css"

href="estilo01.css" />

body {

background-color: #ffffff;

color: #000000;

}


Presentación

• 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2]

h1 {

font-size: 1.4em;

}

h2 {

font-size: 1.2em;

}


http://riddle.pl/emcalc/


Presentación

• 6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.

– No tiene que desaparecer contenido

– El orden de lectura tiene que ser correcto


Idioma

• 4.3 Identifique el idioma principal de un documento. [Prioridad 3]

<html

xmlns="http://www.w3.org/1999/xhtml"

xml:lang="es" lang="es">


Idioma

• 4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo, leyendas). [Prioridad 1]

<p>Este párrafo está escrito en

castellano.</p>

<p lang="en">This paragraph is written in

English.</p>


Idioma

• 4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. [Prioridad 3]

El <abbr title="World Wide Web

Consortium">WWW</abbr> define los

estándares de la Web.


Enlaces

• 13.1 Identifique claramente el objetivo de cada vínculo. [Prioridad 2]

<a href="" title="" hreflang="">…</a>


Tablas

• 5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1]

<th>…</th>: encabezamientos

<td>…</td>: datos


Tablas

• 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] – Filas:

• <thead>: encabezamiento de tabla

• <tfoot>: pie de tabla

• <tbody>: resto de filas

– Atributos: • scope, headers y axis


Tablas

• 5.5 Proporcione resúmenes de las tablas. [Prioridad 3] – summary: resumen de la tabla

– <caption>…</caption>: título de la página

• También se puede emplear el atributo title si no se quiere que aparezca visualmente (también se puede ocultar con CSS)


Formularios

• 10.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la etiqueta está colocada adecuadamente. [Prioridad 2] – La etiqueta para un recuadro de texto multilínea, un control

de entrada de texto o un grupo de controles (por ejemplo un grupo de casillas de selección) debe preceder inmediatamente a su control (o grupo de controles) en la misma línea (con sólo un control o grupo) o estar en la línea que precede al control (o grupo de controles)


Formularios

• 12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]

<label for="elNombre">Nombre</label><br />

<input type="text" name="elNombre"

id="elNombre" size="20"/>


Formularios

• 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2]

<fieldset>

<legend>Estado civil</legend>

<input type="radio" id="rad0" name="rad" />

<label for="rad0">Soltero</label>


<label for="rad1">Casado</label>


<label for="rad2">Divorciado</label>


<label for="rad3">Viudo</label>

</fieldset>


Formularios <select name="favoritefood">

<optgroup label="Pescado">

<option>Atún</option>

<option>Emperador</option>

<option>Salmón</option>

</optgroup>

<optgroup label="Verdura">

<option>Cebolla</option>

<option>Lechuga</option>

<option>Judía</option>

</optgroup>

<optgroup label="Fruta">

<option>Manzana</option>

<option>Naranja</option>

<option>Uva</option>

</optgroup>

</select>


Formularios

• 9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3]


id="elNombre" size="20" tabindex="1"

/>


Formularios

• 9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3]


id="elNombre" size="20" accesskey="n"

/>


Formularios

• En la actualidad, la mayoría de los navegadores admiten los atajos de teclado con el atributo accesskey. Si se usa Microsoft Windows, se tiene que emplear la tecla Alt más el atajo de teclado. En algunos navegadores, también es necesario pulsar Enter para activar el enlace. En Macintosh, se tiene que pulsar Control más el atajo de teclado. ¿Qué teclas utilizar? ¿Existe un consenso?


• El Gobierno del Reino Unido, en su Illustrated Handbook for Web Management Teams (html) propone el UK Government accesskeys standard con las siguientes teclas para ser empleadas en todas las páginas web oficiales:

* S - Skip navigation

* 1 - Home page

* 2 - What's new

* 3 - Site map

* 4 - Search

* 5 - Frequently Asked Questions (FAQ)

* 6 - Help

* 7 - Complaints procedure

* 8 - Terms and conditions

* 9 - Feedback form

* 0 - Access key details

• El último atajo de teclado, el número 0, permite acceder a una página web donde se muestra y explican los atajos de teclado que se emplean en el sitio web


Formularios

• 6.4 Para los scripts y applets, asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. [Prioridad 2]


Formularios

• Emplear disparadores al nivel de aplicación en vez de disparadores de nivel de interacción con el usuario – onfocus

– onblur

– onselect


Formularios

• Si tiene que emplear atributos específicos de un dispositivo, proporcione mecanismos redundantes de interacción

– onmousedown con onkeydown

– onmouseup con onkeyup

– onclick con onkeypress

– En HTML, no existe un equivalente de teclado para ondblclick


¡Muchas gracias!

Sergio Luján Mora:

[email protected]

@sergiolujanmora

mailto:[email protected]

https://twitter.com/sergiolujanmora

Introducción a la accesibilidad web - RUA: Principal · 2016-04-28 · Introducción a la...

Documents

Transcript of Introducción a la accesibilidad web - RUA: Principal · 2016-04-28 · Introducción a la...