sitios web accesibles

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


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



“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).



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.



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:



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>



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):



<!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.



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.



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



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>.



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.



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



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.



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



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



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.



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>



<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



(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”.



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=””>



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”).



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>



<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.



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



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.



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



<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.



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.



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>.



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.


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


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/



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/



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.


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).


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”.


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”.

sitios web accesibles

Documents