sitios web accesibles
DESCRIPTION
Iniciación a la edición de contenidos accesiblesTRANSCRIPT
Introducción al diseño de sitios web accesibles
[3.1] ¿Cómo estudiar este tema?
[3.2] Estructura de contenidos: encabezados, párrafos y listas
[3.3] Alternativas al contenido audiovisual
[3.4] Tablas de datos accesibles
[3.5] Formularios accesibles
[3.6] Enlaces accesibles
[3.7] Separación entre contenidos y apariencia
T
EM
A
Usabilidad y accesibilidad online
TEMA 3 – Esquema
Esquema
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Ideas clave
3.1. ¿Cómo estudiar este tema?
Para estudiar este tema es necesario leer los contenidos propuestos y tratar de aplicar
de forma práctica los conocimientos adquiridos, para lo cual, se propondrá el desarrollo
de una actividad.
Este módulo proporciona los conocimientos básicos para gestionar contenidos web en
los que se apliquen los criterios de accesibilidad internacionalmente reconocidos. Sus
objetivos son:
Conocer los principales elementos de una página web accesible.
Aprender a estructurar los contenidos de una página web.
Adquirir una visión general del diseño accesible de páginas web.
Saber incluir alternativas a elementos no textuales.
Aplicar correctamente los elementos de diseño expuestos en el módulo.
Gestionar contenidos web con criterios de accesibilidad.
Para aquellos estudiantes que no dispongan de conocimientos básicos sobre desarrollo
de contenidos web, en este apartado se recoge una introducción a los lenguajes de
marcado, concretamente a HTML/XHTML.
Un lenguaje de marcado es un conjunto de reglas que establecen qué tipo de marcas
han de utilizarse, de qué modo se distinguirán las marcas del texto de documentos y
cómo se insertarán éstas (la gramática y su sintaxis) y cuáles son las marcas permitidas
en cada una de las partes del documento. De forma genérica, se pueden distinguir dos
tipos de lenguajes de marcado (Martín Galán; Rodríguez Mateos, 2000):
1. Los lenguajes de marcado procedimentales: orientados a la presentación de los
documentos, especifican cómo debe ser procesado el texto para su salida a través de
diversos medios (pantalla de ordenador, impresora, etc.) Estos lenguajes no aportan
información de tipo semántico o estructura; son poco flexibles, dado que cualquier
cambio en la presentación del documento implica modificar su marcado; y suelen ser
lenguajes específicos de un sistema de procesamiento propietario, lo cual reduce la
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
“portabilidad” de dichos documentos. Algunos ejemplos de estos lenguajes son RTF
(Rich Text Format) de Microsoft y PDF (Portable Document Format) de Adobe.
2. Los lenguajes de marcado descriptivos: orientados a la descripción formal y de
contenido de los documentos. Estos lenguajes aportan información sobre la estructura
del documento y describen el contenido informacional del mismo, además, son
lenguajes más flexibles, que diferencian entre el contenido real del documento y su
representación. Algunos ejemplos son SGML, HTML, XML, etc.
Para analizar el origen y evolución de los lenguajes de marcado se suelen establecer
tres generaciones en el proceso evolutivo:
Las generaciones expuestas no suponen la superación de los estándares anteriores, por
el contrario, las tres generaciones de lenguajes de marcado coexisten y se utilizan para
las tareas que resultan más adecuadas en cada momento.
El lenguaje de marcado HTML tiene una especial relevancia al tratar del desarrollo de
los servicios de información electrónicos a través de internet. Este lenguaje es producto
de las investigaciones de Tim Berners-Lee y Robert Cailliau, iniciadas durante la
década de los 80 en el CERN. Como resultado de estas investigaciones aparece en 1995
la primera versión normalizada de HTML, la versión 2.0 (Benrers-Lee; Connolly, 1995).
De forma casi simultánea nace en octubre de 1994 el World Wide Web Consortium
(W3C), que se encargará del desarrollo y nuevas versiones de HTML. En el año 2000 el
lenguaje de marcado HTML adquiere el estatus de norma internacional con la norma
ISO 15445 (ISO, 2000), basada en la recomendación HTML 4.01 del W3C (W3C, 1999).
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Desde este momento, la ISO toma las riendas del lenguaje HTML y sus posibles
modificaciones. Por su parte, el W3C se concentra en el desarrollo y promoción del
metalenguaje XML y sus posibles aplicaciones derivadas.
En lo que se refiere a la aplicación práctica, el lenguaje HTML presenta una serie de
limitaciones (Weibel, 1995) como son:
Por ello, hay que tener en cuenta que “las debilidades de HTML en la imposibilidad de
expresar la semántica y la estructura a través de su etiquetado predefinido y fijo, junto a
la complejidad de SGML para expresar dicha semántica y estructura, todo ello unido a
la necesidad de contar con un formato común que presente información al ser humano
y que pueda ser procesado por las máquinas son las circunstancias que han
contribuido a que fructifique el lenguaje XML” (Méndez Rodríguez, 2002).
Con el fin de retomar los ideales de la codificación expuestos en SGML, desde muy
pronto se trató de adaptar los recursos web a dichos principios. A pesar de las
dificultades de esta empresa, finalmente se crea a mediados de los años 90 un
metalenguaje que se somete a los principios de SGML y que es lo suficientemente
restringido como para poder ser aplicado más fácilmente por todos aquellos que deseen
publicar en internet sus documentos. Nace así en el World Wide Web Consortium
(W3C) el metalenguaje XML (eXtensible Markup Language; esto es, lenguaje de marcas
extensible) que combina la flexibilidad de SGML con la simplicidad de HTML.
Sin embargo, estrictamente hablando, XML no es un lenguaje de marcas. Es,
realmente, un metalenguaje en cuanto que se limita a señalar los principios y reglas
que debe cumplir un lenguaje de marcas cualquiera. En realidad, el verdadero lenguaje
de marcas es el XHTML (eXtensible Hypertext Markup Language). XHTML es, pues, la
adaptación del antiguo lenguaje de marcado HTML a los principios de XML.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Los documentos deben comenzar con la declaración de la DTD (definición de tipo de
documento), que define la estructura de un tipo de documento específico. La DTD
abarca varios aspectos:
Una DTD puede desarrollarse para un documento en concreto o para muchos documentos.
La creación de una DTD para un solo documento no es eficiente; por tanto, tiene mucho
más sentido crear DTD que puedan ser usadas para muchos documentos. La forma básica
de la declaración del tipo de documento consta de los siguientes elementos:
Comienza con el delimitador <!DOCTYPE
Le sigue un nombre de elemento que identifica el tipo de elemento de documento.
En este caso, html.
A continuación figura un identificador de la DTD (Document Type Definition; esto es,
definición del tipo de documento), que puede ser una ruta de un archivo del sistema o
una dirección URL de un archivo en internet.
PUBLIC “-//w3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
Termina con el delimitador “>"
Ejemplo. Directiva de Declaración del Tipo de Documento para XHTML 1.0
Transitional: <!DOCTYPE html PUBLIC “-//w3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Una vez indicada la DTD, el resto del documento debe ir entre dos etiquetas, una de
apertura y otra de cierre, con el término html:
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Ejemplo. Contenedor principal de un documento HTML: <html>
(... contenido del documento ...)
</html>
Así, el elemento <html> es un elemento de tipo “contenedor” porque en su interior
pueden colocarse otros elementos (y, aunque no en el elemento <html>, otros
elementos contenedores pueden contener también texto directamente). Este tipo de
elementos siempre tienen una etiqueta de apertura, donde se definen los parámetros
(atributos) que definen el elemento, y otra de cierre, que marca el final del elemento, y
que no contiene atributos.
Por ejemplo, para documentos XHTML, en la etiqueta <html> de apertura se debe indicar
el espacio de nombres correspondiente (usado para definir etiquetas y atributos extendidos
del tipo xml:nombre), y también debe indicarse el idioma empleado, mediante un código
de idioma IANA. Así, si el idioma es español, la etiqueta de apertura queda como sigue:
Ejemplo. Etiqueta de apertura <html> para un documento XHTML en español: <html
xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
Entre las etiquetas de apertura y de cierre <html>, el resto del documento se estructura
necesariamente en dos partes obligatorias:
1. La cabecera: contiene información que no será visible en la ventana del navegador
del usuario, pero que aporta información importante sobre el documento, como su
título, enlaces a hojas de estilo CSS, información para robots de búsqueda, programas,
etc. La cabecera se define usando el elemento contenedor <head>.
Ejemplo. Cabecera de un documento HTML: <head>
(... cabecera del documento ...)
</head>
Uno de los contenidos esenciales de la cabecera es el título del documento, que se
marca mediante el elemento contenedor <title>, y que contiene el texto que aparecerá
en la barra superior del navegador cuando el usuario visite la página:
Ejemplo. Línea de título del documento: <title>Título del documento</title>
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Cuando el usuario accede a una página web, especialmente si lo hace con un producto de
apoyo como un lector de pantalla, una de las primeras informaciones que recibe es el
título de la página (en HTML, elemento <title>). El título suele verse en la barra
superior del navegador y también es el nombre de la ventana cuando el usuario conmuta
entre las diferentes ventanas abiertas.
Por eso, es muy importante que el título de la página sea identificativo acerca de los
contenidos específicos de la misma. Si el título solo contiene el nombre del sitio, el
usuario no sabrá en qué sección o documento del sitio se encuentra, y podría tener
varias ventanas abiertas con un mismo título, que no aportaría información demasiado
relevante sobre sus contenidos.
El título de la página debería contener una breve descripción del contenido
(probablemente coincidiendo con el encabezado principal del documento), además de
otras informaciones complementarias como el nombre del sitio o la ruta que conduce al
documento a través de las secciones del sitio. Por ejemplo, un buen título para una página
con información sobre un teléfono móvil, dentro del sitio web de Nokia, podría ser el
siguiente:
Ejemplo. Título de página con información complementaria del sitio: <title>Teléfono
móvil Nokia N95 (sección productos, teléfonos móviles).
Sitio web de Nokia</title>
2. El cuerpo: contiene la información visible para el programa navegador del usuario,
es decir, lo que aparecerá en la ventana del navegador. Contendrá tanto el texto de la
página web como las imágenes, objetos incrustados, interfaz de navegación, etc. El
cuerpo de la página se marca mediante el elemento contenedor <body>.
Ejemplo. Cuerpo del documento: <body>
(... cuerpo de la página, contenidos de la ventana...)
</body>
Reuniendo lo expuesto hasta el momento, se obtiene la estructura básica de un
documento XHTML escrito en español, que es la siguiente (ejemplo. Documento básico
XHTML 1.0 Transitional):
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
<!DOCTYPE html PUBLIC “-//w3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Título de la página web</title>
(... otros elementos de la cabecera ...)
</head>
<body>
(... cuerpo de la página ...)
</body>
</html>
Para observar cómo los navegadores interpretan el citado código, el estudiante puede abrir
un documento de texto (extensión .txt), pegar el código citado en los párrafos
anteriores, guardar el documento cambiando la extensión a .html y abrir con el navegador.
3.2. Estructura de contenidos: párrafos, listas y encabezados
La mayor parte de los elementos y atributos de HTML añaden cierta información
semántica a los contenidos a los que encierran, indicando de qué tipo de contenido se
trata o cuál es su función. Gracias al marcado semántico, los navegadores pueden
interpretar correctamente las estructuras existentes “bajo la superficie” y los motores
de búsqueda pueden crear índices más fiables y categorizar los contenidos de forma
más eficiente.
En lo referente a la accesibilidad, el marcado adecuado de la semántica de los contenidos
permite a los productos de apoyo proporcionar información al usuario sobre la estructura
y tipo de los contenidos, que podrá además acceder de forma selectiva a cada tipo de
documento de una manera mucho más eficaz. Por ejemplo, un usuario de lector de pantalla
puede usar el marcado correcto de las tablas para navegar entre las celdas de la tabla, para
conocer su título o para obtener información adicional sobre la estructura de la tabla.
También puede saltar directamente a las secciones de la página si éstas se han marcado
adecuadamente con encabezados, leer los elementos de cita, conocer la expansión de las
abreviaturas, etc.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Sin embargo, mientras la accesibilidad es algo objetivo (se genera una barrera de acceso o
no), la semántica es un tema algo más complicado y subjetivo, y no todos los
desarrolladores interpretan el uso semántico de algunos elementos de la misma manera.
Por ejemplo, un listado de términos en un glosario puede crearse, como se verá en el
apartado 3.1.3, con el elemento de lista de definición <dl>, conteniendo pares término-
definición usando los elementos <dt> y <dd>.
Pero, aunque ésta es una forma posible de marcar ese contenido, también podría
considerarse semánticamente correcto el uso de encabezados individuales para los
términos y párrafos para las definiciones, o incluso una tabla de datos con una columna
“término” y otra “definición”.
Lo importante es, pues, recordar el objetivo que se persigue, es decir, garantizar el
acceso de los usuarios y usar los elementos de un modo que sea acorde a lo que
significan. A continuación, se explica cómo aplicar una estructura adecuada en la
información textual mediante la aplicación de párrafos, encabezados y listas.
Párrafos
Los párrafos estructuran el contenido textual de la página web, conteniendo una o
más frases con relación entre sí para expresar una idea o concepto. Los párrafos se
marcan mediante el elemento contenedor <p>.
Ejemplo. Un párrafo de texto en HTML: <p>Éste es un párrafo de texto, que puede
contener una o varias frases relacionadas con una misma idea o concepto, y que suele
extenderse a más de una línea.</p>
Por su parte, los saltos de línea se codifican mediante el elemento autocontenido <br>. Los
elementos autocontenidos no pueden contener otros elementos o texto, por lo que
únicamente tienen una etiqueta de apertura. En XHTML, los elementos autocontenidos
utilizan un formato especial para la etiqueta de apertura, terminando con una barra antes
del símbolo >, así: <br />, lo que viene a indicar que la etiqueta se abre y se cierra a la vez.
Debe evitarse usar el elemento <br> para separar párrafos. Una aplicación válida podría
ser la de separar los versos de un poema.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Encabezados
Los encabezados son elementos usados para definir títulos de sección o encabezar
secciones estructurales del contenido. En HTML, se expresan mediante el elemento
<hn> donde ‘n’ es un número del 1 al 6. Así, <h1> corresponde al título más
importante, e idealmente debería haber solo uno por página.
Ejemplo. Encabezados de sección:
<h1>Mis aficiones</h1>
<h2>Los videojuegos</h2>
<p>Mis videojuegos preferidos son las clásicos plataformas para la Master System y la
Megadrive, como el Sonic, Alex Kidd, Dinamite Headdy, etc.</p>
<h2>Música</h2>
<p>Me gusta escuchar rock. Mis grupos favoritos son Dover, Nightwish, Sonata
Arctica, HIM, etc. También escucho música en español, como Amaral o Los
Piratas.</p>
Los encabezados son uno de los principales mecanismos de navegación usados
por los usuarios de lector de pantalla. Bien utilizados, constituyen uno de los elementos
básicos de una web accesible, ya que permiten acceder muy rápidamente a las distintas
partes de un documento web.
Los encabezados deberían ser siempre frases cortas y descriptivas del contenido al que
encabezan, preferiblemente con los términos más significativos al principio, para que
los usuarios de lector de pantalla puedan discernir rápidamente si el contenido
siguiente les interesa o no.
Una premisa que no hay que olvidar es que la misión de los encabezados sirven para
encabezar contenido, por lo que, antes de usarlos indiscriminadamente conviene
plantearse si se cumple esta condición. Una regla básica que nunca debería romperse
es “nunca colocar dos encabezados seguidos del mismo nivel” (un encabezado de un
determinado nivel sí puede encabezar a otro del nivel siguiente).
Por ejemplo, es frecuente ver listados que solo contienen titulares de noticias marcados con
encabezados del mismo nivel, unos a continuación de otros. Esto, en principio, es
incorrecto, puesto que en el documento del listado no encabezan ningún contenido
(aunque puede que sí lo hagan en la noticia completa). Una posibilidad que sí sería correcta
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
sería usar los encabezados para marcar los titulares, proporcionando a continuación un
resumen de cada noticia. De este modo, el encabezado actuaría al mismo tiempo como
enlace a la noticia desarrollada y como título que encabeza el resumen de la noticia.
Otra condición que siempre debe cumplirse es que no se produzcan saltos entre los
niveles numéricos sucesivos de los encabezados. Puesto que la estructura de los
contenidos asemeja a un árbol temático, lo lógico es que un capítulo de nivel 2, por
ejemplo, contenga subcapítulos de nivel 3, secciones de nivel 4, apartados de nivel 5,
etc., pero sin romper el orden jerárquico. De no cumplirse esta regla, los usuarios que
navegan por los encabezados pueden sentirse confundidos acerca de cuál es la
estructura del documento.
Listas
Las listas son agrupaciones de elementos (ítems) que están relacionados entre sí.
Existen tres tipos de listas en HTML:
Desordenadas: el orden de los elementos de la lista no es crucial para entender la
información (por ejemplo, una lista de ingredientes en una receta). Los navegadores
suelen representarlas como listas con viñetas, aunque se puede cambiar su
apariencia mediante hojas de estilos. Estas listas se marcan con el elemento
contenedor <ul>, y los ítems de la lista con el elemento contenedor <li>.
Ejemplo. Lista desordenada:
<ul>
<li>Huevos</li>
<li>Patatas</li>
<li>Cebolla</li>
<li>Sal</li>
<li>Aceite</li>
</ul>
Ordenadas: el orden de los elementos es importante para entender la información o
se trata de una enumeración lógica (por ejemplo, la lista de pasos para elaborar una
receta). Los navegadores suelen representarlas como listas numeradas, aunque se puede
modificar su apariencia mediante estilos. Se marcan usando el elemento contenedor
<ol>, y como en las anteriores, los ítems de la lista se marcan también con <li>.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Ejemplo. Lista ordenada:
<ol>
<li>Pelar y cortar las patatas en daditos</li>
<li>Picar la cebolla</li>
<li>Llenar de aceite la sartén y freir las patatas y la cebolla</li>
<li>Batir los huevos y mezclarlo todo</li>
<li>Echar sal, mezclar bien y verter sobre la sartén</li>
<li>Voltear repetidas veces hasta que la tortilla esté bien hecha</li>
</ol>
Listas de definiciones: agrupan pares término/definición y su uso más habitual
es para crear glosarios o diccionarios de términos. Se marcan con el elemento
contenedor <dl>, y a diferencia de los otros dos tipos de lista, pueden contener dos
tipos de ítems: <dt> para marcar los términos, y <dd> para marcar la definición del
mismo. Se pueden incluir varias definiciones o acepciones para un mismo término.
Ejemplo. Lista de definiciones:
<dl><
dt>Lector de pantalla</dt>
<dd>Programa que lee al usuario, en voz alta, el contenido de la
pantalla. Los lectores de pantalla son utilizados ante todo por personas ciegas.</dd>
<dt>Magnificador de pantalla</dt>
<dd>Programa que permite al usuario aumentar el contenido de la pantalla. Los
lectores de pantalla son utilizados por personas con una discapacidad visual.</dd>
</dl>
Además, existen las listas anidadas. Se denominan listas anidadas aquellas que
contienen otras listas en su interior. En consecuencia, las listas anidadas implican la
presencia de una o más listas dentro de otra principal.
Las listas anidadas suponen una mayor complicación en relación al número y orden de
etiquetas. Sin embargo, si se respeta el orden de apertura y cierre de las etiquetas, se evitará
cualquier error sintáctico; basta cumplir estrictamente la siguiente regla: “Se deben cerrar
primero las últimas etiquetas abiertas, y posteriormente las primeras, en orden inverso a
como fueron abiertas”. Obsérvese que las listas que se anidan pueden ser de tipos distintos,
siempre y cuando se respete el orden de apertura y de cierre de las etiquetas.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Ejemplo. Listas anidadas:
<ul>
<li>Trilogía del Elfo Oscuro:
<ol>
<li>La Morada</li>
<li>El Exilio</li>
<li>El Refugio</li>
</ol>
</li>
<li>Trilogía del Valle del Viento Helado:
...
</li>
</ul>
Además de esas reglas básicas sobre el marcado de listas, conviene conocer cuándo
usar estos elementos y cuáles son las barreras que pueden presentarse para los
usuarios. En primer lugar, las listas deberían usarse siempre que existan grupos de
enlaces o de información relacionada. Las listas están especialmente indicadas para
agrupar los enlaces de menús, barras de navegación y otros grupos de enlaces de la
interfaz de navegación del sitio.
Dado que en este tipo de elementos de interfaz el orden de los enlaces no es
significativo para su comprensión, lo adecuado es agrupar sus enlaces con listas
desordenadas. De cara a la presentación, el uso de hojas de estilo permite modificar las
características de presentación de las listas para ajustarlas al diseño visual del sitio; por
ejemplo, es posible eliminar las viñetas y situar los enlaces en cajas, añadir bordes, e
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
incluso colocarlos en una barra horizontal o simular pestañas para acceder a los
distintos contenidos.
Otros contenidos que pueden ser marcados con listas incluyen:
Migas: ruta a la página actual a través de las secciones del sitio (“usted está aquí).
Nubes de tags: formadas por etiquetas categorizadas, presentadas habitualmente
con distintos tamaños en función del número de páginas dentro de cada categoría.
Barras de herramientas con botones para enviar por e-mail, imprimir, enviar el
artículo a las redes sociales, etc.
Etiquetas de un artículo de un blog o los comentarios al mismo.
Enlaces a artículos relacionados.
Resultados de una búsqueda.
Enlaces de paginación.
Glosarios de términos.
Listas de contactos.
Cualquier otra agrupación o enumeración de elementos que constituya un listado.
Los lectores de pantalla son capaces de indicar al usuario si se encuentra en una lista,
cuántos elementos tiene la lista y su nivel de anidamiento. Las listas son un
instrumento esencial para conocer la estructura de la interfaz de un sitio, y
constituyen uno de los principales sistemas de navegación para los usuarios de lector de
pantalla. Entre los problemas de accesibilidad más comunes relacionados con las
listas, se encuentran los siguientes:
Listas de un único elemento: por definición, una lista es una agrupación de
varios elementos, por lo que una lista que solo contiene un elemento puede ser
confusa para los usuarios. No obstante, esta regla general se aplica solo a aquellas
listas que no tienen sentido con un único elemento, y puede tener excepciones. En
determinados casos, es posible que la lista tenga sentido con un único elemento; por
ejemplo, un listado de alumnos, de películas, de discos… En estos casos, tener un
único elemento es solo una circunstancia que podría variar si el listado crece.
Listas usadas para presentación: los elementos de lista como <ol> y <ul>, los
navegadores suelen aplicar una sangría a los contenidos, por lo que algunos
desarrolladores usan estos elementos solo por el efecto visual que producen. Esto es
un error y causa confusión a los usuarios de lector de pantalla.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Listas marcadas con símbolos en lugar de elementos de lista: es un error
usar símbolos como guiones, puntos, etc., junto con saltos de línea, para indicar
elementos de lista, en lugar de usar los elementos semánticos de marcado de listas.
Uso excesivo de listas anidadas: algunas veces, una interpretación estricta del
significado semántico de una lista puede generar más confusión que un marcado
menos estricto. Por ejemplo, los enlaces de las migas constituyen una agrupación de
enlaces, y por lo tanto un listado. Algunos desarrolladores interpretan que cada
nuevo nivel de profundidad en el listado está “dentro” del nivel anterior, y para
indicarlo usan listas anidadas con un único enlace cada una. Esto, aunque quizá
podría considerarse más semántico, es más complicado de navegar y de interpretar
que una única lista con todos los enlaces. Además, otra posible interpretación
semántica es considerar que las migas son simplemente un listado de “lugares de
paso” hacia la página actual.
3.3. Alternativas al contenido audiovisual
La inserción de una imagen se realiza mediante el elemento autocontenido <img>. Este
elemento tiene dos atributos que son obligatorios:
src. Contiene la ruta al fichero de imagen que se mostrará.
alt. Contiene una breve descripción de la imagen o de su funcionalidad. Esta
descripción aparece cuando las imágenes están desactivadas y también es leída por
los lectores de pantalla. En algunos navegadores, el texto del atributo alt aparece
también al pasar el ratón sobre la imagen.
Ejemplo. Imagen con texto alternativo: <img src=”logo.jpg” alt=”Logotipo de la
UOC”> Una imagen también puede situarse dentro de una etiqueta <a> para enlazar
con otra página.
Ejemplo. Imagen actuando como enlace: <a href=”mapaweb.htm”>
<img src=”mapaweb.png” alt=”Ir al mapa del sitio web”>
</a>
Las alternativas textuales son descripciones en forma de texto que cumplen una
función lo más equivalente posible a la de aquellos elementos a los cuales describen.
Por ejemplo, las alternativas a las imágenes suelen consistir en descripciones de las
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
mismas, pero también pueden ser descripciones de su función, o incluso un texto vacío
si la imagen no cumple otra función que la de decorar la página.
Un método sencillo e intuitivo a la hora de decidir cuál es la mejor alternativa para una
determinada imagen o elemento es considerar cómo describiríamos ese elemento por
teléfono a otra persona que no puede ver la página en ese momento. Así, una imagen de
una fotografía que acompañe a un texto probablemente se describirá con el propio
contenido de la fotografía. Sin embargo, si la imagen es puramente decorativa (no aporta
información relevante), lo más probable es que ni siquiera tenga sentido mencionarla.
Por otro lado, una imagen compleja que represente un gráfico, un diagrama o esquema,
probablemente necesitará una explicación más elaborada, que describa las relaciones
entre elementos, la función que cumplen estos, o los conceptos que representa la imagen.
En otros casos, si la imagen se usa como enlace, lo más seguro es que la alternativa sea
más bien una descripción de la función que cumple el enlace. Por ejemplo, un icono de
una impresora que sirve como enlace para imprimir la página, necesitará una
alternativa del tipo “imprimir esta página”, en lugar de una descripción directa como
“icono de una impresora”. Lo mismo puede decirse de una imagen de una lupa en un
buscador. La alternativa será “buscar” y no “imagen de una lupa”.
Además, existen otras imágenes cuya función no puede ser sustituida por una
alternativa textual debido a su propia naturaleza. Éste es el caso de las imágenes usadas
como control anti-robots o anti-spam (los llamados CAPTCHA, por sus siglas en
inglés). Estas imágenes, que normalmente representan letras o palabras distorsionadas,
cuya misión es servir de comprobación de la “humanidad” del usuario, por motivos
evidentes no pueden ser descritos con su contenido, ya que el programa o robot que se
desea bloquear podría leer la alternativa y saltar así la protección.
En esos casos, la alternativa no es un simple texto, sino más bien, un método
alternativo de control, por ejemplo a través de una pregunta lógica que solo un humano
podría contestar: “¿cuántas son dos más tres?”, “¿de qué color es una fresa roja?”,
“¿cuántos pies tiene un ciempiés?”, “¿de qué color es el caballo blanco de Santiago?”…
Además de las imágenes, existen otros elementos que pueden necesitar una alternativa
textual, o incluso otros tipos de alternativa. Por ejemplo, en el caso de un contenido
audiovisual, la alternativa textual consistiría normalmente en una transcripción
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
completa del vídeo. Sin embargo, para muchos grupos de usuarios serán preferibles
otras alternativas como la audiodescripción o los subtítulos, sincronizados con la acción
del contenido.
3.4. Tablas de datos accesibles
Las tablas sirven para organizar la información en una cuadrícula formada por
casillas o celdas. En principio, cada una de las filas y columnas puede representar un
atributo o característica, de manera que, en cada celda figuran los elementos que
verifican simultáneamente los correspondientes atributos de la fila y de la columna.
Esta disposición de la información no es la única posible. Se puede, por ejemplo,
disponer todos los atributos posibles en las columnas y reservar las filas para los elementos.
En las celdas se indicará si cada elemento de la población verifica o no la característica
correspondiente a la columna o el valor que posee en relación a dicho atributo.
Como las tablas distribuyen los contenidos en una cuadrícula de dimensiones
configurables, algunos diseñadores emplean las tablas también para distribuir la
información visualmente en la página, sin considerar elemento o atributo alguno. Esto
permitiría diseñar la apariencia de la página de acuerdo con las necesidades o gustos
del diseñador.
Por ejemplo, es posible reservar un área para una cabecera y otra para un pie de
página usando una tabla de tres filas y una sola columna. En la primera fila podría
situarse el logotipo y una barra de enlaces, por ejemplo; en la fila central los
contenidos; y en la última fila el pie de la página con la información de contacto o
enlaces al mapa del web o información legal, por ejemplo. También podrían hacerse
divisiones similares en vertical, con una columna a la izquierda para situar un menú,
una central para los contenidos, y otra a la derecha para información complementaria.
Así, las tablas son elementos versátiles, que pueden usarse tanto para organizar y
estructurar datos como para diseñar la apariencia de la página.
Nota: el uso de tablas para maquetar, aunque no se prohíbe explícitamente en las
distintas versiones de las pautas WCAG, está desaconsejado a favor de las hojas de
estilo, por lo que cualquier diseño nuevo debería evitar el uso de tablas con el único
propósitos de maquetar contenidos.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
En HTML, las tablas se codifican mediante el elemento contenedor <table>. En caso de
usarse para organizar datos, el elemento <table> puede contener el atributo summary
para incluir un resumen que explique el contenido y la estructura de la tabla:
Ejemplo. Etiqueta principal de tablas en HTML: <table summary=”Las columnas
muestran los datos de población distribuidos por sexos, una fila por cada rango de
edades”>
Igualmente, se puede proporcionar un título a la tabla incluyendo en su interior el
elemento contenedor <caption>, dentro del cual se incluye el texto del título. Por otro
lado, la rejilla de la tabla se divide, en primer lugar, en filas, mediante el elemento
contenedor <tr>. Dentro de cada fila, se incluyen las celdas individuales, que pueden
ser de dos tipos:
Celdas de encabezamiento
Aquellas que definen las características o
atributos de los datos (por ejemplo:
“Hombres”, “Mujeres”, “Todos”…). Se marcan mediante el elemento
contenedor <ht>
Contienen datos o valores. Si las tablas se usan para maquetar contenido, éste es el único tipo de celdas
que debe usarse. Las celdas de datos se marcan
con el elemento contenedor <td>
Celdas de datos
El siguiente ejemplo muestra una tabla de datos básica creada usando los elementos
anteriormente descritos.
Ejemplo. Tabla de datos básica
<table summary=”Datos de población 2005; en columnas, distribución por sexos; en
filas, distribución por rango de edades”>
<caption>Pirámide de población en 2005</caption>
<tr>
<th>Edad</th>
<th>Hombres</th>
<th>Mujeres</th>
</tr>
<tr>
<th>De 0 a 10 años</th>
<td>3.032.485</td>
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
<td>2.980.758</td>
</tr>
...
</table>
A nivel de accesibilidad, para el marcado de tablas simples, basta con realizar un
marcado apropiado siguiendo los estándares, como se ha explicado con anterioridad.
Así, la tabla se organizará en elementos de fila (<tr>), dentro de los cuales se insertarán
los elementos de celdas de encabezado (<th>) y de celdas de datos (<td>) apropiados.
Opcionalmente, y si se estima oportuno para un mejor entendimiento de la tabla, puede ser
conveniente incluir un título de tabla con el elemento <caption> y un resumen de la
organización de los datos mediante el atributo summary en el elemento <table> principal.
El elemento <caption> es de gran utilidad cuando existe más de una tabla en una
misma página, ya que el usuario de lector de pantalla podrá navegar entre las tablas
fácilmente, leyendo solo los títulos sin tener que entrar en cada tabla para averiguar qué
tipo de datos contiene. Además, el usuario de lector de pantalla puede obtener un listado de
todas las tablas de la página e ir directamente a cualquiera de ellas a través de su título.
Por otro lado, si la tabla tiene muchas columnas o muchos registros, puede ser muy
importante proporcionar un resumen que explique cómo navegar por la tabla. Si esta
información falta, un usuario de lector de pantalla puede sentirse perdido puesto que, al
no ver directamente la cuadrícula, debe deducir la estructura navegando entre las celdas.
Existen tablas complejas en las que los datos pueden estar relacionados con más de
un encabezado. La solución técnica aplicable no se explica en el presente módulo,
aunque se recoge en las Pautas de Accesibilidad al Contenido en la Web 1.0 del W3C.
3.5. Formularios accesibles
Los formularios son elementos que permiten al usuario interactuar con la página web
de un modo más personalizado. En un formulario es posible introducir datos, activar o
desactivar preferencias, elegir entre varias opciones o rellenar campos de texto. Las
elecciones del usuario y los datos introducidos se envían al servidor, que los procesa
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
(almacenándolos o no), y a continuación genera una respuesta para el usuario (por
ejemplo, una página de resultados de una búsqueda).
Sin los formularios, no existirían los blogs, YouTube o las redes sociales. Tampoco
habría comercio electrónico ni posibilidad de realizar trámites online y ni siquiera sería
posible buscar en internet.
Contenedor principal del formulario
En HTML, los formularios se codifican usando el elemento contenedor <form>, que
contendrá los distintos elementos que corresponden a los controles individuales para cada
campo o dato solicitado. En la etiqueta de apertura se pueden incluir varios atributos:
action (obligatorio): indica cuál es el destino del formulario, es decir, qué página
recogerá los datos del formulario o qué acción se realizará con los datos cuando el
usuario pulse el botón de enviar. Habitualmente, el valor de este atributo será una
URL o ruta de un script de servidor, pero también puede ser una acción como
“mailto:[email protected]” para enviar los datos por correo electrónico.
method (opcional): este atributo indica cómo se enviarán los datos al servidor.
Existen dos métodos distintos que cumplen funciones ligeramente distintas:
get: los datos se envían codificados en la URL de destino, mediante un formato
especial que contiene las variables seguidas de sus valores, y que se sitúan tras la
dirección principal de destino. Por ejemplo, la URL:
http://www.miservidor.com/script.php?nombre=Pedro
indica que se está enviando la variable “nombre” con el valor “Pedro”.
Este método se usa a menudo para indicar un número de página en una paginación
de resultados, para variables sencillas como selección de idiomas, coordenadas GPS,
valores numéricos simples, etc. Si no se especifica el atributo method, el formulario
se envía mediante get.
post: los datos se envían encapsulados en la petición al servidor. Esto significa que
el usuario no ve en la URL cuáles son los datos que se envían, pero es un método
más eficiente para el procesador de datos, y no tiene la limitación de caracteres de
una URL, por lo que permite enviar campos con mucha más información.
enctype (opcional): indica si existe algún tipo de codificación especial al enviar
los datos. Por ejemplo, para enviar los datos por correo electrónico como texto
plano, se usaría enctype=”text/plain”, o si se quieren enviar ficheros adjuntos, es
necesario usar enctype=”multipart/form-data”.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Ejemplo. Formulario con envío de los datos a un correo electrónico:
<form action=”mailto:[email protected]” method=”post”
enctype=”text/plain”>
...
</form>
A continuación se describen algunos tipos de controles de formulario:
Cuadros de edición
Existen varios tipos de campos que se usan para introducir texto. El más simple es el
cuadro de edición, que permite introducir textos breves (no más de 255 caracteres). Se
usan normalmente para solicitar datos como nombre, apellidos, direcciones de correo
electrónico, página web, etc. El navegador lo representa como una caja de texto de una
sola línea.
En HTML, muchos de los controles de formulario usan el mismo elemento
autocontenido <input>, y se distingue su tipo mediante el atributo type. En el caso de
los cuadros de texto, se usa <input type=”text”>. Además, hay otros atributos que
sirven para modificar algunos parámetros del campo:
id: identificador del control, usado para asociarle una etiqueta textual y para
referirse a él desde los scripts. Todo identificador debe ser único para cualquier
elemento del documento, sea de formulario o no.
name: nombre de la variable que se enviará al servidor.
maxlength: permite limitar el número de caracteres que el usuario puede
introducir.
value: Indica el valor por defecto que tendrá el cuadro de texto cuando aparezca en
la página. Es muy útil para evitar que el usuario tenga que volver a rellenar todos los
campos si ha cometido un error.
Ejemplo. Cuadro de edición: <input type=”text” name=”email” id=”tx-mail”
maxlength=”100” value=””>
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Nota: Aunque los atributos id y name no son estrictamente obligatorios, el primero es
necesario para asociar la etiqueta textual (ver siguiente apartado), y el segundo es
necesario para enviar la variable al servidor, por lo que ambos atributos deberían estar
siempre presentes.
Etiquetas textuales para controles de formulario
Para que los usuarios conozcan qué es lo que se debe introducir o seleccionar en los
distintos controles del formulario, es necesario asociarlos a una etiqueta textual que dé
nombre al control. Este nombre no tiene por qué coincidir con el id o el name del control,
que son atributos de carácter interno, para ser usados por las aplicaciones o por el sistema
de procesado de datos, mientras que la etiqueta es para que la entiendan los usuarios.
En HTML, las etiquetas se codifican con el elemento contenedor <label>. Este
elemento puede contener, además del texto, al control al que se asocia, aunque esto es
opcional. Para asociar unívocamente la etiqueta con el control, se usa una combinación
de los atributos id (para el control) y for (para la etiqueta) con el mismo valor.
Ejemplo. Cuadro de edición con etiqueta textual: <label for=”tx-mail”>E-
mail</label>
<input type=”text” name=”email” id=”tx-mail” maxlength=”100”>
Casillas de verificación (checkbox)
Las casillas de verificación son elementos que permiten activar o desactivar opciones
de forma independiente, mediante una “marca” que indica si se ha activado o no la
opción. Los navegadores las suelen representar con un pequeño cuadradito seguido del
texto identificativos de la opción. Si la opción está desactivada, el cuadrado aparece vacío,
y si se activa, se coloca una marca en forma de cruz o de “visto bueno” que lo indica.
En HTML, las casillas de verificación usan también el elemento autocontenido
<input>, dando al atributo type el valor “checkbox”. También se usan los atributos id y
name de la manera habitual. Además, en este caso se usan también otros dos atributos:
value: indica el valor que se asociará a la variable en caso de que la casilla se active y
se envíe el formulario (por ejemplo, si en una casilla de aceptación de condiciones
legales el atributo name es “leido” y el value es “si”, el servidor recibiría leido=”si”).
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
checked: indica si la casilla está seleccionada por defecto cuando se muestre el
formulario. Si se usa este atributo, debe indicarse como valor “checked”.
Ejemplo. Casilla de verificación inactiva por defecto: <input id=”ck-leido”
type=”checkbox” value=”si” name=”leido”>
<label for=”ck-leido”>He leído y acepto los términos de uso</label>
Ejemplo. Casilla de verificación activa por defecto: <input id=”ck-recordar”
type=”checkbox” value=”si”
name=”recordarme” checked=”checked”>
<label for=”ck-recordar”>Recordarme en este sitio</label>
Botones de opción (radio button)
Los botones de opción permiten seleccionar una opción entre varias posibles de
forma excluyente, es decir, si se activa una opción se desactivan las demás. Se usan
normalmente para darle al usuario la posibilidad de escoger entre múltiples valores
posibles de un mismo dato que son incompatibles entre sí (por ejemplo, sexo:
hombre/mujer; tratamiento: D./Dña./Sr.). Los botones de opción se representan
habitualmente como un pequeño círculo, vacío si está inactivo y lleno o con un punto
en su interior si está activo.
En HTML, se usa el elemento <input> con el valor “radio” para el atributo type.
Además, de un modo similar a las casillas de verificación, el atributo value contiene el
valor que se enviará al servidor en caso de que se active el botón de opción concreto.
Una particularidad de este tipo de elementos es que, dado que varios botones
comparten una misma variable, se usa el mismo name para todos ellos, mientras que el
id es particular y único para cada botón de opción, que también tendrá su etiqueta
independiente. Como en las casillas de verificación, el atributo checked=”checked” se
usa para indicar cuál es el botón de opción que está activo por defecto.
Ejemplo. Botones de opción: <input id=”op-hombre” type=”radio” value=”H”
name=”sexo”
checked=”checked”>
<label for=”op-hombre”>Hombre</label>
<input id=”op-mujer” type=”radio” value=”M” name=”sexo”>
<label for=”op-mujer”>Mujer</label>
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
<input id=”op-nsnc” type=”radio” value=”N” name=”sexo”>
<label for=”op-nsnc”>Prefiere no decirlo</label>
Cuadros de lista
Al igual que los botones de opción, sirven para escoger entre múltiples opciones,
aunque en este caso las opciones se presentan en forma de menú desplegable o
“combo”. En HTML, se construyen a través del elemento contenedor <select>, que a su
vez contendrá tantos elementos <option> como opciones se incluyan en el cuadro de
lista. Como en otros controles de formulario, el elemento <select> posee los atributos id
para asociarle la etiqueta, y name para indicar el nombre de la variable.
Además, a la opción seleccionada por defecto se le debe añadir el atributo
selected=”selected”. Cada opción puede tener un atributo value, que indicará el valor
que se envía al servidor cuando se envíe el formulario.
Ejemplo. Cuadro de lista simple:
<label for=”sel-idioma”>Idioma:</label>
<select id=”sel-idioma” name=”idioma” size=”1”>
<option value=”ca” selected=”selected”>Català</option>
<option value=”es”>Español</option>
<option value=”ca”>Català</option>
<option value=”en”>English</option>
</select>
Agrupación de campos de formulario
En ocasiones conviene agrupar varios campos de formulario relacionados o, como en
el caso de los botones de opción, varios controles que se refieren al mismo campo. Por
ejemplo, se pueden agrupar los campos relativos a “datos personales”, “datos fiscales”,
etc., o los distintos botones de opción de un mismo campo “sexo” o “idioma”.
Para agrupar varios campos en HTML se usa el elemento contenedor <fieldset>. Si se
quiere dar un identificador al grupo completo, se usa el elemento <legend> en el
interior del elemento <fieldset>. El contenido del <legend> actúa como la etiqueta
<label>, pero para todo el grupo.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Botones de acción
Una vez introducidos todos los datos, el usuario debe enviar el formulario al sistema
de procesamiento de datos, normalmente situado en el servidor. Esto se realiza
mediante un botón de enviar (en inglés, submit). También es posible que el usuario
quiera restaurar los datos del formulario a sus valores iniciales en el momento de
cargarse; esto se realiza mediante un botón de “restablecer” (en inglés, reset).
En HTML, el botón de enviar se codifica mediante el elemento <input> con el valor
“submit” para el atributo type. El atributo value contendrá el texto que aparecerá en el
botón. En este caso, como la etiqueta es el propio atributo value, no es necesario un
elemento <label> adicional, y por lo tanto tampoco un id.
Ejemplo. Botón de envío del formulario: <input type=”submit” value=”Enviar”>
Medidas de accesibilidad aplicables a formularios
Muchas de las barreras de accesibilidad relacionadas con los formularios tienen que ver
con un etiquetado incorrecto de los controles y la mayoría se evitan fácilmente
siguiendo los estándares del lenguaje HTML.
Así, todos los controles de formulario deben tener una etiqueta textual asociada
mediante el elemento <label>, excepto en el caso de los botones, donde la etiqueta se
indica mediante el atributo value.
Estas etiquetas son leídas por los lectores de pantalla, lo que permite al usuario ciego
conocer qué dato se está pidiendo en cada momento. Para asociar explícitamente las
etiquetas con sus controles se deben usar los atributos for para el elemento <label> e id
para el control asociado (<input>, <select>, <textarea>), asignando el mismo valor a
ambos atributos para asociar así la etiqueta y su control.
Ejemplo. Asociación explícita entre un control y su etiqueta: <label for=”tx-
nombre”>Nombre:</label>
<input id=”tx-nombre” type=”text” name=”nombre”>
Opcionalmente, se puede realizar una asociación implícita (por posición), colocando
la etiqueta justo al lado del control, o mejor aún, encerrando el control en el interior de
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
la etiqueta. Esto no solo refuerza la asociación entre el control y su etiqueta, sino que
también permite añadir información adicional detrás del control que también será leída
por el lector de pantalla (por ejemplo, una indicación del formato adecuado o un
ejemplo de posible respuesta válida).
Ejemplo. Mezcla de asociación explícita e implícita: <label for=”tx-tel”>Teléfono
<input id=”tx-tel” type=”text” name=”tel”>
(ejemplo: +34999888777)
</label>
Nota: La posición natural de una etiqueta varía dependiendo del tipo de control. Para
los cuadros de entrada de texto -cuadros de edición, contraseñas y áreas de texto- y
para las listas de selección, la etiqueta se suele colocar a la izquierda, mientras que en
las casillas de verificación y botones de opción, la etiqueta se sitúa normalmente a la
derecha del control.
En ocasiones, por motivos de diseño es necesario usar una imagen en lugar de un
botón de envío normal (por ejemplo, una imagen de una lupa que indique “buscar”). En
estos casos es posible proporcionar un texto alternativo mediante el atributo alt, al
igual que se hace con las imágenes insertadas con <img>; además, conviene incluir
también el atributo title, ya que de ese modo un usuario que navegue con un ratón verá
la explicación del botón al pasar el cursor sobre él.
Ejemplo. Botón de envío consistente en una imagen: <input type=”image” src=”ico-
lupa.png”
alt=”Buscar” title=”Buscar”>
En todos los casos, los textos de las etiquetas deben ser cortos y suficientemente
identificativos, para que los usuarios puedan saber claramente qué se les pide en cada
caso. Cuando varios controles de formulario están relacionados entre sí, puede ser
conveniente agruparlos usando el elemento <fieldset> junto con una etiqueta de grupo
<legend>. Esto es especialmente importante cuando se trata de botones de opción que
hacen referencia a una misma variable. Así, cada botón de opción tendrá una etiqueta
<label> asociada, que identificará esa opción concreta y la distinguirá de las demás
opciones posibles, mientras que la etiqueta <legend> de grupo identificará a la variable
sobre la que el usuario está decidiendo.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Por ejemplo, una pregunta de una encuesta podría ser “¿Tiene hijos?” (<legend>),
mientras que las posibles respuestas podrían ser “Sí”, “No” y “No contesta” (<label>).
Ejemplo. Agrupación de opciones para una misma variable:
<fieldset>
<legend>¿Tiene hijos?</legend>
<input id=”op-si” type=”radio” name=”hijos”>
<label for=”op-si”>Sí</label>
<input id=”op-no” type=”radio” name=”hijos”>
<label for=”op-no”>No</label>
<input id=”op-nc” type=”radio” name=”hijos” checked=”checked”>
<label for=”op-nc”>No contesta</label>
</fieldset>
Para cada control, el lector de pantalla leerá ambas etiquetas seguidas del tipo de
control (en este caso, “botón de opción”) y su estado: “¿Tiene hijos? Sí. Botón de opción
no verificado”.
Nota: en un grupo de botones de opción es importante marcar uno de ellos como activado
por defecto, ya que el comportamiento al enviar un control vacío de este tipo puede variar
de unos navegadores a otros. Si se necesita que exista una opción de “no contestada”, es
preferible añadir dicha opción y marcarla como activa, en lugar de dejar solo las posibles
opciones válidas sin activar y confiar en que el usuario escogerá una de ellas.
Dado que los formularios recogen datos introducidos directamente por los usuarios,
por su propia naturaleza son un sistema propenso a la introducción de errores; por
ejemplo, el usuario puede cometer un error al teclear su dirección de e-mail,
introducir su teléfono con un formato no admitido, dejar algún dato crítico sin rellenar,
o pulsar accidentalmente el botón de envío antes de haber revisado todos los datos.
Debido a ello, en aquellos casos donde el texto se deba introducir en un formato
concreto, es importante incluir un ejemplo adyacente al control, y dentro de la etiqueta
del mismo. Este tipo de ejemplos ayuda a evitar errores de los usuarios, que de ese
modo se sentirán más confiados y satisfechos al usar el sitio.
Ejemplo. Un campo DNI indica cuál es el formato adecuado con un ejemplo: <label
for=”tx-dni”>DNI
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
<input id=”tx-dni” type=”text” name=”dni”>
(ejemplo: 09876543-A)
</label>
3.6. Enlaces accesibles
Los enlaces son la base del “hipertexto”, permitiendo el salto a otras partes del sitio o
a páginas de otros sitios. También pueden servir para realizar otras acciones como
enviar mensajes de correo electrónico o, mediante programación, casi cualquier cosa
que se pueda imaginar.
Los enlaces a otras páginas, ya sean del mismo servidor o de otro distinto, se realizan
mediante el elemento contenedor <a>. En la etiqueta de apertura es obligatorio incluir
el atributo href, que indica el destino del enlace (su URL o ruta relativa en el servidor).
Habitualmente los enlaces a páginas en otros servidores empezarán por http://.
Ejemplo. Enlace simple: <a href="http://www.technosite.es/">Sitio web de
Technosite</a>
Los enlaces o vínculos son el elemento de navegación número uno a la hora de
recorrer la web, y en algunos casos no solo se usan para acceder a otra página o sitio
distinto, sino también para llevar a cabo acciones como imprimir una página, suscribirse
a un feed RSS o descargar un fichero al ordenador. La accesibilidad de los enlaces es, por
tanto, uno de los factores clave que influyen en la accesibilidad general de un sitio.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
Resulta vital que el texto contenido en un enlace identifique claramente cuál es el
objetivo del mismo, ya sea una página o una acción. Esta identificación no debe dar lugar
a ambigüedad si el enlace se lee fuera de contexto. Por ejemplo, es frecuente ver enlaces
del tipo “pinche aquí” o “más información”, que forman parte de una frase o bloque
mayor, donde el contexto aporta la información extra que se requiere para entender el
enlace. Además, el texto “pinche aquí” hace referencia a un dispositivo concreto como
puede ser un ratón, pero el usuario podría estar usando un teclado o una interfaz táctil.
Este tipo de enlaces, a menudo repetidos varias veces en una misma página (aunque con
contextos distintos), provocan que muchos usuarios de lector de pantalla no sepan qué
ocurrirá si activan el enlace. Hay que tener en cuenta que los usuarios de lector de
pantalla suelen acceder a los enlaces a través de listados donde solo se muestra el contenido
del enlace, y no su contexto, por lo que distinguir unos enlaces de otros es fundamental
para poder navegar de forma eficiente. De lo contrario, el usuario deberá explorar
manualmente alrededor del enlace para localizar el contexto, y aunque tal vez pueda
finalmente comprenderlo, la dificultad añadida generará incomodidad y frustración.
Nota: Cuando se habla de “texto del enlace”, se hace referencia tanto al contenido
textual directo como al texto alternativo de cualquier imagen que se encuentre en el
interior del enlace.
Aunque existen métodos de desambiguación sencillos, como añadir al final del enlace
una descripción adicional, o ampliar el rango de texto que cubre el enlace, muchas
veces basta con cambiar ligeramente la redacción para lograr el efecto deseado. Por
ejemplo, en lugar de enlazar el texto “pinche aquí” en una frase como “Para saber más
sobre el teléfono N95, pinche aquí”, bastaría con enlazar completamente una frase más
simple: “más sobre el teléfono N95”. Si dos enlaces de una misma página tienen el
mismo texto, deben conducir al mismo recurso.
3.7. Separación entre contenidos y apariencia
Aunque no es objeto de este módulo entrar en el terreno de la maquetación visual de los
contenidos, conviene aclarar algunos aspectos relativos a las técnicas de
maquetación empleadas en el desarrollo web que pueden influir sobre la
accesibilidad, especialmente aquellos que tienen que ver con los usos incorrectos de los
elementos estructurales para crear presentación visual.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
En primer lugar, hay que recordar que la mayoría de los elementos eh HTML cumplen
una función determinada para marcar contenidos de un determinado tipo, y aunque
los navegadores añaden características visuales por defecto, el objetivo de los
elementos es el marcado de la estructura, y no el efecto visual que esto pueda producir.
Por ejemplo, el elemento <blockquote> indica la presencia de un bloque de texto
citado, y los navegadores habitualmente representan este elemento añadiendo una
sangría al bloque de texto en su interior. Si un desarrollador usa el elemento
<blockquote> solo porque crea ese efecto de sangría, sin que exista realmente una cita,
el usuario de productos de apoyo puede sentirse confundido al navegar, puesto que se
le informará de una cita que no existe realmente.
Uno de los casos más habituales donde se usan elementos estructurales con fines
visuales es el de las tablas usadas para maquetar contenidos. En estos casos, el
usuario de lector de pantalla normalmente es informado de la existencia de una tabla,
pero se sentirá confundido porque la estructura no se corresponde con una tabla de
datos y la navegación se complica. En casos extremos, el orden de lectura de los
contenidos se ve corrompido y la página deja de tener sentido. Además, cuando se usan
tablas para maquetar es habitual que haya varios niveles de anidamiento (tablas dentro
de tablas), que pueden generar problemas adicionales a los productos de apoyo.
Los marcos también son elementos en desuso hoy en día, debido a muchos factores
que los hacen desaconsejables. El principal de estos factores es que no es posible
enlazar a un conjunto de marcos específico (es decir, cargando páginas concretas en
cada uno de los marcos), sino que solo se puede enlazar al conjunto de marcos por
defecto. Además, el efecto visual logrado con los conjuntos de marcos puede lograrse ya
con hojas de estilo, y el uso de plantillas y el aumento en las velocidades de conexión ha
dejado obsoleto su utilización como técnica de maquetación de sitios web.
En su lugar, la maquetación de los contenidos debería realizarse usando hojas de estilo,
que permiten que los contenidos se estructuren de la forma correcta, para posteriormente
posicionar visualmente los elementos en pantalla, aplicar estilos tipográficos, tamaños,
colores, etc. Habitualmente la maquetación mediante hojas de estilo exige el uso de
contenedores estructurales sin carga semántica (es decir, que no tienen una función
definida para el tipo de contenido). Estos contenedores son <div> y <span>.
Usabilidad y accesibilidad online
TEMA 3 – Ideas clave
La diferencia entre ambos es que el primero es un elemento de bloque (es decir, se
comporta como una caja rectangular), mientras que el segundo es un elemento “en
línea” (es decir, que sigue el flujo del texto, permitiendo así marcar palabras o frases
sueltas en el interior de un texto).
El uso de <div> y <span> es muy variado y una de sus utilidades principales es la de
poder añadir atributos que apliquen propiedades especiales a los contenidos (por
ejemplo, para marcar el idioma de una frase o de un bloque de contenidos). Aunque en
este módulo no se tratará su uso para la maquetación visual, se explicará, llegado el
caso, su uso para la asignación de propiedades especiales.
Usabilidad y accesibilidad online
TEMA 3 – Lo + recomendado
Lo + recomendado
No dejes de leer…
Hacia las pautas WCAG 2.0. Guía de transición para evaluadores y
desarrolladores
La presente guía ofrece las nuevas pautas de accesibilidad al contenido web 2.0.
Primero introduce un resumen de los antecedentes históricos de estas pautas; después
analiza la nueva estructura y, por último, explica la aplicación y significado de las
WCAG 2.0.
El artículo está disponible en el aula virtual o en la siguiente dirección web:
http://www.google.es/url?q=http://www.inteco.es/file/1C6X2rLUvrOdOw1KQPmTJA
&sa=X&ei=VBybTLSABcr44AaD9sl6&ved=0CBkQzgQoADAA&usg=AFQjCNE95kHhD
5B042Z2X5DYeLqnyd4wig
Usabilidad y accesibilidad online
TEMA 3 – + Información
+ Información
A fondo
HTML5: Techniques for providing useful text alternatives
Documento con una guía práctica para autores de documentos HTML.
El artículo está disponible en el aula virtual o en la siguiente dirección web:
http://www.paciellogroup.com/blog/misc/HTML5/new/img-new.html
Webgrafía
HTML con clase
Sitio web en el que se proporciona información muy útil para quienes se inician en el
desarrollo de contenidos web.
http://html.conclase.net/
Usabilidad y accesibilidad online
TEMA 3 – + Información
Blog de Bruce Lawson
Blog de Bruce Lawson que hace hincapié en la accesibilidad web, los estándares web,
cuentos de viajeros y música.
http://www.brucelawson.co.uk/
HTML5 accessibility
La presente página aporta información sobre las nuevas funciones de accesibilidad
HTML5. A través de la misma podremos mantenernos al día de las mejoras realizadas
en los navegadores.
http://html5accessibility.com/
Usabilidad y accesibilidad online
TEMA 3 – + Información
World Wide Web Consortium
Web del World Wide Web Consortium dedicada al desarrollo de estándares web.
http://www.w3.org/
Bibliografía
CLARK, J. Building Accessible Websites. Pearson Education, 2001.
PACIELLO, M. Web Accessibility for People with Disabilities. C M P Books, 2000.
SLATIN, J. M. y RUSH, S. Maximum Accessibility: Making Your Web Site More
Usable for Everyone. Pearson Education, 2002.
Usabilidad y accesibilidad online
TEMA 3 – Actividades
Actividades
Práctica: Generando contenidos accesibles en HTML
Para poner en práctica los conocimientos adquiridos, el estudiante deberá generar
contenidos en HTML sobre un tema relacionado con la accesibilidad TIC,
contemplando, al menos, los siguientes elementos:
1. Contenidos textuales estructurados mediante el uso de encabezados, párrafos y listas.
2. Enlaces e imágenes.
3. Tabla de datos.
Los alumnos podrán generar sus contenidos como documentos HTML creados con
un editor de texto o de HTML (en este caso, cada estudiante deberá enviar todos los
ficheros resultantes como una única carpeta comprimida mediante ZIP o RAR) o
publicarlos en un sitio web que se pondrá a disposición de los estudiantes para el
desarrollo de esta actividad.
Si se opta por generar documentos HTML, se podrá utilizar el código de ejemplo recogido
en el primer apartado. Si se publican en el sitio web, se dispone de la oportunidad de
hacer prácticas con un gestor de contenidos de uso muy extendido (Drupal).
Esta práctica se centra en la gestión de contenidos de forma accesible, excluyendo su
maquetación u aplicación de características visuales (tamaño y tipo de fuente, por
ejemplo).
Usabilidad y accesibilidad online
TEMA 3 – Test de autoevaluación
Test de autoevaluación
1. ¿Qué texto considerarías adecuado para un enlace?
A. Más info.
B. Más información sobre productos de apoyo.
C. Pincha aquí para acceder a información detallada.
2. ¿Qué etiqueta emplearías para marcar un encabezado principal?
A. <h1>.
B. <h6>.
C. <th1>.
3. ¿Qué información debe contener el título de una página web?
A. Un resumen del contenido de la página.
B. Referencia del sitio y contenido específico de la página.
C. Nombre del sitio web.
4. ¿Cómo se agrupan controles en un formulario?
A. Mediante <fielset>.
B. Mediante <h1>.
C. Mediante <title>.
5. ¿Qué etiqueta emplearías para marcar una lista ordenada?
A. Emplearía <ul>.
B. Emplearía <li>.
C. Emplearía <ol>.
6. ¿Cómo se marca una celda de encabezado?
A. Con <td>.
B. Con <th>.
C. Con <h1>.
7. ¿Qué característica es importante para que los controles de formulario sean
accesibles con un lector de pantalla?
A. La utilización de etiquetas descriptivas (<label>) y la asociación con los controles.
B. La utilización del atributo “alt”.
Usabilidad y accesibilidad online
TEMA 3 – Test de autoevaluación
C. La utilización de la etiqueta <legend>.
8. ¿Cómo se aconseja que se marquen los menús de navegación?
A. Cada elemento debe marcarse como encabezado.
B. Cada elemento debe marcarse como párrafo.
C. Los menús deben marcarse como lista.
9. Para que una web se considere accesible según WCAG 1.0:
A. Se debe separar el contenido de las características de apariencia.
B. Se debe maquetar mediante tablas.
C. Se debe crear una web alternativa de solo texto.
10. ¿Cómo se describe una imagen?
A. Mediante un fichero de audio.
B. Mediante el atributo “alt”.
C. Mediante el atributo “name”.