DisWeb2000. Información sobre la discapacidad. Enlaza con la página principal de DisWeb2000. [D]
Diseño Accesible de Páginas Web.

Web accesible - Portada -  Introducción - Técnicas.

W3C.

Técnicas para las Pautas de Accesibilidad al Contenido de la Web 1.0

Anexo de la Recomendación de W3C de 5 de mayo de 1999.

Aviso legal:
Este documento no tiene autorización oficial de World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI). Contiene material con el copyright (c) W3C.
El único documento reconocido por este Consorcio es su original en inglés:
Techniques for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505/
Todos los derechos están reservados por W3C.
Este documento puede contener errores debidos a su traducción.
Las normas aplicables de W3C pueden encontrarse en:
Sobre el copyright, la propiedad intelectual y los avisos legales:
http://www.w3.org/Consortium/Legal/ipr-notice-20000612
Sobre uso de los documentos:
http://www.w3.org/Consortium/Legal/copyright-documents
Sobre licencia de software:
http://www.w3.org/Consortium/Legal/copyright-software

Esta versión original en inglés:

Última versión original en inglés:

Última versión original en inglés de las "Web Content Accessibility Guidelines 1.0":

Traducción al español de las "Pautas de Accesibilidad al Contenido de la Web 1.0":

Editores:

Para comunicar errores de esta traducción o proponer comentarios a la misma, envíe un mensaje a los traductores.

Copyright© 1999 W3C (MIT, INRIA, Keio), todos los derechos reservados. Se aplican las normas concernientes a responsabilidad, marca, uso de documento y licencia de software de W3C.

Resumen.

Este documento es un listado de técnicas que implementa los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido de la Web 1.0".
Este documento es parte de una serie de documentos de accesibilidad publicados por la Iniciativa de Accesibilidad a la Web.

Estatus de este documento.

Este documento es una NOTA dispuesta por W3C únicamente para debate.
La publicación de esta Nota por W3C no indica su adhesión por W3C, el equipo de W3C o cualquier miembro de W3C.
Puesto que las Pautas de Accesibilidad al Contenido de la Web 1.0 pretenden ser un documento estable (como una Recomendación de W3C), se espera que el documento presente evolucione a medida que cambien las tecnologías y los desarrolladores de contenidos descubran técnicas más efectivas para diseñar páginas accesibles.
Este documento ha sido producido como parte de la Iniciativa de Accesibilidad a la Web de W3C. La finalidad del Grupo de Trabajo de las Pautas de los Contenidos de la Web se debate en el Estatuto del Grupo de Trabajo.
La lista de las actuales Recomendaciones de W3C y otros documentos técnicos puede hallarse en http://www.w3.org/TR .
Por favor, los comentarios sobre este documento deben enviarse a wai-wcag-editor@w3.org.

Índice.

Resumen.
Estatus de este documento.
1.- Prioridades.
2.- Cómo se organizan las Técnicas.
    2.1.- Ejemplos y ejemplos desaconsejados.
3.- Temas de accesibilidad.
    3.1.- Estructura contra presentación.
    3.2.- Textos equivalentes.
    3.3.- Páginas alternativas.
    3.4.- Acceso desde el teclado.
    3.5.- Navegación.
    3.6.- Comprensión.
    3.7.- Negociación del contenido.
    3.8.- Refresco automático de la página.
    3.9.- Parpadeo de la pantalla.
    3.10.- Documentos empaquetados.
    3.11.- Validación.
    3.12.- Soporte del navegador.
4.- Técnicas HTML.
    4.1.- Estructura del documento y metadatos.
    4.2.- Información sobre el idioma.
    4.3.- Etiquetas de texto.
    4.4.- Listas.
    4.5.- Tablas.
    4.6.- Vínculos.
    4.7.- Imágenes y mapas de imagen.
    4.8.- Applets y otros objetos programados.
    4.9.- Audio y video.
    4.10.- Marcos.
    4.11.- Formularios.
    4.12.- Scripts.
5.- Técnicas CSS.
    5.1.- Pautas para crear hojas de estilo.
    5.2.- Tipos de letra.
    5.3.- Estilo del texto.
    5.4.- Formateo del texto.
    5.5.- Colores.
    5.6.- Maquetación, posicionamiento, colocación y alineación.
    5.7.- Líneas y bordes.
Mapa de puntos de verificación.
Índice de elementos y atributos HTML.
    Elementos.
    Atributos.
Agradecimientos.
Especificaciones referenciadas.
Servicios.

1.- Prioridades.

Cada punto de verificación tiene un nivel asignado por el Grupo de Trabajo, basado en el impacto de dicho punto sobre la accesibilidad.

[Prioridad 1]

El desarrollador de contenidos de la Web tiene que satisfacer este punto de verificación. De otro modo, a uno o más grupos les resultará imposible acceder a la información del documento. Que este punto de verificación sea satisfecho es un requerimiento básico para que algunos grupos sean capaces de usar documentos Web.

[Prioridad 2]

El desarrollador de contenidos de la Web debe satisfacer este punto de verificación. De otro modo, a uno o más grupos les resultará difícil acceder a la información del documento. La satisfacción de este punto de verificación removerá importantes obstáculos para acceder a documentos Web.

[Prioridad 3]

El desarrollador de contenidos de la Web puede tener en cuenta este punto de verificación. De otro modo, uno o más grupos podrían encontrar alguna dificultad en el acceso a la información del documento. La satisfacción de este punto de verificación mejorará el acceso a los documentos Web.

Algunos puntos de verificación especifican un nivel de prioridad que puede variar bajo ciertas condiciones (que serán indicadas).
Los puntos de verificación de este documento están numerados de igual manera que en las "Pautas de Accesibilidad al Contenido de la Web 1.0".

2. Cómo se organizan las técnicas.

Este documento es un listado de técnicas que implementan los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido de la Web 1.0". Este documento se organiza de la siguiente manera:

Temas de accesibilidad:

Esta sección introduce algunas técnicas generales para promover la accesibilidad, que son independientes de cualquier lenguaje de etiquetado.

Técnicas HTML:

Esta sección explica como implementar puntos de verificación aplicables en HTML (consultar [HTML 4.0], [HTML 3.2]) e incluye numerosos ejemplos prácticos. Para complementar esta sección, un índice de elementos y atributos HTML proporciona información sobre todos los elementos de HTML 4.0 y todos los atributos que afectan directamente a la accesibilidad. Para los elementos, el índice incluye vínculos a las técnicas que se refieren a ellos.

Técnicas CSS:

Esta sección explica como implementar puntos de verificación aplicables en CSS1 y CSS2 (consultar [CSS1], [CSS2]).

Se proporciona un mapa de puntos de verificación para la navegación en las técnicas. Para cada punto de verificación, el mapa incluye su definición (tal y como aparece en las "Pautas de Accesibilidad al Contenido de la Web 1.0") y vínculos con las técnicas aplicables al punto de verificación. Además, al principio de cada sección de este documento se enumeran los puntos de verificación que se incluyen en ella.

2.1.- Ejemplos y ejemplos desaconsejados.

Este documento contiene algunos ejemplos que ilustran soluciones accesibles en HTML, CSS, etc, pero también ejemplos desaconsejados, que ilustran lo que los desarrolladores no deben hacer. Estos ejemplos desaconsejados están subrayados y los lectores deberían abordarlos con precaución, ya que están expuestos con una finalidad meramente ilustrativa.

3.- Temas de accesibilidad.

Las secciones siguientes tratan algunas cuestiones de accesibilidad que los desarrolladores de contenidos Web deben tener en mente cuando diseñan documentos y sitios.

3.1.- Estructura contra presentación.

Cuando se diseña un documento o una serie de documentos, los desarrolladores de contenidos deben esforzarse en identificar la estructura que desean dar a sus documentos, antes de pensar en cómo se presentarán los mismos al usuario. Distinguir la estructura del documento de la forma en que se presenta el contenido ofrece algunas ventajas, incluido un aumento de la accesibilidad, manejabilidad y transferibilidad.
La identificación de lo que es estructura y lo que es presentación puede ser un reto a veces. Por ejemplo, muchos desarrolladores consideran que una línea horizontal (el elemento HR) comunica una división estructural. Esto puede ser cierto para usuarios con una visión normal, pero para usuarios sin visión o sin navegadores gráficos, una línea horizontal no significa prácticamente nada (uno debería "adivinar" que un elemento HR implica una división estructural, pero, sin otra información, esto no puede garantizarse). En HTML, los desarrolladores deberían usar los elementos de encabezamiento (H1 - H6) para identificar nuevas secciones. Estos elementos deben ser complementados por indicaciones visuales o de otro tipo tales como  líneas horizontales, pero no deben ser reemplazados por ellas.
También se mantiene lo contrario: los desarrolladores no deben usar elementos estructurales para lograr efectos de presentación. Por ejemplo, en HTML, aunque el elemento BLOCKQUOTE puede crear sangrías de texto en algunos navegadores, está diseñado para identificar una cita, no para crear una presentación con efectos laterales. Los elementos BLOCKQUOTE usados para sangrías confunden a los usuarios y la búsqueda de los robots, que esperan que el elemento se utilice para señalar una cita.
La separación de presentación y estructura es inherente a los documentos XML, tal y como establece la Norma Walsh en "A Guide to XML" [WALSH].
Los navegadores HTML son en su mayoría de difícil codificación. Un encabezamiento de primer nivel aparece en tal modo porque el navegador reconoce la etiqueta H1. De nuevo, puesto que los documentos XML no tienen fijadas etiquetas, este enfoque no funcionará. La presentación de un documento XML depende de una hoja de estilo.
¡Test rápido!. Para determinar si el contenido es estructural o de presentación, cree un borrador "outline" de su documento. Cada punto de la jerarquía denota un cambio estructural. Utilice etiquetas estructurales para marcar esos cambios y etiquetas de presentación para hacerlos más aparentes visual o auditivamente. Observe que las líneas horizontales no aparecerán en este borrador "outline" y por tanto no son estructurales sino de presentación. Nota: este test rápido se aplica a la estructura de capítulo, sección y párrafo. Para determinar la estructura de las frases, busque abreviaturas, cambios en el lenguaje normal, definiciones y listas de ítems.

3.2.- Textos equivalentes.

Puntos de verificación en esta sección: 1.1, 1.2, 1.5, 13.10, 3.3, 12.1 y 12.2.

El texto se considera accesible para prácticamente todos los usuarios si puede ser manejado por lectores de pantalla, navegadores visuales y lectores braille. Debe poder ser desplegado visualmente, agrandado, sincronizado con un vídeo para crear un título, etc. En la medida en que diseñe un documento que contenga información no textual (imágenes, applets, sonidos, presentaciones multimedia, etc.), debe pensar en suplementar esa información con textos equivalentes cuando sea posible.
Un texto equivalente describe la función y finalidad del contenido. Para contenidos complejos (gráficas, gráficos, etc.) el texto equivalente debe ser más largo e incluir información descriptiva.
Deben proporcionarse textos equivalentes para los logotipos, fotografías, botones de presentación, applets, viñetas en listas, "ascii art" y en todos los vínculos contenidos en un mapa de imagen, así como en las imágenes invisibles usadas para maquetar una página.

¡Test rápido!. Un buen test para determinar si un texto equivalente es útil, es imaginar que se está leyendo en voz alta el documento por teléfono. ¿Qué diría sobre lo que encuentra en esta imagen para hacerla comprensible al interlocutor?.

3.2.1.- Revisión de las tecnologías.

