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

TEMA

[3.7] Separación entre contenidos y apariencia

Usabilidad y accesibilidad online

Esquema

TEMA 3 – Esquema

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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:

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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>

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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érminodefinició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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

Celdas de datos

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>

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>

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

<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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

(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:direccion@correo.es” 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”.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

Ejemplo. Formulario con envío de los datos a un correo electrónico: <form action=”mailto:gestion@datos.com” 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=””>

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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>

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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.

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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

TEMA 3 – Ideas clave

Usabilidad y accesibilidad online

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 – Ideas clave

Usabilidad y accesibilidad online

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 – Lo + recomendado

Usabilidad y accesibilidad online

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

TEMA 3 – + Información

Usabilidad y accesibilidad online

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/

TEMA 3 – + Información

Usabilidad y accesibilidad online

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 – + Información

Usabilidad y accesibilidad online

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 – Actividades

Usabilidad y accesibilidad online

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

Usabilidad y accesibilidad online

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

TEMA 3 – Test de autoevaluación