Accesibilidad en la Web: de
WCAG 1.0 a WCAG 2.0
Universidad de Colima
México
Departamento de Lenguajes y
Sistemas Informáticos
Pautas de accesibilidad al
contenido en la Web 1.0:
contenido en la Web 1.0:
paso a paso
Departamento de Lenguajes y Sistemas Informáticos
Sergio Luján Mora
Universidad de Alicante
DLSI – Universidad de Alicante
1
Introducción
• Principales puntos de verificación con
ejemplos de HTML CSS
ejemplos de HTML y CSS
Estructura
l
f
l
• 3.2 Cree documentos que estén validados
por las gramáticas formales publicadas
[Prioridad 2]
bli d
áti
<?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" />
DLSI – Universidad de Alicante
2
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>
English.</p>
DLSI – Universidad de Alicante
3
Estructura
• 3.5 Utilice elementos de encabezado para transmitir
la estructura lógica y utilícelos de acuerdo con la
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>
<h1>UNA PÁGINA DE PRUEBA</h1>
<h2>Sección 1</h2>
<h2>Sección 2</h2>
Presentación
• 3.3 Utilice hojas de estilo para controlar
la maquetación y la presentación.
[Prioridad 2]
href="estilo01.css" />
<link rel="stylesheet" type="text/css"
body {
}
background-color: #ffffff;
color: #000000;
DLSI – Universidad de Alicante
4
Presentación
• 3.4 Utilice unidades relativas en lugar de absolutas al
especificar los valores en los atributos de los
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;
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>
DLSI – Universidad de Alicante
5
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;
Imágenes
• 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
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]
<i
M5 1999
<img src=“supernova.gif” alt=“Supernova M5-1999
en Casiopea” longdesc=“supernova.html” />
“
if” lt “S
DLSI – Universidad de Alicante
6
Colores
• 2.2 Asegúrese de que las combinaciones de los colores de
p
y p
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].
g
p
q
• Effective Color Contrast:
http://www.lighthouse.org/accessibility/effective-color-contrast/
Colour Constrant Analyser:
• Colour Constrant Analyser:
http://juicystudio.com/services/colourcontrast.php
• Colour Constrant Check:
http://snook.ca/technical/colour_contrast/colour.html
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é?
DLSI – Universidad de Alicante
7
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
/ d d t
d
DLSI – Universidad de Alicante
8
Tablas
• 5.2 Para las tablas de datos que tienen dos o
más niveles lógicos de encabezamientos de
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
• <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)
DLSI – Universidad de Alicante
9
Formularios
• 10.2 Hasta que las aplicaciones de usuario soporten
explícitamente la asociación entre control de
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
(p
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)
g p
j
p
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"/>
DLSI – Universidad de Alicante
10
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>
<input type="radio" id="rad1" name="rad" />
<label for="rad1">Casado</label>
<input type="radio" id="rad2" name="rad" />
<input type radio id rad2 name rad />
<label for="rad2">Divorciado</label>
<input type="radio" id="rad3" name="rad" />
<label for="rad3">Viudo</label>
</fieldset>
Formularios
<select name="favoritefood">
<optgroup label="Pescado">
<option>Atún</option>
<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>
p g
p
DLSI – Universidad de Alicante
11
Formularios
• 9.4 Cree un orden lógico para navegar con el
t b l d
tabulador a través de vínculos, controles de
formulario y objetos. [Prioridad 3]
é d
d
t
í
t
l
l
<input type="text" name="elNombre"
id="elNombre" size="20"
t bi d
"1" /
tabindex="1" />
Formularios
l
á i
• 9.5 Proporcione atajos de teclado para los
í
l
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
(i
d
t
t
l
"t
t t
i
<input type="text" name="elNombre"
b "
t"
id="elNombre" size="20"
accesskey="n" />
" lN
DLSI – Universidad de Alicante
12
Crear cuenta
Comentarios de: Pautas de accesibilidad al contenido en la Web 1.0 - Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0 (0)
No hay comentarios