Cómo se especifica un texto equivalente depende del lenguaje del documento.
Por ejemplo, dependiendo del elemento, HTML permite al desarrollador especificar textos equivalentes a través de atributos ("alt" o "longdesc") o en el contenido del elemento (el elemento "OBJECT").
Los formatos de video, como el Quicktime, permiten al desarrollador incluir una variedad de caminos alternativos visuales y auditivos. SMIL [SMIL] permite al desarrollador sincronizar de forma alternativa trozos de imagen y sonido, y archivos de texto con cada uno.
Cuando cree XML DTDs, asegúrese de que los elementos que podrían necesitar una descripción tienen alguna manera de asociarse por sí mismos a dicha descripción.
Algunos formatos de imagen permiten texto interno en el archivo de datos junto con la información visual. Si el texto está soportado por un formato de imagen (por ejemplo, Portable Network Graphics, ver [PNG], los desarrolladores de contenidos también podrían proporcionar información allí.

3.2.2.- Compatibilidad con lo anterior.

Los desarrolladores de contenidos deben tener en consideración la compatibilidad con lo anterior cuando diseñen páginas o sitios Web, puesto que: Por tanto, cuando se diseñe para tecnologías más antiguas, considere estas técnicas:

3.3.- Páginas alternativas.

Puntos de verificación en esta sección: 11.4 y 6.5.

Si bien es posible hacer accesible la mayor parte del contenido, puede ocurrir que toda o parte de una página permanezca inaccesible. Algunas técnicas adicionales para crear alternativas accesibles podrían ser:

  1. Permita al usuario navegar a otra página diferente que sea accesible, la cual será actualizada con la misma frecuencia que la página original inaccesible.
  2. En lugar de páginas alternativas estáticas, sitúe en el servidor scripts que generen versiones accesibles de la página solicitada.
  3. Consulte los ejemplos para Marcos y Scripts.
  4. Proporcione un número de teléfono, fax, dirección de correo electrónica o postal donde la información esté disponible y accesible las 24 horas del día.
He aquí dos técnicas para vincular a una página accesible:
  1. Proporcione vínculos al principio tanto de la página principal como de la alternativa, para permitir al usuario moverse entre ellas. Por ejemplo, al principio de una página gráfica incluya un vínculo con la página sólo-texto, y en el principio de ésta incluya un vínculo hacia la página gráfica. Asegúrese de que estos vínculos son una de las primeras cosas que el usuario va a tener a la vista, situándolo al principio de la página, antes que otros vínculos.
  2. Use metainformación para diseñar documentos alternativos. Los navegadores deberían ubicar la página alternativa automáticamente basándose en el tipo y preferencias del navegador del usuario. Por ejemplo, en HTML, use el elemento LINK tal y como sigue:

Ejemplo:

Las aplicaciones de usuario que soportan LINK ubicarán la página alternativa para los usuarios cuyo navegador pueda ser identificado como portador de ejecuciones "aural", "braille" o "tty".
<HEAD>
<TITLE>¡Bienvenido al Paseo Virtual!</TITLE>
<LINK title="Versión sólo-texto"
	rel="alternate"
	href="solo-texto"
	media="aural, braille, tty"
</HEAD>
<BODY><P>..........</BODY>

3.4.- Acceso desde el teclado.

Puntos de verificación en esta sección: 9.2.

No todos los usuarios tienen un entorno gráfico con un ratón u otro dispositivo para apuntar. Algunos usuarios dependen del teclado, teclado alternativo o entrada de voz para navegar entre vínculos, activar los controles de formato, etc... Los desarrolladores de contenido deberían asegurarse siempre de que el usuario pueda interactuar con una página con instrumentos diferentes de los dispositivos para apuntar. Una página diseñada para el acceso desde el teclado (además de acceso con ratón) será normalmente accesible a los usuarios con otros dispositivos de acceso. Aun más, diseñar una página para el acceso a través del teclado mejorará también usualmente el conjunto de su diseño.
El acceso desde el teclado a los vínculos y los controles de formato debe ser especificado de alguna de estas maneras:

Vínculos en los mapa de imagen:
Proporcione textos equivalentes para cada área de los mapas de imagen que están del lado del cliente, o proporcione vínculos de texto redundantes para los mapas de imagen del lado del servidor. Consultar los ejemplos de la sección de mapas de imagen.
Atajos de teclado:
Proporcione atajos de teclado de forma que los usuarios puedan combinar pulsaciones de teclas para navegar los vínculos o los controles de formato en una página. Nota: los atajos de teclado - especialmente la tecla utilizada para activar el atajo - pueden ser manejados de forma diferente por los diferentes sistemas operativos. En los aparatos bajo Windows, las teclas "alt" y "ctrl" son las más utilizadas, en tanto que bajo Macintosh, es la tecla "apple" o "clover leaf". Consultar los ejemplos de las secciones Acceso desde el teclado a los vínculos y Acceso desde el teclado a los formularios.
Orden de tabulación:
El orden de tabulación describe un orden (lógico) para navegar de vínculo a vínculo o de control de formato a control de formato (usualmente presionando la tecla "tab", de aquí el nombre). Consultar ejemplos en la sección Acceso desde el teclado a los formularios.

3.4.1.- Control independiente del dispositivo para interfaces empotradas.

Algunos elementos importan objetos (por ejemplo applets o reproductores multimedia) cuyas interfaces no pueden ser controladas a través del lenguaje de marcas. En tales casos, los desarrolladores deben proporcionar equivalentes alternativos con interfaces accesibles si los propios objetos importados no los proporcionan.

3.5.- Navegación.

Puntos de verificación para esta sección: 14.3, 13.4, 13.5, 13.3, 13.7 y 13.2.

Un estilo de presentación consistente en cada página permite a los usuarios localizar los mecanismos de navegación más fácilmente, pero también permite a los mecanismos de navegación saltar más rápidamente para encontrar los contenidos más importantes. Esto ayuda a las personas con discapacidad para el aprendizaje y la lectura, pero también facilita la navegación a todos los usuarios. Previsiblemente, aumentará la probabilidad de que la gente encuentre la información en un sitio o la evite si así lo desea.
Ejemplos de estructuras que pueden aparecer en el mismo lugar en distintas páginas:

  1. Barras de navegación.
  2. Contenido básico de una página.
  3. Publicidad.
Un mecanismo de navegación crea un conjunto de caminos que el usuario puede utilizar en un sitio. El hecho de proporcionar barras de navegación, mapas del sitio y características de búsqueda, aumentará la probabilidad de que el usuario consiga la información que busca en un sitio. Si un sitio es en sí mismo altamente visual, resultaría más difícil navegar por la estructura si el usuario no puede hacerse un mapa mental de hacia dónde se dirige o dónde ha estado. Para ayudarlo, los desarrolladores de contenidos deberían describir algunos mecanismos de navegación. Es crucial que las descripciones y guías de los sitios sean accesibles, pues los usuarios que se han perdido en un sitio dependerán mucho de ellos.
Cuando proporcionan funcionalidad en la búsqueda, los desarrolladores de contenidos deberían ofrecer mecanismos de búsqueda que satisfagan diferentes niveles de desenvolvimiento y distintas preferencias. La mayoría de ayudas en la búsqueda piden al usuario que introduzca palabras clave para buscar términos. Los usuarios con dificultades para deletrear o los no familiarizados con el idioma del sitio, tendrán dificultades para encontrar lo que necesitan si la búsqueda requiere un deletreo perfecto. Los mecanismos de búsqueda deberían incluir un revisor de deletreo, ofrecer alternativas de "la mejor opción", búsquedas mediante ejemplos de pregunta, búsquedas por similitud, etc.

3.6.- Comprensión.

Puntos de verificación en esta sección: 14.1, 13.8 y 14.2.

Las secciones siguientes exponen las técnicas para facilitar la comprensión de una página o sitio.

3.6.1.- Estilo de escritura.

Las siguientes sugerencias sobre estilos de escritura podrían ayudar a hacer el contenido de un sitio más fácil de leer para todos, y especialmente para las personas con discapacidades para la lectura y/o cognitivas. Muchas guías (incluyendo [HACKER]) exponen éstos y otros aspectos del estilo de escritura con más detalle.
  1. Esfuércese para que las descripciones de los vínculos y los encabezamientos sean claras y precisas. Ello incluye utilizar como vínculos frases concisas que tengan sentido cuando se lean fuera del contexto o como parte de una serie de vínculos (algunos usuarios navegan saltando de vínculo a vínculo y leyendo sólo el texto de estos vínculos). Utilice encabezamientos informativos, de forma que los usuarios puedan revisar rápidamente una página para hallar la información, en lugar de tener que leerla con detalle.
  2. Sitúe el contenido básico de la frase o párrafo al principio de ellos (esto es denominado "colocación inicial"). Ello ayudará tanto a la gente que está mirando superficialmente, como a los que usan sintetizadores de voz. "Hojear", aplicado a la voz, significa habitualmente que el usuario salta de encabezamiento a encabezamiento, o de párrafo a párrafo, y escucha sólo las palabras suficientes como para establecer si el trozo de información (encabezamiento, párrafo, vínculo, etc.) le interesa. Si la idea principal del párrafo está en medio o al final del mismo, los usuarios de sintetizadores de voz tendrán que escuchar casi todo el documento para encontrar lo que buscan. Dependiendo de lo que el usuario esté buscando, y de cuánto sepa sobre el tema, las características de búsqueda pueden también ayudar a los usuarios a localizar el contenido más rápidamente.
  3. Limítese a una idea por párrafo.
  4. Evite el uso de argot, jergas y significados particulares de palabras comunes, a no ser que las defina en el propio documento.
  5. Prefiera las palabras de uso común. Por ejemplo, utilice "empezar" mejor que "comenzar" o "intentar" mejor que "procurar".
  6. Evite frases de estructura complicada.
Para ayudar a determinar si su documento es fácil de leer, contemple la posibilidad de usar el medidor de lectura Gunning-Fog (descrito en [SPOOL] con ejemplos y la conexión algorítmica de [TECHHEAD]). Este algoritmo generalmente produce una puntuación menor cuando el contenido es más fácil de leer. Como demuestra el ejemplo, la Biblia, Shakespeare, Mark Twain y la Guía de Televisión tienen todos un índice Fog de alrededor de 6. El índice Fog medio de los periódicos Time, Newsweek y Wall St. Journal es de alrededor de 11. (NOTA DE TRADUCCIÓN: este ejemplo no es bien entendido por los traductores pero se mantiene por respeto al original en inglés).

3.6.2.- Equivalentes multimedia.

Para las personas que no leen bien o que no leen en absoluto, los equivalentes no textuales multimedia pueden ayudar a facilitar la comprensión. No obstante, tenga en cuenta que las presentaciones multimedia no siempre hacen el texto más comprensible y en ocasiones pueden hacerlo más confuso.
Ejemplos de multimedia que complementan al texto:
  1. Un esquema de los datos complejos, tales como las cifras de negocios del año fiscal anterior.
  2. Una traducción del texto a una presentación animada en lenguaje de señas. El lenguaje de señas es muy diferente de los idiomas verbales. Por ejemplo, algunas personas que pueden comunicarse a través del lenguaje de señas americano, no son capaces de leer inglés americano.
  3. Sonidos musicales pre-grabados, discursos hablados o efectos sonoros pueden también ayudar a los no lectores que pueden percibir presentaciones auditivas. Si bien el texto puede convertirse en discurso a través del sintetizador de voz, los cambios de la voz del discurso grabado proporcionan información que con el sintetizador de voz se pierde.

3.7.- Negociación del contenido.

Puntos de verificación en esta sección: 11.3.
  1. En lugar de incluir vínculos tales como "Aquí esta la versión francesa de este documento", use la negociación del contenido, de forma que se proporcione la versión francesa a los clientes que soliciten la versión francesa de los documentos.
  2. Si no es posible usar la negociación del contenido, indique el tipo de contenido o el idioma a través de etiquetas (por ejemplo, en HTML, utilice "type" y "hreflang").

3.8.- Refresco automático de la página.

Puntos de verificación en esta sección: 7.4 y 7.5.

A veces, los desarrolladores de contenidos crean páginas que se renuevan o cambian sin que lo pida el usuario. Este refresco automático puede resultar muy desorientador para algunos usuarios. En lugar de ello, los autores deberían (en orden de preferencia):

  1. Configurar el servidor para que utilice el código de estatus HTTP apropiado (301). Es preferible utilizar encabezamientos HTTP porque reduce el tráfico de Internet y el tiempo de descarga, ello puede ser aplicado a documentos que no sean HTML y puede ser utilizado por aplicaciones que sólo solicitan una petición de HEAD (por ejemplo, los revisores de vínculos). Del mismo modo, los códigos de estatus del tipo 30x proporcionan información del tipo "traslado permanente" ("moved permanently") o "traslado temporal" ("moved temporaly"), lo cual no puede ser dado con un refresco META.
  2. Sustituir la página que ha sido refrescada por una página fija que contenga un vínculo a la nueva página.
Nota: Tanto el punto de revisión 7.4 como en el 7.5 conllevan problemas basados en el legado de las aplicaciones de usuario. Las más modernas aplicaciones de usuario pueden invalidar el refresco y sustituirlo por un vínculo hacia la nueva información al principio de la página.

Los que siguen, son ejemplos desaconsejados en HTML. El primero cambia al usuario de página a página a intervalos regulares. Los desarrolladores de contenidos no deberían usar esta técnica para simular tecnología "avanzada". Los desarrolladores no pueden predecir cuanto tiempo necesitará el usuario para leer una página. Un refresco prematuro desorienta al usuario. Los desarrolladores de contenidos deberían evitar los refrescos periódicos y permitir a los usuarios elegir cuándo quieren la siguiente información.

 

Ejemplo desaconsejado:

<META http-equiv="refresh" content="60">
<BODY>
<P>... Información ...
</BODY>

El siguiente ejemplo HTML (usando el elemento META) envía al usuario de una página a otra después de un descanso. De cualquier manera, los desarrolladores no deberían redirigir a los usuarios con esta etiqueta, puesto que no es un estándar, los desorienta y puede interrumpir la historia de navegación de las páginas visitadas.

 

Ejemplo desaconsejado:

<HEAD>
<TITLE>¡No use esto!</TITLE>
<META http-equiv="refresh" content="5;http://www.acme.com/newpage">
</HEAD>
<BODY>
<P>Si su navegador soporta el refresco,
usted será transportado a nuestro 
<A href="http://www.acme.com/newpage">nuevo sitio</A> 
en 5 segundos, de otro modo, seleccione el vínculo
manualmente. </P>
</BODY>

3.9.- Parpadeo de la pantalla.

Puntos de verificación en esta sección: 7.1.

Una pantalla parpadeante o con destellos puede provocar ataques en usuarios con epilepsia fotosensitiva, por lo que los desarrolladores de contenidos deben evitar crearlas. Los ataques pueden ser provocados por parpadeos o destellos de frecuencia entre 4 y 59 destellos por segundo (hertzios), con una cumbre de sensibilidad en 20 destellos por segundo, así como cambios rápidos de la oscuridad a la luz (como las luces estroboscópicas).

3.10.- Documentos empaquetados.

Puntos de verificación en esta sección: 13.9.

Los paquetes de documentos pueden facilitar la lectura fuera de línea. Para crear un bloque coherente:

3.11.- Validación.

Esta sección comenta estrategias y técnicas para revisar los documentos Web y determinar los temas de accesibilidad que han sido resueltos y los que no. Estos test deberían resaltar la mayoría de los temas de accesibilidad y son valiosos para reducir un gran número de barreras de accesibilidad. No obstante, algunas de estas posibilidades de comprobación sólo reproducen condiciones causadas por una discapacidad; no simulan la experiencia integral que un usuario con discapacidad podría tener. En situaciones reales, sus páginas pueden ser menos manejables de lo que esperaba. Así pues, una de las estrategias recomienda que el desarrollador de contenidos observe a personas con diferentes discapacidades mientras intentan usar una página o sitio.
Si después de completar el test y reajustar su diseño conforme a él, todavía encuentra que su página no es accesible, probablemente debería crear una página alternativa que sea accesible.
Nota: Superar estos tests no garantiza la adecuación a las "Pautas de Accesibilidad al contenido de la Web 1.0".

3.11.1.- Validadores automáticos.

Un validador puede verificar la sintaxis de sus páginas (por ejemplo, HTML, CSS, XML). Una sintaxis correcta ayudará a eliminar parte de los problemas de accesibilidad, puesto que el programa procesará más fácilmente los documentos bien formados. Igualmente, algunos validadores pueden advertirle de algunos problemas de accesibilidad basados sólo en la sintaxis (por ejemplo, un documento que haya perdido un atributo o propiedad importante para la accesibilidad). Tenga en cuenta, no obstante, que una correcta sintaxis no garantiza que el documento será accesible. Por ejemplo, usted puede proporcionar un texto equivalente para una imagen de acuerdo con las especificaciones lingüísticas, pero el texto puede ser inexacto o insuficiente. Por tanto, algunos validadores pueden hacerle preguntas y conducirle a aspectos más subjetivos del análisis. Algunos ejemplos de validadores automáticos incluyen:
  1. Una herramienta de verificación de la accesibilidad automatizada, tal como Bobby (consultar [BOBBY]).
  2. Un servicio de verificación HTML, como el Servicio de verificación W3C HTML (consultar [HTMLVAL]).
  3. Un servicio de verificación de hojas de estilo, como el Servicio de verificación W3C CSS (consultar [CSSVAL]).

3.11.2.- Herramientas de reparación.

Normalmente, los validadores indican qué aspectos hay que resolver y, a menudo, ofrecen ejemplos de cómo resolverlos. Normalmente no ayudan al autor a afrontar el problema y resolverlo modificando el documento de forma interactiva. El Grupo de Trabajo de Evaluación y Reparación de WAI ([WAI-ER]) está trabajando para desarrollar una batería de herramientas que ayuden a los autores no sólo a identificar los problemas, sino a resolverlos interactivamente.

3.11.3.- Posibilidades del usuario.

Tenga en cuenta que la mayoría de las aplicaciones de usuario (navegadores) y sistemas operativos permiten a los usuarios configurar composiciones que cambian el modo en el que el programa se muestra, suena y funciona. Con la variedad de aplicaciones de usuario que existen, diferentes usuarios tendrán experiencias muy distintas con la Web. Por tanto:
  1. Revise sus páginas con un navegador sólo-texto como Lynx ([LYNX]) o un simulador de Lynx como el Lynx Viewer ([LYNXVIEW]) o Lynx-me ([LYNXME]).
  2. Utilice varios navegadores gráficos con:
  3. Utilice varios navegadores antiguos y nuevos. Nota: Algunos sistemas operativos o navegadores no permiten la instalación múltiple de navegadores en la misma máquina. También puede ser difícil encontrar programas antiguos de navegación.
  4. Utilice otras herramientas, tales como un navegador por voz (por ejemplo [PWWEBSPEAK] y [HOMEPAGEREADER]), un lector de pantalla (por ejemplo [JAWS] y [WINVISION]), programas de magnificación, un dispositivo pequeño, un teclado de pantalla, un teclado alternativo, etc.

3.11.4.- Revisión ortográfica y gramatical.

Una persona que lea una página con un sintetizador de voz, puede no ser capaz de descifrar la interpretación del sintetizador para una palabra con errores ortográficos. Los revisores gramaticales pueden ayudar a asegurar que el contenido del texto de la página es correcto. Ello ayudará a los lectores para los que el documento no está en su lengua nativa o los que están aprendiendo el idioma del documento. Así ayudará a incrementar la comprensión de la página.

3.12.- Soporte del navegador.

Puntos de verificación en esta sección: 11.1.

Nota: En el momento de escribir este texto, no todos las aplicaciones de usuario soportan algunos de los (nuevos) atributos y elementos de HTML 4.0 que pueden incrementar significativamente la accesibilidad de las páginas Web.

Por favor, consulte el sitio Web de W3C ([WAI-UA-SUPORT]) para información sobre navegadores y otras aplicaciones de usuario que soportan presentaciones accesibles.
En general, tenga en cuenta que las aplicaciones de usuario HTML ignoran los atributos que ellos mismos no soportan y interpretan el contenido de los elementos que no soportan.

4.- Técnicas HTML.

Las siguientes secciones hacen una relación de algunas técnicas para diseñar documentos HTML accesibles. Las secciones están organizadas por temas (y reflejan la organización de la especificación HTML 4.0 [HTML40]).

4.1.- Estructura del documento y metadatos.

Puntos de verificación en esta sección: 3.2.

Los desarrolladores de contenidos deberían usar marcación estructural y utilizarla según la especificación. Los elementos y atributos estructurales (consultar el índice de elementos y atributos HTML para identificarlos) fomentan la coherencia en los documentos y proveen de información a otras herramientas (por ejemplo, herramientas de indexación, motores de búsqueda, programas que extraen tablas de bases de datos, herramientas de navegación que usan elementos de encabezamiento y programas de traducción automática que traducen el texto de un idioma a otro).
 

4.1.1.- Metadatos.

Puntos de verificación en esta sección: 13.2.

Algunos elementos estructurales proporcionan información sobre el propio documento. Esto es denominado "metadato" sobre el documento (Metadato es información sobre datos). Los metadatos bien construidos pueden proporcionar a los usuarios importante información orientativa. Los elementos HTML que proporcionan información útil sobre un documento incluyen:

4.1.2.- Encabezamientos de sección.

Puntos de verificación en esta sección: 3.5.

Las secciones deberían iniciarse con los elementos de encabezamiento HTML (H1 - H6). Otra etiqueta puede complementar estos elementos para mejorar la presentación (por ejemplo, el elemento HR para crear una línea divisoria horizontal), pero la presentación visual no es suficiente para identificar las secciones de un documento.
Puesto que algunos usuarios hojean un documento navegando sus encabezamientos, es importante usarlos apropiadamente para expresar la estructura del documento. Los desarrolladores deberían ordenar los elementos de encabezamiento de forma apropiada. Por ejemplo, en HTML, los elementos H2 deberían seguir a los elementos H1, los H3 deberían seguir a los elementos H2, etc. Los desarrolladores de contenido no deberían "saltarse" niveles (por ejemplo, pasar directamente de H1 a H3). No utilice encabezamientos para crear efectos de fuentes. Use hojas de estilo para cambiar los estilos de fuentes, por ejemplo.
Observe que en HTML, los elementos de encabezamiento (H1 - H6) sólo inician secciones y no las incluyen como elemento del contenido. El siguiente etiquetado HTML muestra cómo deben usarse las hojas de estilo para controlar la presentación de un encabezamiento y el contenido, tal y como sigue:
 
 

Ejemplo:

<HEAD>
<TITLE>Técnicas de cocina</TITLE>
<STYLE type="text/css">
/* Sangra el encabezamiento y el contenido siguiente */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
	<H1>Técnicas de cocina</H1>
	....... algún texto aquí .....
	<DIV class="section2">
	<H2>Cocinar con aceite</H2>
	...... texto para esta sección .....
	</DIV>
	<DIV class="section2">
	<H2>Cocinar con mantequila</H2>
	...... texto para esta sección .....
	</DIV>

4.1.3.- Metadatos de vínculos y herramientas de navegación.

Puntos de verificación en esta sección: 13.2.

Los desarrolladores de contenido deberían usar el elemento LINK y los tipos de vínculos (consultar [HTML40], sección 6.12) para describir los mecanismos y organización de la navegación del documento. Algunas aplicaciones de usuario pueden sintetizar herramientas de navegación o permitir la impresión ordenada de un grupo de documentos basados en esta etiqueta.
 

Ejemplo:

Los siguientes elementos LINK podrían ser incluidos en el encabezamiento del capítulo 2 de un libro:
<LINK rel="Next" href="capitulo3">
<LINK rel="Prev" href="capitulo1">
<LINK rel="Start" href="portada">
<LINK rel="Glossary" href="glosario">

Consulte también la sección de vínculos.

4.1.4.- Agrupación estructural.

Puntos de verificación en esta sección: 12.3.

Los siguientes grupos de mecanismos HTML 4.0 contienen y facilitan la comprensión:

Todos estos mecanismos de agrupación deberían ser usados cuando sean apropiados y naturales, por ejemplo, cuando la información se dé en grupos lógicos. Los desarrolladores de contenido no deberían crear grupos de forma aleatoria, puesto que pueden confundir a los usuarios.

4.2.- Información sobre el idioma.

Puntos de verificación en esta sección: 4.1 y 4.3.

Si utiliza varios idiomas en una página, asegure que cualquier cambio de idioma esté claramente identificado, mediante el uso del atributo "lang":
 

Ejemplo:

<P>y con un cierto<SPAN lang="fr">je ne sais quoi</SPAN>,
ella entró tanto en la habitación como en su vida para siempre.
<Q>Mi nombre es Natasha</Q>dijo ella. <Q lang="it">Piacere,</Q>
respondió él en impecable italiano, cerrando la puerta.

Identificar los cambios de idioma es importante por una serie de razones:

  1. Los usuarios que estén leyendo el documento en braille podrán sustituir los códigos de control adecuados (etiquetas) cuando tengan lugar los cambios de idioma, para asegurar que el programa de traducción braille generará los caracteres correctos (por ejemplo, caracteres acentuados). Estos códigos de control previenen también que se generen contracciones braille, que confundirán más al usuario. Las contracciones braille combinan grupos de caracteres comúnmente utilizados, que usualmente aparecen en celdas múltiples, en una sola celda. Por ejemplo, "ing", que habitualmente ocupa tres celdas (una para cada letra) puede contraerse en una sola celda.
  2. De forma similar, los sintetizadores de voz que "hablan" varios idiomas, serán capaces de generar el texto con el acento y la pronunciación adecuados. Si los cambios no están señalados, el sintetizador tratará de pronunciarlos en el idioma original del programa. Así, la palabra francesa para coche, "voiture", será pronunciada "voiture".
  3. Los usuarios incapaces de traducir idiomas, obtendrán la traducción de los textos de idiomas no conocidos mediante los programas de traducción.
Es, así mismo, una buena práctica identificar el idioma original de un documento, bien con una etiqueta (como se muestra abajo) o bien a través de encabezamientos HTTP.
 

Ejemplo:

<HTML lang="es">
.... resto de un documento HTML escrito en español ....
</HTML>

4.3.- Etiquetas de texto.

Las secciones siguientes tratan los modos de agregar estructura a trozos de texto.

4.3.1.- Énfasis.

Puntos de verificación en esta sección: 3.3.

Los elementos HTML apropiados deberían ser utilizados para remarcar el énfasis: EM y STRONG.
No deberían usarse los elementos B e I, ya que se usan para crear un efecto visual de presentación. Los elementos EM y STRONG fueron diseñados para indicar un énfasis estructural, que puede ser plasmado en varios modos (cambios de estilo de fuente, cambios de inflexión del discurso, etc.).

4.3.2.- Acrónimos y abreviaturas.

Puntos de verificación para esta sección: 4.2.

Marque las abreviaturas y acrónimos con ABBR y ACRONYM y utilice "title" para indicar la expansión:
 

Ejemplo:

<P>¡Bienvenido a la <ACRONYM title="World Wide Web">WWW</ACRONYM>!

4.3.3.- Citas.

Puntos de verificación en esta sección: 3.7.

Los elementos Q y BLOCKQUOTE marcan líneas y bloques de citas, respectivamente.
 

Ejemplo:

Este ejemplo marca una cita larga con BLOCKQUOTE:
<BLOCKQUOTE cite="http://www.shakespeare.com/loveslabourlost">
	<P>¡Recompensa! 
	   ¡Oh! Esa es la palabra latina para tres peniques.
	----- William Shakespeare ("Trabajos perdidos de amor")</P>
/BLOCKQUOTE>

4.3.4.- Etiquetas y hojas de estilo mejor que imágenes: el ejemplo de las matemáticas.

Puntos de verificación en esta sección: 3.1.

El uso de etiquetas (y hojas de estilo) donde sea posible, mejor que imágenes (por ejemplo, en una ecuación matemática), promueve la accesibilidad por las siguientes razones:

Como ejemplo, considere estas técnicas para introducir matemáticas en la Web: TeX se usa habitualmente para crear documentación técnica que entonces se convierte a HTML para su publicación en la Web. Puesto que los convertidores tienden a generar imágenes, utilizan etiquetas desaconsejadas y utilizan tablas para maquetar, los responsables del contenido deberían en consecuencia:
  1. Hacer el documento TeX (o LaTeX) disponible en la Web. Hay un sistema denominado "AsTeR" ([ASTER]) que puede crear una representación auditiva de documentos TeX y LaTeX. También IBM tiene un plug-in para Nestcape e Internet Explorer que lee documentos TeX/LaTeX y algunos MathML (consultar [HYPERMEDIA]).
  2. Asegurar que el código HTML creado en el proceso de conversión es accesible. Proporcione una sola descripción de la ecuación (mejor que texto "alt" de cada imagen generada, puesto que puede haber pequeñas imágenes para partes y trozos de la ecuación).

4.3.5.- Diversas etiquetas estructurales.

La especificación HTML 4.0 define los siguientes elementos estructurales para las necesidades de diversas etiquetas:
CITE
Contiene una cita o referencia a otras fuentes.
DFN
Indica que es la definición del término adjunto.
CODE
Designa un fragmento de código informático.
SAMP
Designa una muestra del fichero de salida de un programa, script, etc.
KBD
Indica el texto que debe introducir el usuario.
VAR
Indica un ejemplo de una variable o argumento de un programa.
INS
Indica un texto insertado en un documento.
DEL
Indica un texto suprimido de un documento.

4.4.- Listas.

Puntos de verificación en esta sección: 3.6.

Los elementos de listado HTML DL, UL y OL deberían ser usados únicamente para crear listas, no para formatear efectos tales como sangría.
Las listas ordenadas ayudan a navegar a los usuarios no videntes. Los usuarios no videntes pueden "sentirse perdidos" en las listas, especialmente en las anidadas y aquellas que no especifican el nivel de anidamiento para cada ítem de la lista. Hasta que las aplicaciones de usuario proporcionen un medio para identificar claramente el contexto de la lista (por ejemplo, incluyendo el pseudo-elemento ":before" en CSS2), los desarrolladores de contenido deberían incluir pistas contextuales en sus listas.
Para listas numeradas, los números compuestos son más informativos que los simples. Así, una lista numerada "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1, ..." proporciona más contexto que la misma lista sin números compuestos, la cual se formatearía así:

1.
	1.
	2.
		1.
	3.
2.
	1.

y sería narrada como "1, 1, 2, 1, 3, 2, 1", sin aportar información sobre la profundidad de la lista.
[CSS1] y [CSS2] permiten a los usuarios controlar los estilos de números (para toda lista, no sólo las ordenadas) a través de las hojas de estilo del usuario.

Ejemplo:

La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como "1", "1.1", , "1.1.1", etc.
<STYLE type="text/css">
	UL, OL { counter-reset: item }
	LI { display: block }
	LI:before { content: counters (item, "."); counter-increment:
</STYLE>

Hasta que CSS2 sea ampliamente utilizada o las aplicaciones de usuario permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. Los usuarios no videntes pueden tener dificultades para saber dónde está el comienzo y el fin de una lista y dónde comienza cada ítem de la misma. Por ejemplo, si un apartado de la lista envuelve a la siguiente línea en la pantalla, puede parecer ser dos ítems separados en la lista. Esto puede suponer un problema para los lectores de pantalla de anteriores generaciones.

4.4.1.- Uso de hojas de estilo para cambiar las viñetas de una lista.

Para cambiar el estilo de una viñeta de una lista de ítem sin orden creada con el elemento LI, utilice hojas de estilo. En CSS, es posible especificar un estilo de viñeta fuera de párrafo (por ejemplo, 'disc') si una viñeta de imagen no puede ser colocada.
 

Ejemplo:

<HEAD>
<TITLE>Uso de hojas de estilo para cambiar viñetas</TITLE>
<STYLE type="text/css">
	UL { list-style: url (star.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
	<LI>Audrey
	<LI>Laura
	<LI>Alicia
</UL>

Para asegurar más aun que los usuarios comprenden las diferencias entre los ítems de la lista indicados visualmente, los desarrolladores de contenido deberían proporcionar una etiqueta de texto antes o después de la frase del ítem de la lista:
 

Ejemplo:

En este ejemplo, la nueva información es comunicada a través del texto ("Nuevo"), estilo de fuente (negrita) y el color (viñeta amarilla, texto rojo sobre fondo amarillo).
<HEAD>
<TITLE>Ejemplo de estilo de viñetas</TITLE>
<STYLE type="text/css">
	.newtext { font-weight: bold;
		color: red;
		background-color: yellow }
	.newbullet { list-style : url(yellow.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
	<LI class="newbullet">
	    Roth IRA<SPAN class="newtext">Nuevo</SPAN></LI>
	<LI> 401(k)</LI>
</UL>
</BODY>

Evite el uso de imágenes como viñetas de listados de definiciones creadas con DL, DT y DD. No obstante si usa este método, asegúrese de proporcionar un texto equivalente para las imágenes.

Ejemplo desaconsejado:

<HEAD>
<TITLE>Ejemplo desaconsejado que usa imágenes en listas DL</TITLE>
</HEAD>
<BODY>
<DL>
	<DD><IMG scr="star.gif" alt="* ">Audrey
	<DD><IMG scr="star.gif" alt="* ">Laura
	<DD><IMG scr="star.gif" alt="* ">Alicia
</DL>

Los desarrolladores de contenido deberían evitar los estilos de lista donde las viñetas proporcionen información (visual) adicional. No obstante, si se hace, asegúrese de proporcionar un texto equivalente que describa el significado de la viñeta:

Ejemplo desaconsejado:

<DL>
	<DD><IMG scr="red.gif" alt="New">Roth IRA</DD>
	<DD><IMG scr="yellow.gif" alt="Viejo">401(k)</DD>
</DL>

4.5.- Tablas.

Esta sección trata la accesibilidad de las tablas y elementos que se pueden poner en un elemento TABLE. Se tratan dos tipos de tablas: tablas usadas para organizar datos y tablas usadas para crear una disposición visual de la página.

4.5.1.- Tablas de datos.

Puntos de verificación en esta sección: 5.5, 5.1, 5.2 y 5.6.

Los desarrolladores de contenido pueden hacer las tablas de datos HTML 4.0 más accesibles de varias maneras:

El siguiente etiquetado permitirá a los navegadores accesibles y a otras aplicaciones de usuario reestructurar o navegar las tablas de un modo no visual.
Para información sobre los encabezamientos de tabla, consulte el algoritmo encabezamiento de tablas y el debate sobre la Recomendación HTML 4.0 ([HTML40], sección 11.4.3).
 

Ejemplo:

Este ejemplo muestra cómo asociar celdas de datos (creadas con TD) con sus correspondientes encabezamientos a través del atributo "headers". El atributo "headers" especifica una lista de celdas de encabezamiento (etiquetas de fila y columna) asociadas con los datos actuales de la celda. Ello requiere que cada encabezamiento de celda tenga un atributo "id".
<TABLE border="1"
	summary="Esta tabla esquematiza el número de tazas de café
	consumidas por cada senador, el tipo de café
	(descafeinado o normal) y si es tomado con azúcar">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
	<TH id="header1">Nombre</TH>
	<TH id="header2">Tazas</TH>
	<TH id="header3" abbr="Tipo">Tipo de café</TH>
	<TH id="header4">¿Azúcar?</TH>
<TR>
	<TD headers="header1">T. Sexton</TD>
	<TD headers="header2">10</TD>
	<TD headers="header3">Expreso</TD>
	<TD headers="header4">No</TD>
<TR>
	<TD headers="header1">J. Dinnen</TD>
	<TD headers="header2">5</TD>
	<TD headers="header3">Descafeinado</TD>
	<TD headers="header4">Sí</TD>
</TABLE>

Un sintetizador de voz podría interpretar esta tabla como sigue:

Título: Tazas de café consumidas por cada senador.
Resumen: Esta tabla esquematiza el número de tazas de café
consumidas por cada senador, el tipo de café (descafeinado o normal)
y si es tomado con azúcar.
Nombre: T. Sexton; Tazas: 10; Tipo: Expreso; Azúcar: No.
Nombre: J. Dinnen; Tazas; 5; Tipo: Descafeinado; Azúcar: Si.
Una aplicación de usuario visual mostraría esta tabla así:

Tabla de doble entrada sobre consumo de café.  
[Descripción de la tabla de café]

El siguiente ejemplo asocia las mismas celdas de encabezamiento (TH) y datos (TD) como antes, pero esta vez utiliza el atributo "scope" en lugar de "headers". "Scope" debe tener uno de los siguientes valores: "row", "col", "rowgroup" o "colgroup". "Scope" especifica la batería de celdas de datos que han de asociarse con la celda de encabezamiento correspondiente. Este método es particularmente útil para tablas simples. Debería tenerse en cuenta que la versión hablada de esta tabla podría ser idéntica a la del ejemplo anterior. La elección entre los atributos "headers" y "scope" depende de la complejidad de la tabla. No afecta al resultado en la medida en que en la etiqueta haya quedado clara la relación entre el encabezamiento y las celdas de datos.

Ejemplo:

<TABLE border="1"summary="Esta es una tabla gráfica ...">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
	<TH scope="col">Nombre</TH>
	<TH scope="col">Tazas</TH>
	<TH scope="col" abbr="Tipo">Tipo de café</TH>
	<TH scope="col">¿Azúcar?</TH>
<TR>
	<TD>T. Sexton</TD>
	<TD>10</TD>
	<TD>Expreso</TD>
	<TD>No</TD>
<TR>
	<TD>J. Dinnen</TD>
	<TD>5</TD>
	<TD>Descafeinado</TD>
	<TD>Sí</TD>
</TABLE>

El siguiente ejemplo muestra cómo crear categorías en una tabla usando el atributo "axis".

Ejemplo:

<TABLE border="1">
<CAPTION>Informe de gastos de viaje</CAPTION>
<TR>
	<TH></TH>
	<TH id="header2" axis="gastos">Comidas
	<TH id="header3" axis="gastos">Hoteles
	<TH id="header4" axis="gastos">Transporte
	<TD>subtotales</TD>
<TR>
	<TH id="header6" axis="lugar">San José
	<TH> <TH> <TH> <TD>
<TR>
	<TD id="header7" axis="fecha">25 de agosto de 1997
	<TD headers="header6 header7 header2">37.34
	<TD headers="header6 header7 header3">112.00
	<TD headers="header6 header7 header4">45.00
<TR>
	<TD id="header7" axis="fecha">26 de agosto de 1997
	<TD headers="header6 header8 header2">27.28
	<TD headers="header6 header8 header3">112.00
	<TD headers="header6 header8 header4">45.00
<TR>
	<TD>subtotales
	<TD>65.02
	<TD>224.00
	<TD>90.00
	<TD>379.02
<TR>
	<TH id="header10" axis="lugar">Seattle
	<TH> <TH> <TH> <TD>
<TR>
	<TD id="header11" axis="fecha">27 de agosto de 1997
	<TD headers="header10 header11 header2">96.25
	<TD headers="header10 header11 header3">109.00
	<TD headers="header10 header11 header4">36.00
<TR>
	<TD id="header12" axis="fecha">26 de agosto de 1997
	<TD headers="header10 header12 header2">35.00
	<TD headers="header10 header12 header3">109.00
	<TD headers="header10 header12 header4">36.00
<TR>
	<TD>subtotales
	<TD>131.25
	<TD>218.00
	<TD>72.00
	<TD>421.25
<TR>
	<TH>Totales
	<TD>196.27
	<TD>442.00
	<TD>162.00
	<TD>800.27
</TABLE>

Esta tabla lista los gastos de viaje en dos lugares, San José y Seattle, por fecha y categoría (comidas, hoteles y transporte). La siguiente imagen muestra cómo la mostraría una aplicación de usuario visual.

Tabla de gastos en viajes.
[Descripción de la tabla de viaje]

4.5.2.- Evite las tablas para maquetar.

Puntos de verificación en esta sección: 5.3 y 5.4.

Los autores deberían utilizar hojas de estilo para maquetar y posicionar. De cualquier modo, cuando es necesario usar tabla para maquetar, la tabla debe alinearse en un orden legible. Cuando se alinea una tabla, los contenidos de las celdas se convierten en series de párrafos (por ejemplo, página abajo) uno tras otro. Las celdas deben tener sentido cuando se leen en orden (en modo vertical u horizontal) y deberían incluir elementos estructurales (que creen párrafos, encabezamientos, listas, etc.) de modo que la página tenga sentido al ser alineada.
Igualmente, cuando se utilicen tablas para maquetar, no utilice etiquetas estructurales para crear formatos visuales. Por ejemplo, el elemento TH (table header = encabezamiento de tabla) se despliega visualmente centrado y en negrita. Si una celda no es realmente el encabezamiento de una fila o columna de datos, utilice hojas de estilo o atributos de formateo del elemento.

4.5.3.- Texto insertado en tablas.

Puntos de verificación en esta sección: 10.3.

Las tablas utilizadas para maquetar páginas y algunas tablas de datos donde la celda tiene insertado texto, plantean problemas para los lectores de pantalla antiguos, que no interpretan el código fuente HTML o para los navegadores que no permiten la navegación por celdas individuales de tablas. Estos lectores de pantalla leerán la página, leyendo las frases de una misma fila pero diferente columna como si fueran una sola frase.

Por ejemplo, si una tabla aparece así en la pantalla:

Hay un 30% de posibilidad de que           Las clases de la Universidad de Wisconsin se
llueva esta mañana, pero ellos             reanudarán el 3 de septiembre.
deberían parar antes del fin de semana.

El lector de pantalla la leería como:

Hay un 30% de posibilidad de que las clases de la Universidad de Wisconsin se
llueva esta mañana, pero ellos reanudarán el 3 de septiembre.
deberían parar antes del fin de semana.

Los lectores de pantalla que leen el código fuente HTML reconocerán la estructura de cada celda, pero para los lectores de pantalla antiguos, los desarrolladores de contenido pueden minimizar el riesgo de enmarañar las palabras limitando la cantidad de texto de cada celda. También, los trozos más largos de texto deberían estar todos en la última columna (en la más cercana a la derecha en las tablas que se lean de izquierda a derecha). De esta forma todavía se podrán leer con coherencia. Los desarrolladores de contenido deberían comprobar la inserción de texto en las tablas con una ventana de navegador de dimensiones "640x480".
Puesto que la etiqueta de tabla es estructural, y nosotros sugerimos separar la estructura de la presentación, recomendamos usar hojas de estilo para maquetar, alinear y crear efectos de presentación. Así pues, las dos columnas del ejemplo anterior podrían haber sido creadas usando hojas de estilo. Por favor, consulte la sección de hojas de estilo para más información.
¡Test rápido! Para entender mejor cómo un lector de pantalla leería una tabla, coloque un trozo de papel sobre la página y lea la tabla línea a línea.

4.5.4.- Cuestiones de compatibilidad con lo anterior para tablas.

En los navegadores HTML 3.2, las filas de un elemento TFOOT aparecerán antes que el cuerpo de la tabla.

4.6.- Vínculos.

Puntos de verificación en esta sección: 13.1 y 13.6.

Un buen vínculo de texto no debería ser demasiado genérico; no utilice "pulse aquí". Esta frase no sólo es dependiente de un dispositivo (implica un dispositivo de apuntamiento) sino que no indica nada acerca de lo que se encontrará si se sigue el vínculo. En lugar de "pulse aquí", el texto del vínculo debería indicar la naturaleza del objetivo del vínculo, como en "más información sobre los leones marinos" o "versión sólo-texto de esta página". Tenga en cuenta que, para este último caso (y documentos específicos con otro formato o idioma), se insta a los desarrolladores de contenido a usar la negociación del contenido como alternativa, de forma que los usuarios que prefieran las versiones de texto las obtengan automáticamente.
Además de textos claros en los vínculos, los desarrolladores de contenido deben especificar un valor del atributo "title" que clara y concisamente describa el objetivo del vínculo.
Si hay más de un vínculo en una página con el mismo texto, todos estos vínculos deben remitir al mismo recurso. Esta coherencia ayudará al diseño de la página tanto como a la accesibilidad.
Si dos o más vínculos comparten el mismo texto pero van referidos a objetivos diferentes, distinga los vínculos especificando un valor diferente para el atributo "title" de cada elemento A.
Los "usuarios auditivos" -- personas ciegas, con dificultades de visión o que utilizan mecanismos con dispositivos de exposición pequeños o sin ellos -- son incapaces de revisar rápidamente una página con sus ojos. Para tener una visión rápida de la página o encontrar rápidamente un vínculo, estos usuarios a menudo saltarán de un vínculo a otro o revisarán una lista de vínculos disponibles en una página.
Así pues, para una serie de vínculos relacionados, incluya información introductoria en el primer vínculo e información distintiva en los vínculos siguientes. Ello proporcionará información contextual para los usuarios que los leen en orden secuencial.

Ejemplo:

<A href="my-doc.html">Mi documento está disponible en HTML</A>
<A href="my-doc.pdf" title="Mi documento en PDF">PDF</A>
<A href="my-doc.txt" title="Mi documento en texto>Texto plano</A>

Cuando se use una imagen como contenido de un vínculo, especifique un texto equivalente para la imagen.

Ejemplo:

<A href="routes.html">
	<IMG src="topo.gif"
	 alt="Rutas actuales al Gimnasio Boulders Climbing"
</A>

4.6.1.- Vínculos de agrupación y desviación.

Cuando los vínculos se agrupan en conjuntos lógicos (por ejemplo, en una barra de navegación que aparezca en todas las páginas de un sitio), deberían estar etiquetados como una unidad. Las barras de navegación son normalmente lo primero que uno encuentra en una página. Para los usuarios con sintetizador de voz, ello implica tener que escuchar una serie de vínculos en todas las páginas antes de llegar a los contenidos interesantes de una página. Hay varios caminos para permitir a los usuarios obviar grupos de vínculos (tal y como hacen los usuarios videntes cuando ven el mismo comienzo en cada página):

En el futuro, las aplicaciones de usuario permitirán saltar sobre los elementos tales como las barras de navegación.
En HTML, utilice los elementos DIV, SPAN, P o FRAME para agrupar vínculos e identifique el grupo con los atributos "id" o "class".

Ejemplo:

En este ejemplo, el elemento P agrupa un conjunto de vínculos, el atributo "class" lo identifica como una barra de navegación (por ejemplo, para las hojas de estilo), "tabindex" está colocado en el punto de destino a continuación del grupo, y un vínculo al principio del grupo enlaza con el punto de destino posterior al grupo.
<HEAD>
<TITLE>Cómo usar nuestro sitio</TITLE>
</HEAD>
<BODY>
<P class="nav">
	[<A href="#como">Saltar la barra de navegación</A>]
	[<A href="inicio.html">Inicio</A>]
	[<A href="buscar.html">Busqueda</A>
	[<A href="nuevo.html">Nuevo y destacado</A>]
	[<A href="mapadelsitio.html">Mapa del sitio</A>]
</P>
<H1><A name="como" tabindex="1">Cómo usar nuestro sitio</A></H1>
<!--contenido de la página-->
</BODY>

4.6.2.- Acceso desde el teclado.

El acceso desde el teclado a los elementos activos de una página es importante para muchos usuarios que no pueden usar dispositivos de apuntamiento. Las aplicaciones de usuario pueden incluir características que permitan a los usuarios unir pulsaciones de teclado a ciertas acciones. HTML 4.0 permite también a los desarrolladores de contenido especificar atajos de teclado en los documentos a través del atributo "tabindex".

Ejemplo:

En este ejemplo, si el usuario activa la tecla "C", activará el vínculo.
<A accesskey="C" href="doc.html" hrefflang="en"
title="Página principal de la compañía XYZ">
Página principal de la compañía XYZ</A>

4.7.- Imágenes y mapas de imagen.

Las siguientes secciones tratan la accesibilidad de imágenes (incluyendo animaciones simples, tales como las animaciones GIF) y mapas de imagen.
Para información sobre las matemáticas presentadas como imágenes, consulte la sección usar etiquetas de texto y hojas de estilo mejor que imágenes.

4.7.1.- Textos equivalentes para imágenes.

Puntos de verificación en esta sección: 1.1.

Cuando utilice IMG, especifique un texto equivalente breve con el atributo "alt". El valor de este atributo es denominado "alt-text".

Ejemplo:

<IMG src="lupa.gif" alt="Búsqueda">

Cuando utilice OBJECT, especifique un texto equivalente en el cuerpo del elemento OBJECT:

Ejemplo:

<OBJECT data="lupa.gif" type="image/gif">
	Búsqueda
</OBJECT>

Cuando un breve texto equivalente no es suficiente para transmitir adecuadamente la función o papel de una imagen, proporcione información adicional en un archivo designado por el atributo "longdesc":

Ejemplo:

<IMG src="ventas97.gif" alt="Ventas en 1997"
longdesc="ventas97.html">

En el archivo ventas97.html: Un gráfico muestra cómo progresaron las ventasen 1997.
El gráfico es un gráfico de barras que muestra los incrementos porcentuales de las ventas por meses. Las ventas en enero se incrementaron un 10% sobre diciembre de 1996, las ventas en febrero cayeron un 3%,...

Para aplicaciones de usuario que no ejecutan "longdesc", proporcione un vínculo descriptivo también al lado del gráfico:

Ejemplo:

<IMG src="ventas.gif" alt="Ventas en 1997" longdesc="ventas.html">
<A href="ventas.html"
title="Descripción de la ilustración de las ventas de 1997">[D]</A>

Cuando utilice OBJECT, especifique el texto equivalente más extenso en el contenido del elemento:

Ejemplo:

<OBJECT data="ventas97.gif" type="image/gif">
Las ventas en 1997 bajaron como consecuencia de nuestra
	<A href="anticipado.html">adquisición anticipada</A>
</OBJECT>

Observe que el contenido de OBJECT, a diferencia del texto en "alt", puede incluir etiquetas. Así pues, los desarrolladores de contenido pueden proporcionar un vínculo hacia información adicional desde el elemento OBJECT:

Ejemplo:

<OBJECT data="ventas97.gif" type="image/gif">
   Gráfico de nuestras ventas en 1997.
   Una <A href="desc.html">descripción textua </A> está disponible.
</OBJECT>

4.7.2.- Vínculos-d invisibles.

Nota: los vínculos-d invisibles están desaconsejados, prefiriendo el atributo "longdesc".

Un vínculo-d invisible es una imagen pequeña (1 pixel) o transparente cuyo valor del atributo "alt" es "vínculo-d" o "D" y es una parte del contenido de un elemento A. Al igual que otros vínculos-d, se refiere a un texto equivalente asociado a una imagen. Al igual que otros vínculos, los usuarios pueden etiquetarlo. Así pues, los vínculos-d invisibles proporcionan una solución (temporal) para los diseñadores que desean evitar los vínculos-d visibles por razones de estilo.

4.7.3.- Ascii art.

Puntos de verificación en esta sección: 13.10.

Evite el ascii art (ilustración mediante caracteres) y utilice en su lugar imágenes reales, puesto que es más fácil proporcionar texto equivalente para imágenes. De todas maneras, si debe utilizar ascii art, debe proporcionarse un vínculo para saltar sobre él , tal y como se muestra a continuación:

Ejemplo:

<P>
<A href="#post-art">Saltar el ascii art</A>
<!-- Aquí el ASCII art -->
<A name="post-art">Título del ASCII art</A>

El ASCII art puede también ser etiquetado de la siguiente manera [salte sobre la figura ascii o consulte la descripción del gráfico]:

Ejemplo:

      %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
    100 |             *                             |
     90 |                *  *                       |
     80 |          *           *                    |
     70 |             @           *                 |
     60 |          @                 *              |
     50 |       *        @              *           |
     40 |                   @              *        |
     30 |    *  @              @  @           *     |
     20 |                                           |
     10 |    @                       @  @  @  @     |
          0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
          Frecuencia de parpadeo (Hertzios)

Otra opción para ascii art más pequeños, es usar el elemento ABBR con el atributo "title".

Ejemplo:

<P><ABBR title="sonrisa en ascii art"></ABBR>

Si el ASCII art es complejo, asegúrese de que el texto equivalente lo describe adecuadamente.
Otra manera de sustituir el ascii art es usar sustitutivos del lenguaje humano. Por ejemplo, <guiño> podría sustituir a una sonrisa con guiño: ;-). O las palabras "por tanto" pueden sustituir a las flechas realizadas con guiones y el signo "mayor que" (por ejemplo: --->) y la palabra "dados" para la poco común abreviatura "da2".

4.7.4.- Mapas de imagen.

Un mapa de imagen es una imagen que tiene "zonas activas". Cuando un usuario selecciona una de las zonas, tiene lugar alguna acción (se sigue un vínculo, se envía información al servidor, etc.) -- para hacer accesible un mapa de imagen, los desarrolladores de contenido deben asegurarse de que cada acción asociada con una zona visual pueda ser activada sin un dispositivo de apuntamiento.
Los mapas de imagen se crean con el elemento MAP. HTML permite dos tipos de mapas de imagen: los del lado del cliente (el navegador del usuario procesa una URI) y los del lado del servidor (el servidor procesa las coordenadas pulsadas). Para todos los mapas de imagen, los desarrolladores de contenido deben proporcionar un texto equivalente.
Los desarrolladores de contenido deberían crear mapas de imagen del lado del cliente (con "usemap") mejor que del lado del servidor (con "ismap"), ya que los mapas de imagen del lado del servidor precisan de un dispositivo de entrada específico. Si se deben usar mapas de imagen del lado del servidor (por ejemplo, porque la geometría de la zona no puede ser representada con valores del atributo "shape") los autores deben proporcionar la misma función o información en un formato alternativo accesible. Una forma de conseguir esto, es proporcionar un vínculo de texto para cada zona activa, de forma que cada vínculo pueda ser navegado con el teclado. Si se debe utilizar un mapa de imagen del lado del servidor, por favor consulte la sección mapas de imagen del lado del servidor.

4.7.5.- Mapas de imagen del lado del cliente.

Puntos de verificación en esta sección: 1.5, 9.1 y 10.5.

Proporciones textos equivalentes para los mapas de imagen que transmitan información visual.
Si se utiliza AREA para crear el mapa, utilice el atributo "alt":

Ejemplo:

<IMG src="bienvenido.gif" 
  	alt="Mapa de imagen de las zonas de la biblioteca"
	usemap="#mapa1">
<MAP name="mapa1">
	<AREA shape="rect" coords="0,0,30,30"
		href="consulta.html" alt="Zona de Consulta">
	<AREA shape="rect" coords="34,34,100,100"
		href="media.html" alt="Laboratorio Audiovisual"
</MAP>

El ejemplo siguiente ilustra la misma idea, pero utiliza OBJECT en lugar de IMG para insertar la imagen, con el fin de proporcionar más información sobre la misma:

Ejemplo:

<OBJECT data="bienvenido.gif" type="image/gif" usemap="#mapa1">
Hay muchas zonas en la biblioteca que incluyen la sección de
<A href="consulta.html">Zona de Consulta</A> y la del
<A href="media.html">Laboratorio Audiovisual</A>.
</OBJECT>
<MAP name="mapa1">
  <AREA shape="rect" coords="0,0,30,30"
    href="consulta.html" alt="Zona de Consulta">
  <AREA shape="rect" coords="34,34,100,100"
    href="media.html" alt="Laboratorio Audiovisual"
</MAP>

Además de proporcionar un texto equivalente, proporcione vínculos de texto redundantes. Si se usa el elemento A en lugar de AREA, el desarrollador de contenido puede describir las zonas activas y proporcionar vínculos redundantes al mismo tiempo:

Ejemplo:

<OBJECT data="navbar1.gif" type="image/gif" usemap="#mapa1">
<MAP name="mapa1"
<P>Navegar el sitio.
  [<A href="guia.html" shape="rect"
    coords="0,0,118,28">Guía de acceso</A>]
  [<A href="atajo.html" shape="rect"
    coords="118,0,184,28">Ir</A>]
  [<A href="busqueda.html" shape="circle"
    coords="184,200,60">Búsqueda</A>]
  [<A href="10mejores.html" shape="poly"
    coords="276,0,276,28,100,200,50,50,276,0"> Los 10 mejores</A>]
</MAP>
</OBJECT>

Observe que, en el ejemplo anterior, el elemento MAP es el contenido del elemento OBJECT, de forma que los vínculos alternativos sólo se activarán si el mapa de imagen (navbar1.gif) no lo hace.
Observe también que los vínculos han sido separados por corchetes ([]). Ello es para prevenir que los lectores de pantalla antiguos lean vínculos adyacentes distintos como si fueran sólo uno, así como para ayudar a los usuarios videntes a distinguir visualmente los diferentes vínculos.
Los desarrolladores de contenido deberían asegurarse de incluir caracteres imprimibles (tales como corchetes o una barra vertical (|) rodeados de espacios en blanco entre los vínculos adyacentes.

4.7.6.- Mapas de imagen del lado del servidor.

Puntos de verificación en esta sección: 1.2.

Cuando se deba utilizar un mapa de imagen del lado del servidor, los desarrolladores de contenido deberían proporcionar una lista alternativa de elección de mapas de imagen. Hay tres técnicas:

Ejemplo:

<A href="http://miservidor.com/cgi-bin/mapaimagen/mi-mapa">
<IMG src="bienvenido.gif" alt="¡Bienvenido!
  ("Siga los vínculos de texto)" ismap>
</A>
<P>[<A href="consulta.html">Consulta</A>]
   [<A href="media.html">Laboratorio Audiovisual</A>]
Los mapas de imagen del lado del servidor y del lado del cliente, pueden ser usados como botones de acceso en formularios. Para más información, consulte la sección botones gráficos.

4.8.- Applets y otros objetos programados.

Aunque los applets pueden incluirse en un documento tanto con el elemento APPLET como con OBJECT, el método preferido es OBJECT.

4.8.1.- Textos equivalentes para applets y otros objetos programados.

Si utiliza OBJECT, proporcione un texto equivalente en el contenido del elemento:

Ejemplo:

<OBJECT classid="java:Press.class" width="500" height="500">
A medida que la temperatura aumenta, las moléculas del globo...
</OBJECT>

Un ejemplo más complejo se beneficia del hecho de que los elementos OBJECT pueden ser incrustados para representaciones alternativas de información:

Ejemplo:

<OBJECT classid="java:Press.class" width="500" height="500">
  <OBJECT data="Presion.mpeg" type="video/mpeg">
    <OBJECT data="Presion.gif" type="image/gif">
    A medida que la temperatura aumenta, las moléculas del globo...
    </OBJECT>
  </OBJECT>
</OBJECT>

Si utiliza APPLET, proporcione un texto equivalente con el atributo "alt" y en el contenido del elemento APPLET. Ello permite que el contenido se transforme satisfactoriamente para aquellas aplicaciones de usuario que sólo soportan uno de los dos mecanismos ("alt" o contenido).

Ejemplo desaconsejado:

<APPLET code="Press.class" width="500" heigth="500"
  alt="Java applet: como afecta la temperatura a la presión">
  A medida que la temperatura aumenta, las moléculas del globo...
</APPLET>

4.8.2.- Applets directamente accesibles.

Puntos de verificación en esta sección: 8.1.

Si un applet (creado con OBJECT o con APPLET) requiere interacción del usuario (por ejemplo, la capacidad de manipular un experimento físico) que no puede ser duplicado en un formato alternativo, haga el applet directamente accesible.
Para mayor información sobre el desarrollo de applets accesibles. por favor consulte [JAVAACCESS] o [IBMJAVA]. Estas compañías han estado desarrollando un API de Accesibilidad, así como haciendo accesible los de tipo JAVA SWING.

4.8.3.- Sonido e imagen producidos por objetos dinámicos.

Puntos de verificación en esta sección: 8.1 y 1.4.

Proporcione un texto equivalente como para una imagen y descripciones audibles de la información visual y subtítulos donde sea necesario. Si un applet crea una secuencia de imágenes, los desarrolladores de contenido deberían proporcionar un mecanismo para congelar esta secuencia (para obtener un ejemplo, consulte [TRACE]. Igualmente, por favor, consulte la siguiente sección para información sobre la manera de hacer accesibles las presentaciones sonoras y visuales.

4.9.- Audio y video.

4.9.1.- Información sonora.

Las presentaciones sonoras deben ir acompañadas por transcripciones del texto, equivalentes textuales de los sonidos que tienen lugar. Cuando estas transcripciones se presentan de forma sincronizada con la presentación visual, se denominan subtítulos y son utilizados por las personas que no pueden escuchar la banda sonora del material visual.
Algunos formatos de medios (por ejemplo, QuickTime 3.0 y SMIL) permiten añadir subtítulos y descripciones de las imágenes a los clips multimedia. SAMI permite que se añadan subtítulos. El ejemplo siguiente demuestra que los subtítulos deberían incluir los diálogos y otros sonidos ambientales que ayuden a los espectadores a entender lo que está ocurriendo.

Ejemplo:

Los subtítulos para una escena de "E.T.". El teléfono suena tres veces y entonces es respondido.

[el teléfono suena]

[ring]

[ring]

[¿Dígame?]

 

Hasta que el formato que está usando soporte vías alternativas, podría ofrecer dos versiones de la película, una con subtítulos e imágenes descriptivas y otra sin ello. Algunas tecnologías, como SMIL y SAMI, permiten archivos sonoros y visuales separados para combinarlas con los archivos de texto a través del archivo de sincronización para crear audio y películas subtitulados.
Algunas tecnologías también permiten al usuario elegir diferentes tipos de subtítulos para adecuarlos a sus capacidades lectoras. Para más información, vea las especificaciones SMIL 1.0 ([SMIL]).

Pueden proporcionarse equivalentes para los sonidos en forma de una frase de texto en la página que vincula a una transcripción de texto o una descripción del archivo de sonido. El vínculo hacia la transcripción debería aparecer en un lugar claramente visible, como el principio de la página. De todas maneras, si un script incorpora automáticamente un sonido, debería también disponer de una indicación visual de que el sonido está teniendo lugar y proporcionar una descripción o transcripción del sonido.

Nota: Esta técnica está rodeada de alguna controversia, porque el navegador debería incorporar la forma visual de la información en lugar de la forma sonora si así lo han determinado las preferencias del usuario. No obstante, las estrategias de trabajo deben también tener en cuenta los navegadores existentes hoy en día.

Para más información, por favor consulte [NCAM].

4.9.2.- Información visual y movimiento.

Puntos de verificación en esta sección: 1.3 y 7.3.

Las descripciones sonoras de la banda visual proporcionan una narración de los elementos visuales claves sin interferir con el sonido o el diálogo de una película. Los elementos visuales clave incluyen acciones, escenarios, lenguaje corporal, gráficos y el texto mostrado. Las descripciones auditivas son utilizadas, primordialmente, por las personas ciegas para seguir la acción y la información no auditiva en el material visual.

Ejemplo:

He aquí un ejemplo de una cita de texto transcrito de una escena de "El Rey León", (disponible en [DVS]). Observe que el narrador proporciona una descripción auditiva de la banda visual y que la descripción ha sido integrada en la transcripción.

Simba: ¡Eh!

Narrador: Simba sale corriendo, seguido por sus padres. Sarabi sonríe y empuja suavemente a Simba hacia su padre. Ambos, uno al lado del otro, observan el amanecer dorado.

Mufasa: Mira, Simba, todo lo que toca la luz es nuestro reino.

Simba: ¡Guau!

Nota. Si no hay información visual importante, por ejemplo, una cabeza parlante animada que describe (a través de discurso pregrabado) como utilizar el sitio, no es necesaria una descripción sonora.

Para películas, proporcione descripciones sonoras que estén sincronizadas con el sonido original. Consulte la sección información sonora para más información sobre formatos multimedia.

4.9.3.- Cita de textos transcritos.

Las citas de textos transcritos permiten el acceso de las personas con discapacidades tanto visuales como auditivas. También proporcionan a cualquier persona la posibilidad de indexar y buscar información contenida en materiales audiovisuales.
Las citas de textos transcritos incluyen diálogos hablados, así como cualquier otro sonido significativo, aparezca o no en pantalla: música, risas, aplausos. etc. En otras palabras, todo el texto que aparece en subtítulos, así como las descripciones que se proporcionan en la narración sonora.

4.9.4.- Textos equivalentes para multimedia.

Cuando sea necesario, se debería proporcionar un texto equivalente sobre la información visual, para permitir la comprensión de la página. Por ejemplo, piense en una animación periódica que muestra nubes y lluvias como parte de un informe sobre el estado del tiempo. Puesto que la animación suplementa el resto del informe del tiempo (que está presentado en lenguaje natural-texto), es innecesaria una descripción muy larga de la animación. No obstante, si la animación aparece en un marco pedagógico en el que los estudiantes están aprendiendo sobre las formaciones nubosas en relación con la masa terrestre, la animación debe ser descrita para aquellos que no puedan verlas, pero también para aquellos que quieren aprender la lección.
Vea también la sección sobre estilo de texto para controlar los parpadeos.

4.9.5.- Objetos multimedia empaquetados.

Otros objetos, como aquellos que precisan un plug-in, podrían también usar el elemento OBJECT. No obstante, para una compatibilidad retrospectiva con los navegadores Netscape, utilice el elemento patentado EMBED con el elemento OBJECT, tal y como se explica a continuación:

Ejemplo:

<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
  codebase="http://site.com/content.cab" width=100 height=80>
<PARAM name="Pelicula" value="nombrepelicula.swf">
  <EMBED src="nombrepelicula.swf" width=100 height=80
    pluginpage="http://www.macromedia.com/shockwave/download/">
  </EMBED>
  <NOEMBED>
    <IMG alt="Fotogramas de la película"
      scr="nombrepelicula.gif" width=100 height=80>
  </NOEMBED>
</OBJECT>

Para más información, consulte [MACROMEDIA].

4.10.- Marcos.

Para los usuarios videntes, los marcos pueden organizar una página en zonas diferentes. Para los usuarios no videntes, la relación entre los contenidos de los marcos (por ejemplo, un marco tiene una tabla de contenidos, otra los contenidos propiamente dichos) debe ser transmitida por otros medios.
Los marcos, tal  y como se implementan actualmente (con los elementos FRAMESET, FRAME e IFRAME) resultan problemáticos por múltiples razones: En las siguientes secciones, tratamos cómo hacer los marcos más accesibles. También proporcionamos una alternativa a los marcos que utilizan HTML 4.0 y CSS, y estudian muchas de las limitaciones de las implementaciones actuales de los marcos.

4.10.1.- Titule los marcos para fácil orientación.

Puntos de verificación en esta sección: 12.1.

Ejemplo:

Utilice el atributo "title" para nombrar los marcos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un documento sencillo con marcos</TITLE>
</HEAD>
<FRAMESET cols="10%,90%" 
  title="Nuestra biblioteca de documentos electrónicos">
    <FRAME src="nav.html" title="Barra de navegación">
    <FRAME src="doc.html" title="Documentos">
    <NOFRAMES>
      <A href="lib.html" title="Vínculo a la biblicoteca">
      Seleccione para ir a la biblioteca electrónica</A>
    </NOFRAMES>
</FRAMESET>

4.10.2.- Textos equivalentes para marcos.

Puntos de verificación en esta sección: 12.2.

Ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Noticas de hoy</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%"
<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" 
       title="Promociones"
<FRAME src="sitenavbar.html" name="navbar"
       title="Barra de navegación del sitio" 
       longdesc="frameset-desc.html#navbar>
</FRAMESET>
<FRAME src="notica.html" 
	name="noticia" 
       title="Selecione noticia - contenido principal"
       longdesc="frame-desc.html#noticia">
<FRAMESET rows="*,20%">
<FRAME src="titulares.html" name="indice"
       title="Índice de otros titulares nacionales"
       longdesc="frameset-desc.html#titulares">
<FRAME src="ad.html" name="adspace" title="Anuncio">
</FRAMESET>
<NOFRAMES>
<p><a href="noframes.html">Versión sin marcos</a></p>
<p><a href="frameset-desc.html">Descripción de los marcos</a></p>
</NOFRAMES>
</FRAMESET>
</HTML>
El archivo frameset-desc.html debería decir algo como:
#Navbar - Este marco proporciona vínculos a las secciones
principales del sitio: noticias del mundo, noticias nacionales,
noticias locales, noticias tecnológicas y noticias
de ocio.

#Noticia - Este marco muestra la noticia seleccionada en ese
momento.

#Titulares - Este marco proporciona vínculos a los titulares de
las noticias de hoy en esta sección.

Observe que, si el contenido del marco cambia, no se podrá aplicar más el texto equivalente. Igualmente, los vínculos a las descripciones de un marco deberían estar provistos de otro contenido alternativo en el elemento NOFRAMES de un FRAMESET.

4.10.3.- Asegúrese de que los documentos pueden leerse sin marcos.

Ejemplo:

En este ejemplo, si el usuario lee en el archivo "top.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Este es el archivo top.html</TITLE>
</HEAD>
<FRAMESET cols="50%,50%" 
          title="Nuestro gran documento">
<FRAME src="principal.html" 
       title="Donde se muestra el contenido">
<FRAME src="tabla_de_contenidos.html" 
       title="Tabla de contenidos">
<NOFRAMES>
       <A href="tabla_de_contenidos.html">Tabla de contenidos.</A>
       <!-- Otros vínculos de navegación que están disponibles 
        en el archivo principal.html, también están 
        disponibles aquí. -->
</NOFRAMES>
</FRAMESET>
</HTML>
y la aplicación de usuario no ejecuta marcos, el usuario tendrá acceso (a través de un vínculo) a una versión sin marcos de la misma información.

4.10.4.- Haga que el archivo de origen de un marco sea siempre un documento HTML.

Puntos de verificación en esta sección: 6.2.

Los desarrolladores de contenido deben proporcionar textos equivalentes de los marcos, de forma que sus contenidos y las relaciones entre marcos tengan sentido. Tenga en cuenta que cuando cambian los contenidos de un marco, cualquier definición debe también cambiar. Esto no es posible si se inserta directamente una IMG (imagen) en un marco. Así pues, los desarrolladores de contenido deberían hacer el origen ("src") de un marco en un archivo HTML. Las imágenes pueden ser insertadas desde en el fichero HTML y sus textos alternativos se desarrollarán correctamente.

Ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un documento con marcos correcto</TITLE>
</HEAD>
<FRAMESET cols="100%" 
          title="Marco evolutivo">
<FRAME name="buenmarco" src="manzanas.html"
       title="Manzanas">
</FRAMESET>
</HTML>
       <!-- En el archivo manzanas.html -->
       <P><IMG src="manzanas.gif" alt="Manzanas"></P>

El siguiente ejemplo desaconsejado debería ser evitado en la medida que se inserta IMG directamente en un marco:

Ejemplo desaconsejado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un mal documento con marcos</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Marco estático">
<FRAME name="malmarco" src="manzanas.gif" title="Manzanas">
</FRAMESET>
</HTML>
Observe que si, por ejemplo, un vínculo genera una nueva imagen que se inserta en el marco:
<P>Visite una preciosa arboleda de
<A target="malmarco" href="naranjos.gif"
title="Naranjos">naranjos.</A>
el título inicial del marco ("Manzanas") no encajará con el contenido actual del mismo ("Naranjos").

4.10.5.- Evite que abrir una nueva ventana sea el objetivo de un marco.

Puntos de verificación en esta sección: 10.1.

Los desarrolladores de contenido deberían evitar que el objetivo de un marco sea abrir una nueva ventana con: target="_blank".

4.10.6.- Alternativas a los marcos.

Uno de los usos más comunes de los marcos es dividir la ventana de navegación del usuario en dos partes: una ventana de navegación y una ventana de contenido. Como alternativa a los marcos, le animamos a probar lo siguiente:
  1. Cree un documento para el mecanismo de navegación (llámelo "nav.html"). Un documento separado implica que el mecanismo de navegación puede ser compartido por más de un documento.
  2. Para cada documento que precise el mecanismo de navegación, incluya éste al final del documento con la siguiente etiqueta OBJECT (o uno similar):

Ejemplo:

<P>
<OBJECT data="nav.html">
        Ir a <A href="nav.html">tabla de contenidos</A>
</OBJECT>

Colocar el mecanismo de navegación al final del documento implica que, cuando se desconectan las hojas de estilo, los usuarios pueden acceder en primer lugar a la información importante del documento.

  1. Utilice hojas de estilo para colocar el mecanismo de navegación en el lugar que quiera de la pantalla. Por ejemplo, la siguiente regla CSS coloca la barra de navegación a la izquierda de la página y la hace ocupar el 25% del espacio horizontal disponible:
OBJECT { float: left; width: 25% }

La siguiente regla CSS adjunta el mecanismo de navegación a la esquina inferior izquierda de la página y la mantiene ahí incluso si el usuario desplaza la página hacia abajo:

OBJECT { position: fixed; left: 0; bottom: 0 }

Nota: Los mecanismos de navegación u otro contenido pueden ser insertados en un documento mediante su inclusión desde el lado del servidor.

4.11.- Formularios.

Esta sección trata de la accesibilidad de los formularios y los controles de los formularios que se pueden colocar en el elemento FORM.

4.11.1.- Haga accesibles los controles del teclado.

Puntos de verificación en esta sección: 9.4 y 9.5.

Consulte la sección acceso desde el teclado para más información.

4.11.2.- Grupo de controles de formulario.

Los desarrolladores de contenido debería agrupar la información cuando sea natural y apropiado. Cuando los controles de formulario puedan ser agrupados en unidades lógicas, utilice el elemento FILEDSET y etiquete esas unidades con el elemento LEGEND:

Ejemplo:

<FORM action=
	<FIELDSET>
	<LEGEND>Información personal</LEGEND>
	<LABEL for="nombre">Nombre:</LABEL>
	<INPUT type="text" id="nombre" tabindex="1">
	<LABEL for="apellidos">Apellidos:</LABEL>
	<INPUT type="text" id="apellidos" tabindex="2">
	... más información personal ...
	</FIELDSET>
	<LEGEND>Historia médica.</LEGEND>
	... información de la historia médica ...
	</FIELDSET>
</FORM>

4.11.3.- Etiquete explícitamente los controles del formulario.

Puntos de verificación en esta sección: 12.4 y 10.2.

En la sección anterior se proporciona un ejemplo de LABEL usado con "for" en HTML 4.0.

4.11.4.- Agrupe las opciones de menú.

Los desarrolladores de contenido deberían agrupar la información cuando sea natural y apropiado. Para listados largos de selecciones de menú (que pueden resultar difíciles de rastrear), los desarrolladores de contenido deberían agrupar los item SELECT (definidos a través de OPTION) en una jerarquía, utilizando el elemento OPTGROUP. Especifique una etiqueta para el grupo de opciones con el atributo "label" en OPTGROUP.

Ejemplo:

<FORM action="http://unsitio/prog/unprograma" method="post">
  <P>
  <SELECT name="ComOS">
    <OPTGROUP label="PortMaster 3">
      <OPTION label="3.7.1" value="pm3_3.7.1">
       PortMaster 3 con ComOS 3.7.1
      <OPTION label="3.7" value="pm3_3.7">
       PortMaster 3 con ComOS 3.7
      <OPTION label="3.5" value="pm3_3.5">
       PortMaster 3 con ComOS 3.5
    </OPTGROUP>
    <OPTGROUP label="PortMaster 2">
      <OPTION label="3.7" value="pm2_3.7">
       PortMaster 2 con ComOS 3.7
      <OPTION label="3.5" value="pm2_3.5">
       PortMaster 2 con ComOS 3.5
    </OPTGROUP>
    <OPTGROUP label="IRX">
      <OPTION label="3.7R" value="IRX_3.7R">
       IRX con ComOS 3.7R
      <OPTION label="3.5R" value="IRX_3.5R">
       IRX con ComOS 3.5R
    </OPTGROUP>
  </SELECT>
</FORM>

4.11.5.- Acceso desde el teclado a los formularios.

En el siguiente ejemplo, especificamos un orden de etiquetado entre los elementos (en orden "field2", "field1", "submit") con "tabindex".

Ejemplo:

<FORM action="submit" method="post">
<P>
<INPUT tabindex="2" type="text" name="field1">
<INPUT tabindex="1" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>

Este ejemplo asigna "U" como tecla de acceso (a través de "accesskey"). Tecleando "U" se dirige a la etiqueta, la cual, a su vez, dirige al control de entrada, de forma que el usuario pueda entrar en el texto.

Ejemplo:

<FORM action="submit" method="post">
<P>
	<LABEL for="usuraio" accesskey="U">nombre</LABEL>
	<INPUT type="text" id="usuario">
</FORM>

4.11.6.- Botones gráficos.

La utilización de imágenes para decorar los botones permite a los desarrolladores hacer sus formularios únicos y más fáciles de entender. Utilizar una imagen para un botón (por ejemplo, con el elemento INPUT o BUTTON) no es por sí mismo inaccesible - asumiendo que se proporcionará un texto equivalente para la imagen.
Sin embargo, una formulario gráfico con botones creados con INPUT, type="image", crea un tipo de mapa de imagen del lado del servidor. En el momento en se pulse el botón con el ratón, las coordenadas x e y del lugar pulsado son enviadas al servidor como parte de la presentación del formulario.
En la sección imágenes y mapas de imagen tratamos el por qué las imágenes del lado del servidor deben ser evitadas y se sugiere el uso, en su lugar, del mapa de imágenes del lado del usuario. En HTML 4.0, los botones gráficos pueden ser ahora mapas de imágenes del lado del usuario. Para preservar la funcionalidad proporcionada por el servidor, los autores tienen las siguientes opciones, tal y como se establece en la Recomendación HTML 4.0 ([HTML40], sección 17.4.1):

Si el servidor realiza acciones diferentes dependiendo del lugar donde se pulse, los usuarios con navegadores no gráficos estarán en inferioridad de condiciones.

Por esta razón, los autores deberían considerar alternativas de aproximación:

4.11.7.- Técnicas para controles específicos.

Puntos de verificación en esta sección: 10.4.

Ejemplo:

Algunas ayudas técnicas antiguas requieren texto inicial en los controles del formulario, tales como TEXTAREA, para funcionar correctamente.

<FORM action="http://algunsitio.com/prog/text-read" method="post">
  <P>
  <TEXTAREA name=tunombre rows="20" cols="80"
  Por favor, introduzca su nombre aquí.
  </TEXTAREA>
  <INPUT type="submit" value="Send"><INPUT type="reset">
  </P>
</FORM>

Proporcione un texto equivalente para las imágenes utilizadas como botones de "enviar":

Ejemplo:

<FORM action="http://algunsitio.com/prog/text-read" method="post">
<P>
<INPUT type="image" name=enviar scr="boton.gif" alt="Enviar">
</FORM>

Remítase también a la sección acceso desde el teclado, puesto que se aplica a los controles de formulario.

4.11.8.- Problemas de compatibilidad retrospectiva para formularios.

En algunos navegadores HTML 3.2,

4.12.- Scripts.

Esta sección trata sobre la accesibilidad de los scripts (Nota de traducción: programas independientes que se ejecutan dentro de una página Web) incluidos en un documento a través de elemento SCRIPT.

4.12.1.- Transformación elegante de los scripts.

Puntos de verificación en esta sección: 6.3.

Los desarrolladores de contenido deben asegurarse de que las páginas son accesibles cuando los scripts estén desconectados o en los navegadores que no soportan scripts.

Ejemplo desaconsejado:

Este vínculo es un callejón sin salida para una aplicación de usuario en que los scripts no se soportan o no están cargados.
<A href="javascript:">...</A>

4.12.2.- Manejadores de eventos independientes del dispositivo.

Puntos de verificación en esta sección: 9.3 y 9.4.

Un manejador de eventos es un script al que se recurre cuando ocurren ciertos eventos (por ejemplo, se mueve el ratón, se presiona una tecla, se carga un documento, etc.). En HTML 4.0, los manejadores de eventos son adjuntados a los elementos a través de los atributos del manejador de eventos (los atributos comienzan por "on" o por "onkeyup").
Algunos manejadores de eventos, cuando son requeridos, producen efectos puramente decorativos, tales como iluminar una imagen o cambiar de color un elemento de texto. Otros producen efectos mucho más sustanciales, como llevar a cabo un cálculo, proporcionar al usuario información importante o enviar un formulario. Para los manejadores de eventos que hacen algo más que cambiar la presentación de un elemento, los desarrolladores de contenido deberían hacer lo siguiente:

  1. Utilice disparadores de eventos a nivel de aplicación mejor que a nivel de interacción con el usuario. En HTML 4.0, los atributos de los eventos a nivel de aplicación son "onfocus", "onblur" (lo opuesto a "onfocus") y "onselect". Observe que estos atributos están diseñados para ser independientes del mecanismo, pero están implementados como eventos específicos del teclado en los navegadores actuales.
  2. Por otra parte, si debe usar atributos dependientes del dispositivo, proporcione reiterados sistemas de entrada (por ejemplo, especifique dos manejadores para un mismo elemento):
  3. Observe que no hay equivalente en el teclado para la doble pulsación ("ondblclick") en HTML 4.0.
  4. No escriba manejadores de eventos que dependan de la coordinación del ratón, puesto que ello impide entradas independientes del dispositivo.

4.12-3.- Presentación alternativa de scripts.

Una manera de llevarlo a cabo es con el elemento NOSCRIPT. El contenido de este elemento se muestra cuando los scripts no están disponibles.

Ejemplo:

<SCRIPT type="text/tcl">
...algún script Tcl para mostrar la tabla de resultados deportivos...
</SCRIPT>
</NOSCRIPT>
  <P>Resultados de los partidos de ayer:</P>
  <DL>
    <DT>Bulls 91, Sonics 80.
    <DD><A href="bullsonic.html">
     Momentos estelares del partido Bulls contra Sonics</A>
    ...más resultados...
  </DL>
</NOSCRIPT>

5.- Técnicas para CSS.

Puntos de verificación en esta sección: 3.3.

Las secciones siguientes enumeran algunas técnicas para utilizar CSS con el fin de diseñar documentos accesibles y algunas técnicas para escribir hojas de estilo eficaces. En HTML, las hojas de estilo deben ser especificadas externamente a través del elemento LINK, en el encabezamiento del documento a través del elemento STYLE o, para un elemento específico, a través del atributo style.
CSS1 ([CSS1]) y CSS2 ([CSS2]) permiten a los desarrolladores de contenidos duplicar la mayoría de las capacidades de presentación de HTML 4.0, y ofrecen más potencia con menor coste. No obstante, hasta que la mayoría de los usuarios tengan navegadores que soporten las hojas de estilo, no todo idioma de presentación puede expresarse de forma satisfactoria con hojas de estilo. También proporcionamos ejemplos de como utilizar las representaciones HTML 4.0 (por ejemplo, tablas, texto para mapas de bits) de forma más accesible cuando deban ser usadas.
Vea también la sección etiquetas de texto.

5.1.- Pautas para crear hojas de estilo.

Puntos de verificación en esta sección: 6.1 y 3.4.

He aquí pautas para crear hojas de estilo que promueven la accesibilidad:


A continuación algunos ejemplos:

Ejemplo:

Utilice "em para establecer los tamaños de letra, como en:
H1 { font-size: 2em }
mejor que:
H1 { font-size: 12pt }

Ejemplo:

Utilice unidades de longitud relativas y porcentajes.
BODY { margin-left: 15%; margin-right: 10% }

Ejemplo:

Utilice unidades absolutas de longitud sólo cuando sean conocidas las características físicas del medio de salida.
.businesscard { font-size: 8pt }

Ejemplo:

Especifique siempre un tipo de letra genérico por defecto:
BODY { font-family: "Gill Sans", sans-serif }

Ejemplo:

Utilice números, no nombres, para los colores:
H1 { color: #808000 }
H1 { color: rgb (50%,50%,0%) }

5.2.- Tipos de letra.

En lugar de utilizar elementos y atributos de presentación desaconsejados, utilice las múltiples propiedades CSS para controlar las características de los tipos de letra: "font-family", "font-size", "font-size-adjust", font-stretch", "font-style", "font-variant" y "font-weight".
Las siguientes propiedades CSS2 pueden ser utilizadas para controlar la información de la fuente: "font", "font-family", "font-size", "font-size-adjust", font-stretch", "font-style", "font-variant" y "font-weight". Utilícelas en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, "face" y "size".
Si tiene que usar elementos HTML para controlar la información del tipo de letra, utilice BIG y SMALL, que no están desaconsejados.

Ejemplo:

<STYLE type="text/css">
    P.important {font-weight: bold }
    P.less-important { font-weight: lighter; font-size: smaller }
    H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>

5.3.- Estilo del texto.

Puntos de verificación en esta sección: 7.2.

La siguientes propiedades CSS2 pueden ser usadas para el estilo del texto:

5.3.1.- Texto en lugar de imágenes.

Los desarrolladores de contenido deberían utilizar hojas de estilo para dar estilo a un texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios (con sintetizadores de voz, dispositivos braille, dispositivos gráficos, etc.). La utilización de hojas de estilo también permitirá a los usuarios anular los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.
Si es necesario utilizar un mapa de bit para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bit debe ser accesible (vea las secciones sobre textos equivalentes y páginas alternativas).

Ejemplo:

En este ejemplo, la imagen insertada muestra en caracteres rojos oscuro "Ejemplo", y es captada a través del valor del atributo "alt".
<P>Esto es un
     <IMG src="EjemploRojoOscuro.gif" alt="ejemplo">
     de lo que queremos decir.
</P>

5.4.- Formateo del texto.

Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto:

El siguiente ejemplo muestra como utilizar hojas de estilo para crear un efecto de letra capital.

Ejemplo:

<HEAD>
<TITLE>Letra capital</TITLE>
<STYLE type="text/css">
  .dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">E</SPAN>rase una vez...
</BODY>
Nota: El pseudoelemento CSS :first-letter, que permite a los desarrolladores de contenido remitir a la primera letra de una parte del texto no está soportado ampliamente, tal y como está escrito en este documento.

5.5.- Colores.

Puntos de verificación en esta sección: 2.1 y 2.2.

Utilice las propiedades CSS para especificar colores:

Asegúrese de que la información no se aporta sólo a través de los colores. Por ejemplo, cuando pida intervención de los usuario, no escriba "por favor, seleccione uno de los ítems etiquetados en verde". En su lugar, asegúrese de que la información está disponible a través de otros efectos de estilo (por ejemplo un efecto de fuente) y a través del contexto (por ejemplo, vínculos de texto de amplio alcance).
Por ejemplo, en este documento se ha dado estilo a los ejemplos por defecto (a través de hojas de estilo) de la siguiente manera:

Test rápido: Para verificar si su documento funciona aun sin colores, examínelo con un monitor en blanco y negro o con los colores del navegador desconectados. Igualmente, intente colocar en su navegador un esquema de color que sólo utilice blanco, negro y los cuatro tonos de gris básico de los navegadores y vea cómo se muestra su página.

Test rápido: Para verificar si el contraste de color es suficiente para ser distinguido por personas con deficiencias en la percepción del color, o por aquellos con monitores de baja resolución, imprima las páginas en una impresora en blanco y negro (con los fondos y colores en escala de grises). Intente también fotocopiar lo impreso dos o tres veces para ver cómo se deteriora. Ello le mostrará dónde necesita añadir señales redundantes (ejemplo: los hipervínculos están normalmente subrayados en las páginas Web), o si las señales son demasiado pequeñas o confusas para mostrarse bien.

Para mayor información sobre colores y contrastes, consulte [LIGHTHOUSE].

5.6.- Maquetación, posicionamiento, colocación y alineación.

Maquetación, posicionamiento, colocación y alineación deberían hacerse a través de hojas de estilo (especialmente utilizando hojas de estilo de posicionamiento flotante o absoluto):

5.6.1.- Si debe utilizar imágenes como espaciadores.

Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes.
Si los desarrolladores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas deberían especificar alt=" " para ellas.

Ejemplo desaconsejado:

Los autores no deberían utilizar espacios para el valor de "alt", con el fin de prevenir que las palabras se desplacen juntas cuando la imagen no está cargada:
mi poema necesita un gran espacio <IMG src="10pttab.gif" 
alt="&nbsp;&nbsp;&nbsp;">
En el siguiente ejemplo, se utiliza una imagen para forzar que un gráfico aparezca en cierta posición:
<IMG src="espaciador.gif" alt="espaciador">
<IMG src="ruedacoloreada.gif" alt="La Rueda de la Fortuna">

5.7.- Líneas y bordes.

Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.
Utilice las propiedades CSS para especificar los estilos de los bordes:

Los autores deberían usar hojas de estilo para crear líneas y bordes.

Ejemplo:

En este ejemplo, el elemento H1 tendrá un borde superior de dos píxeles de grosor, color rojo y estará separado del contenido por 1 espacio.
<HEAD>
<TITLE>Línea roja con hoja de estilo</TITLE>
<STYLE type="text/css">
  H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Capítulo 8.- Dispositivos auditivos y táctiles</H1>
</BODY>

Si una línea (por ejemplo, el elemento HR) se usa para indicar la estructura, asegúrese de que se refiere a la estructura también de una forma no visual (por ejemplo, utilizando una etiqueta estructural).

Ejemplo:

En este ejemplo, el elemento DIV se usa para crear una barra de navegación que incluye un separador horizontal.
<DIV class="barra-de-navegacion">
  <HR>
  <A rel="Siguiente" href="siguiente.htm">[Página siguiente]</A>
  <A rel="Anterior" href="anterior.htm">[Página anterior]</A>
<A rel="Primera" href="primera.htm">[Primera página]</A>
</DIV>

Mapa de puntos de verificación.

Este índice lista cada punto de verificación y las secciones de este documento en las que es tratado. Aun más, cada número de pauta está vinculada a su definición en el documento de pautas. Cada punto de verificación, igualmente, está vinculado con su definición en el documento de pautas.

Pauta 1:

1.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Ello incluye: imágenes, representaciones gráficas de textos (incluidos los símbolos), zonas de un mapa de imagen, animaciones (por ejemplo, GIFs animados), applets y objetos programados, ascii art, marcos, scripts, imágenes utilizadas como viñetas de lista, espaciadores, botones gráficos, sonidos (ejecutados con o sin la intervención del usuario), archivos exclusivamente auditivos, bandas sonoras de vídeo y vídeos. [Prioridad 1] (Punto de verificación 1.1 en las pautas).

Consulte: 3.2 Textos equivalentes y
4.7.1 Textos equivalentes para imágenes.
1.2 Proporcione vínculos de texto redundantes para cada zona activa de un mapa de imagen del lado del servidor. [Prioridad 1] (Punto de verificación 1.2 en las pautas).
Consulte: 3.2 Textos equivalentes y
4.7.6 Mapas de imagen del lado del servidor.
1.3 Hasta que las aplicaciones de usuario puedan leer automáticamente en voz alta el texto equivalente de una banda visual, proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. [Prioridad 1] (Punto de verificación 1.3 en las pautas).
Consulte: 4.9.2 Información visual y movimiento.
1.4 Para cualquier presentación multimedia basada en el tiempo (por ejemplo, una película o animación), sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones auditivas de la banda visual) con la presentación. [Prioridad 1] (Punto de verificación 1.4 en las pautas).
Consulte: 4.8.3 Sonido e imagen producidos por objetos dinámicos.
1.5 Hasta que las aplicaciones de usuario ejecuten textos equivalentes para los vínculos de mapa de imagen del lado del cliente, proporcione vínculos redundantes de texto para cada región activa de un mapa de imagen del lado del cliente. [Prioridad 3] (Punto de verificación 1.5 en las pautas).
Consulte: 3.2 Textos equivalentes y
4.7.5 Mapas de imagen del lado del cliente.


Pauta 2:

2.1 Asegúrese de que toda la información comunicada a través del color está también disponible sin el color, por ejemplo a través del contexto o una etiqueta. [Prioridad 1] (Punto de verificación 2.1 en las pautas).

Consulte: 5.5 Colores.
2.2 Asegúrese de que las combinaciones de color del fondo y primer plano tienen suficiente contraste para ser visualizadas por personas con deficiencias en la percepción del color, o cuando se ven en una pantalla en blanco y negro. [Prioridad 2 para las imágenes, Prioridad 3 para el texto] (Punto de verificación 2.2 en las pautas).
Consulte: 5.5 Colores.


Pauta 3:

3.1 Cuando exista un lenguaje de etiquetado apropiado, utilice mejor la etiqueta que imágenes para comunicar la información. [Prioridad 2] (Punto de verificación 3.1 en las pautas).

Consulte: 4.3.4 Etiquetas y hojas de estilo mejor que imágenes: el ejemplo de las matemáticas.
3.2 Cree documentos validados según las reglas formales de la gramática. [Prioridad 2] (Punto de verificación 3.2 en las pautas).
Consulte: 4.1 Estructura del documento y metadatos.
3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2] (Punto de verificación 3.3 en las pautas).
Consulte:3.2 Textos equivalentes,
4.3.1 Énfasis y
5 Técnicas para CSS.
3.4 Utilice unidades relativas mejor que absolutas en los valores de los atributos del lenguaje de etiquetado y los valores propios de las hojas de estilo. [Prioridad 2] (Punto de verificación 3.4 en las pautas).
Consulte: 5.1 Pautas para crear hojas de estilo.
3.5 Utilice elementos de encabezamiento para comunicar la estructura del documento y úselos de acuerdo a la especificación. [Prioridad 2] (Punto de verificación 3.5 en las pautas).
Consulte: 4.1.2 Encabezamientos de sección.
3.6 Etiquete apropiadamente las listas y los ítems de las listas. [Prioridad 2] (Punto de verificación 3.6 en las pautas).
Consulte: 4.4 Listas.
3.7 Etiquete apropiadamente las citas. No utilice la etiqueta de citas para formatear efectos tales como la sangría. [Prioridad 2] (Punto de verificación 3.7 en las pautas).
Consulte: 4.3.3 Citas.


Pauta 4:

4.1 Identifique claramente los cambios del idioma original del texto de un documento y cualquier texto equivalente (por ejemplo, los subtítulos). [Prioridad 1] (Punto de verificación 4.1 en las pautas).

Consulte: 4.2 Información sobre el idioma.
4.2 Especifique el nombre completo de cualquier abreviatura o acrónimo la primera vez que aparezca en un documento. [Prioridad 3] (Punto de verificación 4.2 en las pautas).
Consulte: 4.3.2 Acrónimos y abreviaturas.
4.3 Identifique el idioma original de un documento. [Prioridad 3] (Punto de verificación 4.3 en las pautas).
Consulte: 4.2 Información sobre el idioma.


Pauta 5:

5.1 Para las tablas de datos, identifique los encabezamientos de las filas y columnas. [Prioridad 1] (Punto de verificación 5.1 en las pautas).

Consulte: 4.5.1 Tablas de datos.
5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila y columna, utilice etiquetas para asociar las celdas de datos y las celdas de encabezamientos. [Prioridad 1] (Punto de verificación 5.2 en las pautas).
Consulte: 4.5.1 Tablas de datos.
5.3 No utilice tablas para maquetar a no ser que la tablas tengan sentido cuando se alineen. Por otra parte, si la tabla no tiene sentido, proporcione un equivalente alternativo (que puede ser una versión alineada). [Prioridad 2] (Punto de verificación 5.3 en las pautas).
Consulte: 4.5.2 Evite las tablas para maquetar.
5.4 Si se utiliza una tabla para maquetar, no use una etiqueta de estructura para el formateo visual. [Prioridad 2] (Punto de verificación 5.4 en las pautas).
Consulte: 4.5.2 Evite las tablas para maquetar.
5.5 Proporcione resúmenes para las tablas. [Prioridad 3] (Punto de verificación 5.5 en las pautas).
Consulte: 4.5.1 Tablas de datos.
5.6 Proporcione abreviaturas para las etiquetas de los encabezamientos. [Prioridad 3] (Punto de verificación 5.6 en las pautas).
Consulte: 4.5.1 Tablas de datos.


Pauta 6:

6.1 Organice los documentos de forma que puedan leerse sin hojas de estilo. Por ejemplo, cuando se ejecuta un documento HTML sin hojas de estilo asociadas, tiene que ser posible aun así leer el documento. [Prioridad 1] (Punto de verificación 6.1 en las pautas).

Consulte: 5.1 Pautas para crear hojas de estilo.
6.2 Asegúrese de que se actualizan los equivalentes de los contenidos dinámicos cuando cambian éstos. [Prioridad 1] (Punto de verificación 6.2 en las pautas).
Consulte: 4.10.4 Haga que el archivo de origen de un marco sea siempre un documento HTML.
6.3 Asegúrese de que las páginas son utilizables aun si se desconectan o no se soportan los scripts, applets u otros objetos programados. Si ello no es posible, proporcione información equivalente en una página alternativa accesible. [Prioridad 1] (Punto de verificación 6.3 en las pautas)
Consulte: 4.12.1 Transformación elegante de los scripts.
6.4 Para los scripts y applets, asegúrese de que los manejadores de eventos son introducidos como independientes del dispositivo. [Prioridad 2] (Punto de verificación 6.4 en las pautas).
Consulte: 4.12.2 Manejadores de eventos independientes del dispositivo.
6.5 Asegúrese de que el contenido dinámico es accesible o proporcione una presentación o página alternativa [Prioridad 2] (Punto de verificación 6.5 en las pautas).
Consulte: 3.3 Páginas alternativas.


Pauta 7:

7.1 Hasta que las aplicaciones de usuario permitan a éste controlar los destellos, evite hacer que la pantalla destelle. [Prioridad 1] (Punto de verificación 7.1 en las pautas).

Consulte: 3.9 Parpadeo de la pantalla.
7.2 Hasta que las aplicaciones de usuario permitan a éste controlar el parpadeo de texto, evite que el contenido parpadee (por ejemplo, cambie la presentación con una periodicidad regular, como un encendido y apagado). [Prioridad 2] (Pauta de verificación 7.2 en las pautas).
Consulte: 5.3 Estilo del texto.
7.3 Hasta que las aplicaciones de usuario permitan a éste controlar el contenido en movimiento, evítelo en las páginas. [Prioridad 2] (Punto de verificación 7.3 en las pautas).
Consulte: 4.9.2 Información visual y movimiento.
7.4 Hasta que las aplicaciones de usuario proporcionen la capacidad de detener el refresco, no cree páginas que se refresquen automáticamente de forma periódica. [Prioridad 2] (Pauta de verificación 7.4 en las pautas).
Consulte: 3.8 Refresco automático de la página.
7.5 Hasta que las aplicaciones de usuario proporcionen la capacidad de detener la redirección automática, no utilice etiquetado para redirigir automáticamente las páginas. En lugar de ello, configure el servidor para que realice las redirecciones. [Prioridad 2] (Punto de verificación 7.5 en las pautas).
Consulte: 3.8 Refresco automático de la página.


Pauta 8:

8.1 Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas. [Prioridad 2] (Punto de verificación 8.1 en las pautas).

Consulte: 3.8 Refresco automático de la página.


Pauta 9:

9.1 Proporcione mapas de imagen del lado del cliente en lugar de mapas de imagen del lado del servidor, excepto cuando las zonas no puedan ser definidas con una forma geométrica asequible. [Prioridad 1] (Punto de verificación 9.1 en las pautas).

Consulte: 4.7.5 Mapas de imagen del lado del cliente.
9.2 Asegúrese de que cualquier elemento que tenga su propia interfaz pueda ser operado de modo independiente del dispositivo. [Prioridad 2] (Punto de verificación 9.2 en las pautas).
Consulte: 3.4 Acceso desde el teclado.
9.3 Para los scripts, utilice manejadores de eventos lógicos mejor que manejadores de eventos dependientes del dispositivo. [Prioridad 2] (Punto de verificación 9.3 en las pautas).
Consulte: 4.12.2 Manejadores de eventos independientes del dispositivo.
9.4 Cree un orden lógico en las etiquetas a través de vínculos, controles de formulario y objetos. [Prioridad 3] (Punto de verificación 9.4 en las pautas).
Consulte: 4.11.1 Haga accesibles los controles del teclado.
9.5 Proporcione atajos de teclado para los vínculos importantes (incluyendo los que están en los mapas de imagen del lado del cliente), controles de formulario y grupos de controles de formulario. [Prioridad 3] (Punto de verificación 9.5 en las pautas).
Consulte: 4.11.1 Haga accesibles los controles del teclado.


Pauta 10:

10.1 Hasta que las aplicaciones de usuario permitan desconectar las ventanas generadas, no provoque apariciones inesperadas de otras ventanas y no cambie la ventana actual sin informar al usuario. [Prioridad 2] (Punto de verificación 10.1 en las pautas).

Consulte: 4.10.5 Evite que abrir una nueva ventana sea el objetivo de un marco.
10.2 Hasta que las aplicaciones de usuario soporten asociaciones explícitas entre las etiquetas y los controles de formulario, asegure, para todos los controles de formulario con etiquetas implícitamente asociadas, que la etiqueta está ubicada correctamente. [Prioridad 2] (Punto de verificación 10.2 en las pautas).
Consulte: 4.11.3 Etiquete explícitamente los controles del formulario.
10.3 Hasta que las aplicaciones de usuario (incluyendo las ayudas técnicas) interpreten correctamente el texto de cada celda, proporcione texto lineal alternativo (en la misma página o en alguna otra) para todas las tablas que expongan texto paralelo y columnas con palabras insertadas. [Prioridad 3] (Punto de verificación 10.3 en las pautas).
Consulte: 4.5.3 Texto insertado en tablas.
10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya por defecto caracteres de mantenimiento del lugar en las cajas de edición y las áreas de texto. [Prioridad 3] (Punto de verificación 10.4 en las pautas).
Consulte: 4.11.7 Técnicas para controles específicos.
10.5 Hasta que las aplicaciones de usuario (incluyendo las ayudas técnicas) interpreten de forma clara vínculos adyacentes, incluya caracteres imprimibles que no sean parte del vínculo (rodeados por espacios) entre los vínculos adyacentes. [Prioridad 3] (Punto de verificación 10.5 en las pautas).
Consulte: 4.7.5 Mapas de imagen del lado del cliente.


Pauta 11:

11.1 Utilice tecnologías W3C cuando estén disponibles y sean adecuadas para una tarea y use las últimas versiones soportadas. [Prioridad 2] (Punto de verificación 11.1 en las pautas).

Consulte: 3.12 Soporte del navegador.
11.2 Evite características desaconsejadas por las tecnologías W3C. [Prioridad 2] (Punto de verificación 11.2 en las pautas).
Consulte:
11.3 Proporcione la información de manera que los usuarios puedan recibir los documentos según sus preferencias (por ejemplo, idiomas, tipo de contenido, etc.). [Prioridad 3] (Punto de verificación 11.3 en las pautas).
Consulte: 3.7 Negociación del contenido.
11.4 Si después de los mayores esfuerzos no consigue crear una página accesible, proporcione un vínculo a una página alternativa que utilice tecnologías W3C, sea accesible, tenga una información (o una funcionalidad) equivalente y esté actualizada con tanta frecuencia como la página original inaccesible. [Prioridad 1] (Punto de verificación 11.4 en las pautas).
Consulte: 3.3 Páginas alternativas.


Pauta 12:

12.1 Titule cada marco para facilitar la identificación y la navegación. [Prioridad 1] (Punto de verificación 12.1 en las pautas).

Consulte: 3.2 Textos equivalentes y
4.10.1 Titule los marcos para fácil orientación.
12.2 Describa la finalidad de los marcos y cómo se relacionan entre ellos, si no resulta obvio de los propios títulos de los mismos. [Prioridad 2] (Punto de verificación 12.2 en las pautas).
Consulte:3.2 Textos equivalentes y
4.10.2 Textos equivalentes para marcos.
12.3 Divida los bloques largos de información en otros grupos más manejables cuando resulte natural y apropiado. [Prioridad 2] (Punto de verificación 12.3 en las pautas).
Consulte: 4.1.4 Agrupación estructural.
12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2] (Punto de verificación 12.4 en las pautas).
Consulte: 4.11.3 Etiquete explícitamente los controles del formulario.


Pauta 13:

13.1 Identifique claramente el objetivo de cada vínculo. [Prioridad 2] (Punto de verificación 13.1 en las pautas).

Consulte: 4.6 Vínculos.
13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. [Prioridad 2] (Punto de verificación 13.2 en las pautas).
Consulte: 3.5 Navegación,
4.1.1 Metadatos y
4.1.3 Metadatos de vínculos y herramientas de navegación.
13.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo, un mapa del sito o una tabla de contenidos). [Prioridad 2] (Punto de verificación 13.3 en las pautas).
Consulte: 3.5 Navegación.
13.4 Utilice los mecanismos de navegación de manera consistente. [Prioridad 2] (Punto de verificación 13.4 en las pautas).
Consulte: 3.5 Navegación.
13.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. [Prioridad 3] (Punto de verificación 13.5 en las pautas).
Consulte: 3.5 Navegación.
13.6 Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione un modo de evitar el grupo. [Prioridad 3] (Punto de verificación 13.6 en las pautas).
Consulte: 4.6 Vínculos.
13.7 Si se proporcionan funciones de búsqueda, facilite diferentes tipos de búsquedas para los diferentes niveles de desenvolvimiento y preferencias. [Prioridad 3] (Punto de verificación 13.7 en las pautas).
Consulte: 3.5 Navegación.
13.8 Coloque la información relevante al principio de los encabezamientos, párrafos, listas, etc. [Prioridad 3] (Punto de verificación 13.8 en las pautas).
Consulte: 3.6 Comprensión.
13.9 Proporcione información sobre los grupos de documentos (por ejemplo, documentos que abarcan varias páginas). [Prioridad 3] (Punto de verificación 13.9 en las pautas).
Consulte: 3.10 Documentos empaquetados.
13.10 Proporcione un modo de saltar sobre los ASCII art multilineales. [Prioridad 3] (Punto de verificación 13.10 en las pautas).
Consulte: 3.2 Textos equivalentes y
4.7.3 ASCII art.


Pauta 14:

14.1 Utilice el lenguaje más claro y simple que resulte apropiado para el contenido de un sitio. [Prioridad 1] (Punto de verificación 14.1 en las pautas).

Consulte: 3.6 Comprensión.
14.2 Suplemente el texto con presentaciones gráficas y auditivas cuando éstas faciliten la comprensión de la página. [Prioridad 3] (Punto de verificación 14.2 en las pautas).
Consulte: 3.6 Comprensión.
14.3 Cree un estilo de presentación que mantenga la coherencia entre todas las páginas. [Prioridad 3] (Punto de verificación 14.3 en las pautas).
Consulte: 3.5 Navegación.

Índice de elementos y atributos HTML.

Puntos de verificación en esta sección: 11.2.
 

Elementos.

Versión lineal del índice de elementos HTML 4.0.

Este índice lista todos los elementos de HTML 4.0.
La primera columna de esta tabla vincula a la definición del elemento en la especificación HTML 4.0 [HTML40] (Nota de traducción: se vinculan al documento original en inglés). Los elementos que están desaconsejados en HTML 4.0 van seguidos de un asterisco (*). No aparecen en esta tabla los elementos que están obsoletos para HTML 4.0 o no existen en una especificación HTML (2.0, 3.2, 4.0).
La segunda columna indica otras especificaciones W3C de HTML que incluyen cada elemento.
La tercera columna indica la función del elemento.
La última columna lista las secciones del presente documento en las que se trata el elemento. La entrada "N/A" significa que el elemento no se trata en este documento.

Nombre del elemento Definido también en Función Técnicas
A 2.0, 3.2 Estructura 4.6.- Vínculos, 4.7.2.- Vínculos-d invisibles, 4.7.5.- Mapas de imagen del lado del cliente.
ABBR   Estructura 4.3.2.- Acrónimos y abreviaturas, 4.7.3.- Ascii art.
ACRONYM   Estructura 4.3.2.- Acrónimos y abreviaturas.
ADDRESS 2.0, 3.2 Metadatos 4.1.1.- Metadatos.
APPLET* 3.2 Reemplazamiento 4.8.- Applets y otros objetos programados, 4.8.1.- Textos equivalentes para applets y otros objetos programados, 4.8.2.- Applets directamente accesibles.
AREA 3.2 Estructura 4.7.5.- Mapas de imagen del lado del cliente.
B 2.0, 3.2 Presentación 4.3.1.- Énfasis.
BASE 2.0, 3.2 Procesamiento N/A
BASEFONT* 3.2 Presentación 5.2.- Tipos de letra.
BDO   Procesamiento N/A
BIG 3.2 Presentación 5.2.- Tipos de letra.
BLOKQUOTE 2.0, 3.2 Estructura 3.1.- Estructura contra presentación, 4.3.3.- Citas, 5.4.- Formateo del texto.
BODY 2.0, 3.2 Estructura N/A
BR 2.0, 3.2 Presentación N/A
BUTTON   Estructura 4.11.6.- Botones gráficos, 4.11.8.- Problemas de compatibilidad retrospectiva para formularios.
CAPTION 3.2 Estructura 4.1.4.- Agrupación estructural, 4.5.1.- Tablas de datos.
CENTER* 3.2 Presentación 5.6.- Maquetación, posicionamiento, colocación y alineación.
CITE 2.0, 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.
CODE 2.0, 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.
COL   Estructura 4.5.1.- Tablas de datos.
COLGROUP   Estructura 4.1.4.- Agrupación estructural, 4.5.1.- Tablas de datos.
DD 2.0, 3.2 Estructura 4.4.1.- Uso de hojas de estilo para cambiar las viñetas de una lista.
DEL   Metadatos 4.3.5.- Diversas etiquetas estructurales.
DFN 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.
DIR* 2.0, 3.2 Estructura N/A
DIV 3.2 Estructura 4.6.1.- Vínculos de agrupación y desviación.
DL 2.0, 3.2 Estructura 4.1.4.- Agrupación estructural, 4.4.- Listas, 4.4.1.- Uso de hojas de estilo para cambiar las viñetas de una lista.
DT 2.0, 3.2 Estructura 4.4.1.- Uso de hojas de estilo para cambiar las viñetas de una lista.
EM 2.0, 3.2 Estructura 4.3.1.- Énfasis.
FIELDSET   Estructura 4.1.4.- Agrupación estructural, 4.11.2.- Grupo de controles de formulario.
FONT* 3.2 Presentación 5.2.- Tipos de letra.
FORM 2.0, 3.2 Estructura 4.11.- Formularios.
FRAME   Reemplazamiento 4.6.1.- Vínculos de agrupación y desviación, 4.10.- Marcos.
FRAMESET   Presentación 4.10.- Marcos, 4.10.2.- Textos equivalentes para marcos.
H1 2.0, 3.2 Estructura 3.1.- Estructura contra presentación, 4.1.2.- Encabezamientos de sección, 4.1.4.- Agrupación estructural.
HEAD 2.0, 3.2 Estructura N/A
HR 2.0, 3.2 Presentación 3.1.- Estructura contra presentación, 4.1.2.- Encabezamientos de sección.
HTML 2.0, 3.2 Estructura N/A
I 2.0, 3.2 Presentación 4.3.1.- Énfasis.
IFRAME   Reemplazamiento 4.10.- Marcos.
IMG 2.0, 3.2 Reemplazamiento 4.7.1.- Textos equivalentes para imágenes, 4.7.6.- Mapas de imagen del lado del servidor, 4.10.4.- Haga que el archivo de origen de un marco sea siempre un documento HTML, 5.6.1.- Si debe utilizar imágenes como espaciadores.
INPUT 2.0, 3.2 Estructura 4.11.6.- Botones gráficos, 4.11.8.- Problemas de compatibilidad retrospectiva para formularios.
INS   Metadato 4.3.5.- Diversas etiquetas estructurales.
ISINDEX* 2.0, 3.2 Estructura N/A
KBD 2.0, 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.
LABEL   Estructura 4.11.3.- Etiquete explícitamente los controles del formulario.
LEGEND   Estructura 4.1.4.- Agrupación estructural, 4.11.2.- Grupo de controles de formulario.
LI 2.0, 3.2 Estructura 4.4.1.- Uso de hojas de estilo para cambiar las viñetas de una lista.
LINK 2.0, 3.2 Metadato 3.3.- Páginas alternativas, 4.1.1.- Metadatos, 4.1.3.- Metadatos de vínculos y herramientas de navegación, 5.- Técnicas para CSS.
MAP 3.2 Estructura 4.7.4.- Mapas de imagen.
MENU* 2.0, 3.2 Estructura N/A
META 2.0, 3.2 Metadato 3.8.- Refresco automático de la página, 4.1.1.- Metadatos.
NOFRAMES   Alternativa 4.10.2.- Textos equivalentes para marcos.
NOSCRIPT   Alternativa 4.12-3.- Presentación alternativa de scripts.
OBJECT   Reemplazamiento 3.2.1.- Revisión de las tecnologías, 4.7.5.- Mapas de imagen del lado del cliente, 4.7.6.- Mapas de imagen del lado del servidor, 4.8.- Applets y otros objetos programados, 4.8.1.- Textos equivalentes para applets y otros objetos programados, 4.8.2.- Applets directamente accesibles, 4.9.5.- Objetos multimedia empaquetados, 4.10.6.- Alternativas a los marcos.
OL 2.0, 3.2 Estructura 4.1.4.- Agrupación estructural, 4.4.- Listas.
OPTGROUP   Estructura 4.1.4.- Agrupación estructural, 4.11.4.- Agrupe las opciones de menú.
OPTION 2.0, 3.2 Estructura 4.11.4.- Agrupe las opciones de menú.
P 2.0, 3.2 Estructura 4.1.4.- Agrupación estructural, 4.6.1.- Vínculos de agrupación y desviación.
PARAM 3.2 Procesamiento N/A
PRE 2.0, 3.2 Presentación 4.5.1.- Tablas de datos.
Q   Estructura 4.3.3.- Citas.
S*   Presentación N/A
SAMP 2.0, 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.
SCRIPT 3.2 (DTD) Procesamiento 4.12.- Scripts.
SELECT 2.0, 3.2 Estructura 4.11.4.- Agrupe las opciones de menú.
SMALL 3.2 Presentación 5.2.- Tipos de letra.
SPAN   Estructura 4.6.1.- Vínculos de agrupación y desviación.
STRIKE* 3.2 Presentación N/A
STRONG 2.0, 3.2 Estructura 4.3.1.- Énfasis.
STYLE 3.2 (DTD) Procesamiento 5.- Técnicas para CSS.
SUB 3.2 Presentación N/A
SUP 3.2 Presentación N/A
TABLE 3.2 Estructura 4.5 Tablas.
TBODY   Estructura 4.1.4.- Agrupación estructural, 4.5.1.- Tablas de datos.
TD 3.2 Estructura 4.5.1.- Tablas de datos.
TEXTAREA 2.0, 3.2 Estructura 4.11.7.- Técnicas para controles específicos.
TFOOT   Estructura 4.1.4.- Agrupación estructural, 4.5.1.- Tablas de datos, 4.5.4.- Cuestiones de compatibilidad con lo anterior para tablas.
TH 3.2 Estructura 4.5.1.- Tablas de datos.
THEAD   Estructura 4.1.4.- Agrupación estructural, 4.5.1.- Tablas de datos.
TITLE 2.0, 3.2 Metadato 4.1.1.- Metadatos.
TR 3.2 Estructura N/A
TT 2.0, 3.2 Presentación N/A
U* 3.2 Estructura N/A
UL 2.0, 3.2 Estructura 4.1.4.- Agrupación estructural, 4.4.- Listas.
VAR 2.0, 3.2 Estructura 4.3.5.- Diversas etiquetas estructurales.

Atributos.

Versión lineal del índice de atributos de HTML 4.0.

Este índice lista algunos atributos de HTML 4.0 que afectan a la accesibilidad y los elementos que aplican. La primera columna de esta tabla vincula a la definición del atributo en la especificación HTML 4.0 [HTML40]. Los atributos y elementos desaconsejados en HTML 4.0 [HTML40] van seguidos de un asterisco (*). Los atributos y elementos que están obsoletos para HTML 4.0 o no existen en una especificación HTML (2.0, 3.2, 4.0) no aparecen en esta tabla. Los atributos que se aplican a la mayoría de los elementos de HTML 4.0 se indican de esta manera; por favor, consulte la especificación HTML 4.0 para la relación exacta de elementos con este atributo.
La segunda columna indica los elementos que toman este atributo. La tercera columna indica la función del atributo.
La última columna lista las secciones en el presente documento donde el atributo se trata. La entrada "N/A" significa que el elemento no se trata en este documento.

Nombre del atributo Aplicable a los elementos Función Técnicas
abbr TD, TH Alternativa 4.5.1.- Tablas de datos.
accesskey A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA Interfaz de usuario 4.11.5.- Acceso desde el teclado a los formularios.
alt APPLET, AREA, IMG, INPUT Alternativa 3.2.1.- Revisión de las tecnologías, 4.7.1.- Textos equivalentes para imágenes, 4.7.2.- Vínculos-d invisibles, 4.7.5.- Mapas de imagen del lado del cliente, 4.7.6.- Mapas de imagen del lado del servidor, 4.8.1.- Textos equivalentes para applets y otros objetos, 5.6.1.- Si debe utilizar imágenes como espaciadores.
axis TD, TH Estructura 4.5.1.- Tablas de datos.
class Mayoría de elementos Estructura 4.6.1.- Vínculos de agrupación y desviación.
dir Mayoría de elementos Procesamiento 4.5.1.- Tablas de datos.
for LABEL Estructura 4.11.3.- Etiquete explícitamente los controles del formulario.
headers TD, TH Estructura 4.5.1.- Tablas de datos.
hreflang A, LINK Metadato 3.7.- Negociación del contenido.
id Mayoría de elementos Estructura 4.6.1.- Vínculos de agrupación y desviación.
label OPTION Alternativa 4.11.4.- Agrupe las opciones de menú.
lang Mayoría de elementos Metadato 4.2.- Información sobre el idioma.
longdesc IMG, FRAME, IFRAME Alternativa 3.2.1.- Revisión de las tecnologías, 4.7.1.- Textos equivalentes para imágenes.
scope TD, TH Estructura 4.5.1.- Tablas de datos.
style Mayoría de elementos Procesamiento 5.- Técnicas para CSS.
summary TABLE Alternativa 4.5.1.- Tablas de datos.
tabindex A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA Interfaz de usuario 4.6.1.- Vínculos de agrupación y desviación, 4.6.2.- Acceso desde el teclado, 4.11.5.- Acceso desde el teclado a los formularios.
title Mayoría de elementos Metadato 3.2.2.- Compatibilidad con lo anterior, 4.1.1.- Metadatos, 4.3.2.- Acrónimos y abreviaturas, 4.6.- Vínculos, 4.7.3.- Ascii art.
usemap IMG, INPUT, OBJECT Procesamiento 4.7.4.- Mapas de imagen.

La siguiente es una lista de atributos HTML 4.0 no relacionados directamente con la accesibilidad. Los desarrolladores de contenido deberían usar hojas de estilo en lugar de atributos de presentación. Para los atributos de manejadores de eventos, por favor, consulte la sección "manejadores de eventos independientes del dispositivo" para más detalles.

Otros atributos estructurales:

start*, value*, rowspan, colspan, span.
Otros atributos de presentación:
aling*, valing*, clear*, nowrap*, char, caroff, hspace*, vspace*, cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*, color*, text*, link*, alink*, vlink*, boder, noshade*, rules, size (desaconsejado por concordar con el elemento), marginheight, marginwidth, frame, frameborder, rows, cols.
Otros atributos del proceso de instrucción:
ismap, coords, shape.
Otros atributos de la interfaz de usuario:
target, scrolling, noresize.
Otros atributos de metadatos:
type, cite, dtetime.
Atributos de los manejadores de eventos:
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload.

Agradecimientos.

Co-directores del Grupo de Trabajo de las Pautas de Contenido en la Web:
Chuck Letourneau, Starling Acces Service.
Gregg Vanderheiden, Trace Research and Development.
Contactos con el equipo W3C:
Judy Brewer y Daniel Dardailler.
Nuestro agradecimiento a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNeville, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Teviranus, Steve Tyler, Jaap van Lelieveld y Jason White.


El borrador original de este documento está basado en "The Unified Web Site Accessibility Guidelines" ([UWSAG]) compilado por el Trace R&D de la Universidad de Wisconsin. Ese documento contiene una lista adicional de personas que han contribuido.
 

Especificaciones referenciadas.

Para ver la última versión de cualquier especificación W3C, por favor, consulte la lista de Informes Técnicos de W3C.

[CSS1]

"CSS, level 1 Recommendation". Editores: B. Bos y H. Wium Lie. 17 de diciembre de 1996, revisada el 11 de enero de 1999. Puede encontrar la Recomendación CSS1 en:
http://www.w3.org/TR/1999/REC-CSS1-19990111.
La última versión de CSS1 está disponible en:
http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation". Editores: B. Bos, H Wium Lie, C. Lilley e I. Jacobs. 12 de mayo de 1998. Puede encontrar la Recomendación CSS2 en:
http://www.w3.org/TR/1998/REC-CSS2-19980512.
La última versión de CSS2 está disponible en:
http://www.w3.org/TR/REC-CSS2.
[DOM1]
"Document Object Model (DOM). Level 1 Specification". Editores: V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson y L. Wood. 1 de octibre de 1998. Puede encontrar la Recomendación DOM nivel 1 en:
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001.
La última versión de DOM nivel 1 está disponible en:
http://www.w3.org/TR/REC-DOM-Level-1.
[HTML40]
"HTML 4.0 Recommendation". Editores: D. Raggett, A. Le Hors e I. Jacobs. 17 de diciembre de 1997, revisada el 24 de abril de 1998. Puede encontrar la Recomendación HTML 4.0 en:
http://www.w3.org/TR/1998/REC-html40-19980424.
La última versión de HTML 4.0 está disponible en:
http://www.w3.org/TR/REC-html40.
[HTML32]
"HTML 3.2 Recommendation". Editor: D. Raggett. 14 de enero de 1997, revisada el 24 de abril de 1998. La última versión de HTML 3.2 está disponible en:
http://www.w3.org/TR/REC-html32.
[MATHML]
"Mathematical Markup Language". Editores: P. Ion y R. Miner. 7 de abril de 1998. Puede encontrar la Recomendación MathML 1.0 en:
http://www.w3.org/TR/1998/REC-MathML-19980407.
La última versión de MathML 1.0 está disponible en:
http://www.w3.org/TRREC-MathML.
[PNG]
"PNG (Portable Network Graphics) Specification". Editor: T. Boutell. Contribuyó a la edición: T. Lane. 1 de octubre de 1996. La última versión de PNG 1.0 está disponible en:
http://www.w3.org/TR/REC-png.
[RDF]
"Resource Description Framework (RDF) Model and Syntax Specification". Editores: O. Lassila y R. Swick. 22 de febrero de 1999. Puede encontrar la Recomendación RDF en:
http://www.w3.org/TR/1999/REC-rdf-syntax-19990222.
La última versión de RDF 1.0 está disponible en:
http://www.w3.org/TR/REC-rdf-syntax.
[RFC2068]
"HTTP Version 1.1". R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen y T. Berners-Lee. Enero de 1997.
[SMIL]
"Synchronized Multimedia Integration Language (SMIL) 1.0 Specification". Editor: P. Hoschka. 15 de junio de 1998. Puede encontrar la Recomendación SMIL 1.0 en:
http://www.w3.org/TR/1998/REC-smil-19980615.
La última versión de SMIL 1.0 está disponible en:
http://www.w3.org/TR/REC-smil.
[TECHNIQUES]
"Techniques for Web Content Accessibility Guidelines 1.0". Editores: W. Chisholm, G. Vanderheiden e I. Jacobs. Este documento explica como implementar los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0". La última versión de estas Técnicas está disponible en:
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS.
[WAI-AUTOOLS]
"Authoring Tool Accessibility Guidelines". Editores: J. Treviranus, J. Richards, I. Jacobs y Charles McCathieNevile. El último borrador de trabajo de estas pautas para el diseño accesible de las herramientas de autor está disponible en:
http://www.w3.org/TR/WAI-AUTOOLS/.
[WAI-UA-SUPPORT]
Los documentos de esta página tratan sobre el soporte para las aplicaciones de usuario (incluidas las ayudas técnicas) de algunas características de accesibilidad relacionadas en este documento. La página está disponible en:
http://www.w3.org/WAI/Resources/WAI-UA-Support.
[WAI-USERAGENT]
"User Agent Accessibility Guidelines". Editores: J. Gunderson e I. Jacobs. El último borrador de trabajo de estas pautas para el diseño accesible de aplicaciones de usuario está disponible en:
http://www.w3.org/TR/WAI-USERAGENT/.
[WCAG-ICONS]
La información sobre los iconos de adecuación a este documento y como utilizarlos está disponible en:
http://www.w3.org/WAI/WCAG1-Conformance.html.
[UWSAG]
"The Unified Web Site Accessibility Guidelines". Editores: G. Vanderheiden y W. Chisholm. Las Pautas Unificadas para los Sitios Web fueron compiladas por el Trace R & D Center de la Universidad de Wisconsin con la financiación del National Institute on Disability and Rehabilitation Research (NIDRR) del Departamento de Educación de EE.UU. Este documento está disponible en:
http://www.tracecenter.org/docs/html_guidelines/version8.htm.
[XML]
"Extensible Markup Language (XML) 1.0". Editores: T. Bray, J. Paoli y C.M. Sperberg-McQueen. 10 de febrero de 1998. Puede encontrar la Recomendación XML 1.0 en:
http://www.w3.org/TR/1998/REC-xml-19980210.
La última versión de las XML 1.0 está disponible en:
http://www.w3.org/TR/REC-xml.

Servicios.

Observación: El W3C no puede mantener la estabilidad para cualquiera de las siguientes referencias que se encuentran fuera de su control. Estas referencias están incluidas por conveniencia.

[ASTER]

Para información sobre ASTER "Audio System For Technical Readings", consulte la página principal de T.V. Raman's.
[BOBBY]
Bobby es una herramienta de verificación automática de la accesibilidad desarrollada por Cast.
[BROWSERCAPS]
BrouserCaps.
[CSSVAL]
Servicio de validación de W3C para CSS.
[DVS]
DVS Descriptive Video Service.
[HACKER]
Hacker, Diana. (1993). A Pocket Style Manual. St. Martin's Press, Inc. 175 Fifth Avenue, New York, NY 10010.
[HOMEPAGEREADER]
Home Page Reader de IBM.
[HTMLVAL]
Servicio de validación de W3C para HTML.
[HYPERMEDIA]
IBM's techexplorer Hypermedia Browser.
[IBMJAVA]
Las pautas de IBM para escribir aplicaciones accesibles utilizando puro Java al 100% están disponibles en el Sistema de Necesidades Especiales de IBM.
[JAVAACCESS]
Información sobre Accesibilidad y Usabilidad de Java está disponible en el Trace R & D Center.
[JAWS]
Lector de pantalla Jaws de Henter-Joyce.
[LIGHTHOUSE]
Lighthouse proporciona información sobre colores y contrastes accesibles.
[LYNX]
Lynx es un navegador sólo-texto.
[LYNXME]
Lynx-me es un emulador de Lynx.
[LYNXVIEW]
Lynx Viewer es un emulador de Lynx.
[MACROMEDIA]
Flash OBJECT and EMBED Tag Syntax de Macromedia.
[NCAM]
El sitio del National Center for Accessible Media incluye información sobre subtitulado y descripciones de audio en la Web.
[PWWEBSPEAK]
The Productivity Works' pwWebSpeak.
[SPOOL]
Spool, J.M., Sconlong, T., Schoroeder, W., Snyder, C. y DeAngelo, T. (1997). Web Site Usability: "A Designer's Guide User Interface Engineering". 800 Turnpike St, Suite 100, North Andover, MA 01845.
[TECHHEAD]
Tech Head proporciona alguna información sobre el índice Fog descrito en [SPOOL].
[TRACE]
El Trace Research & Developement Center. Consulte su sitio para conseguir una variada información sobre la accesibilidad, incluyendo un applet desenrollable de Java que puede ser congelado por el usuario.
[WAI-ER]
Grupo de Trabajo sobre Evaluación y Reparación de WAI.
[WALSH]
Walsh, Norman. (1997). "A Guide to XML" en "XML: Principles, Tools, and Techniques". Dan Connolly, Ed. O'Reilly & Associates, 101 Morris St, Sebastopol, CA 95472. pp 97-107.
[WEBREVIEW]
webreview.com gráficos de compatibilidad de las hojas de estilo de los navegadores.
[WINVISION]
WinVision de Artic.

 

Otros documentos de este libro:

Volver la la página principal de DisWeb2000.
Volver al comienzo de la página.

Este sitio trata de ser accesible para todos. Si encuentras problemas al navegarlo, no dudes en ponerte en contacto con nosotros en:
disweb2000@ono.com