Curso online: Diseño Gráfico Web. Módulo XI Elementos Gráficos y Multimedia en (X)HTML

(1)

Curso online: Diseño Gráfico Web

Módulo XI – Elementos Gráficos y Multimedia

en (X)HTML

(2)

Diseño Gráfico Web

(3)

Módulo XI Página 3

Índice de contenidos

Capítulo 1

Imágenes y elementos multimedia accesibles ____________________ 4

Capítulo 2

Imágenes _________________________________________________ 4

2.1. Texto alternativo _____________________________________________________ 4 2.2. Descripción larga _____________________________________________________ 6

Capítulo 3

Elementos tempo dependientes _______________________________ 7

(4)

CAPÍTULO 1 IMÁGENES Y ELEMENTOS MULTIMEDIA

ACCESIBLES

Cada vez es más frecuente la inclusión de elementos multimedia en los sitios Web, estos elementos de información se caracterizan por combinar múltiples medios (texto, imágenes, gráficos, animaciones, vídeo, sonido, etc.) con el objeto de proporcionar un recurso que mejore la atención y comprensión del usuario.

La incorporación de este tipo de recursos requiere tener en consideración los requisitos de accesibilidad.

En este apartado se presentan algunas de las técnicas recogidas en el documento

Técnicas

para las WCAG 2.0

(http://www.w3.org/TR/WCAG20-TECHS/), conducentes al desarrollo de un sitio web con una interacción audiovisual accesible.

En concreto se presentan técnicas relacionadas con los siguientes tipos de recursos:  Imágenes.

 Elementos tempo dependientes.

CAPÍTULO 2

IMÁGENES

Según establece la

Pauta de Accesibilidad 1.1 “Alternativas Textuales”

presentada en el Módulo IX, toda imagen incluida en una página, a través del elemento img, debe proporcionar

una alternativa textual que aporte la misma información o función que la imagen, para ello existen dos mecanismos:

 Texto alternativo (alt).

 Descripción larga (longdesc).

2.1. Texto alternativo

El atributo alt tiene como objeto proporcionar un equivalente textual breve y conciso.

Soporta una longitud máxima de 1024 caracteres.

Los agentes de usuario (navegadores y herramientas de apoyo) proporcionan esta información textual en caso de no poder mostrar la imagen, ya sea porque el agente de usuario tiene las imágenes desactivadas, porque la ruta a la imagen sea incorrecta o por tratarse de un navegador textual.

(5)

En caso de utilizar lectores de pantalla, éstos leerán el texto asociado al atributo.

El texto alternativo se encuentra determinado por el contenido informativo que transmite una imagen o por la función que desempeña. Se pueden identificar los siguientes tipos de imágenes:

 Imágenes de contenido: proporcionan información y complementan la información textual. El texto alternativo debe proporcionar un equivalente textual breve de la información que transmite la imagen original.

 Imágenes decorativas: se utilizan como elementos de diseño complementarios tales como bordes, iconos, fondos, etc. No aportan ninguna información o funcionalidad adicional. Deberían incluirse mediante reglas de estilo. Si se incluyen mediante el elemento img el texto alternativo debe estar vacío

(alt=””).

Ejemplo de incorporación de imágenes decorativas mediante hojas de estilo

 Imágenes funcionales: actúan como vínculos con una página Web o un archivo. Si

el enlace está formado por un texto descriptivo y una imagen que no aporta información relevante, ésta deberá ser tratada como imagen decorativa, dejando el texto alternativo vacío. Si la imagen es el único elemento del vínculo el texto alternativo deberá describir el destino del enlace.

(6)

 Imágenes con texto: como texto alternativo se deberá proporcionar el texto íntegro que muestre la imagen.

2.2. Descripción larga

Cuando la imagen es compleja y el texto alternativo no es suficiente para transmitir la función o propósito de la imagen, es necesario utilizar el atributo longdesc del elemento img.

El atributo longdesc debe contener la URL de la sección de la página actual o una página

auxiliar. El principal problema que plantea el uso de este atributo es que no está soportado por la mayor parte de los agentes de usuario, por lo que es preciso adoptar alguna estrategia adicional para posibilitar el acceso a la descripción, siendo las más habituales:

 Incluir la información como nota a pie de página. Esta solución es adecuada si la información no es muy voluminosa.

 Mantener la información de forma independiente para no sobrecargar el

documento y proporcionar un vínculo auxiliar para acceder a ella, ya sea mediante la propia imagen o mediante un vínculo alternativo, por ejemplo en una forma de pie de imagen.

(7)

Se recomienda utilizar el atributo longdesc para gráficos que representan series de datos

(sectores, diagramas, histogramas...).

CAPÍTULO 3

ELEMENTOS TEMPO DEPENDIENTES

Además de las imágenes, existen otro tipo de recursos que pueden incrustarse en un documento (X)HTML: vídeo, sonidos, animaciones… Los agentes de usuario visualizan estos medios mediante la utilización de extensiones o complementos que necesitan ser instalados, o mediante dispositivos de ayuda integrados.

El vídeo junto con las animaciones Flash son quizás los medios más extendidos, ambas tecnologías integran una secuencia de imágenes y sonidos para representar escenas en movimiento.

En los últimos años se ha extendido en los portales de la Administración Pública, la inclusión de este tipo de recursos como herramienta formativa para utilizar los servicios relacionados con la Administración Electrónica.

(8)

Es por ello por lo que el cumplimiento de las pautas de accesibilidad relacionadas con este tipo de recursos se convierte en un factor determinante si se desea alcanzar una implantación y uso acorde a la ley 11/2007 de 22 de junio, de acceso electrónico de los ciudadanos a los Servicios Públicos, en la que se establece este acceso como un derecho de todos los ciudadanos.

Atendiendo a la

Pauta de accesibilidad 1.2: “Alternativa para documentos multimedia

tempo dependientes”

se debe proporcionar una alternativas accesibles para los contenidos audiovisuales

La siguiente tabla resume las alternativas que se deben proporcionar en función del tipo de medio y del nivel de conformidad deseado:

Grabado En directo Grabado En directo Grabado En directo

Solo audio TT TT

Solo vídeo TT o AA TT

Multimedia

sincronizado (TT o AD) SB + AD SB LS + ADA + TT

AA

- Alternativa en audio: pista sonora que presenta información equivalente al contenido del medio de sólo vídeo grabado.

AD

- Audiodescripción: narración agregada a la pista de sonido para describir los detalles visuales importantes que no se pueden entender sólo con la banda de sonido principal.

ADA

- Audiodescripción ampliada: audiodescripción que se agrega a una presentación audiovisual poniendo en pausa el vídeo, de manera que haya tiempo suficiente para agregar una descripción adicional.

LS

- Interpretación en lengua de signos: traducción al lenguaje de signos de las pistas de audio hablado.

SB

- Subtitulado: alternativa visual y/o textual, sincronizada para la información sonora necesaria para comprender el contenido multimedia.

TT

- Transcripción textual: documento de texto que incluye una secuencia correcta de descripciones textuales de la información visual y auditiva.

(9)

3.1. Inclusión de elementos tempo dependientes en (X)HTML

La inclusión de un vídeo, o de cualquier recurso multimedia, en una página (X)HTML se hace mediante el elemento object, utilizando el atributo type para indicar el formato del vídeo y

el atributo data para indicar su URI.

Debido a que el navegador del usuario podría no disponer del visor específico (plug-in, add-in o extensión) necesario para reproducir el tipo de vídeo incrustado, se debe proporcionar un enlace alternativo que posibilite la descarga del vídeo.

Para que el enlace alternativo se encuentre disponible a todos los usuarios se recomienda incluirlo fuera del elemento object, ya que su inclusión en el elemento hará que éste sólo sea