- 

---

[ WCAG10 ] [ Verificación WCAG10 ] [ Técnicas WCAG10 ] [ Preguntas sobre WCAG10 ] [ Referencia rápida ]

Esta versión:

http://www.oocities.org/carlos_egea/tecnicaswcag10.htm

Versión original en inglés:

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS

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

http://www.w3.org/TR/WAI-WEBCONTENT

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

http://www.oocities.org/carlos_egea/wcag10.html

Editores:

Wendy Chisholm, Trace R & D Center, Universidad de Wisconsin - Madison.

Gregg Vanderheiden, Trace R & D Center, Universidad de Wisconsin - Madison.

Ian Jacobs, W3C.

Traducción:

Alicia Sarabia Sánchez y Carlos Egea García.

Para comunicar errores de esta traducción o proponer comentarios a la misma, envie un mensaje a Carlos Egea García.

Resumen.

Estatus de este documento.

Í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 validación.
Índice de elementos y atributos HTML.
    Elementos.
    Atributos.
Agradecimientos.
Especificaciones referenciadas.
Servicios.

1.- Prioridades.

[Prioridad 1]

El desarrollador de contenidos de la Web tiene que satisfacer este punto de validación. De otro modo, a uno o más grupos les resultará imposible acceder a la información del documento. Que este punto de validació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 validació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 validació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 validació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 validación mejorará el acceso a los documentos Web.

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

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 validació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 validación aplicables en CSS1 y CSS2 (consultar [CSS1], [CSS2]).

2.1.- Ejemplos y ejemplos desaconsejados.

3.- Temas de accesibilidad.

3.1.- Estructura contra presentación.

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.

3.2.- Textos equivalentes.

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

3.2.2.- Compatibilidad con lo anterior.

• Algunas aplicaciones de usuario no soportan algunas presentaciones HTML.
• La gente puede usar navegadores o reproductores de vídeo antiguos.
• Pueden surgir problemas de compatibilidad entre el software.

• Proporcione textos equivalentes internos. Por ejemplo, incluir una descripción de la imagen inmediatamente después de la misma.
• Proporcione vínculos hacia textos equivalentes extensos, ya sea en un archivo distinto o en la misma página. Estos son denominados vínculos descriptivos o "d-links". El texto vinculado debería explicar que el vínculo señala a una descripción. Donde sea posible, también debería explicar la naturaleza de la descripción. No obstante, los desarrolladores preocupados por el modo en que el vínculo descriptivo puede afectar a la apariencia visual de las páginas, deben usar vínculos de texto más discretos tales como "[D]", lo cual es recomendado por NCAM (consultar [NCAM]). En este caso, deben también proporcionar más información sobre la etiqueta del vínculo, de modo que los usuarios puedan distinguir los vínculos que comparten "[D]" como contenido (por ejemplo, mediante el atributo "title" en HTML).

3.3.- Páginas alternativas.

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.

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 LINKtal y como sigue:

3.4.- Acceso desde el teclado.

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.

3.5.- Navegación.

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

3.6.- Comprensión.

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

3.6.1.- Estilo de escritura.

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

3.6.2.- Equivalentes multimedia.

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

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.

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

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 estandar, los desorienta y puede interrumpir la historia de navegación de las páginas visitadas.
 

Ejemplo desanconsejado: <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. </BODY>

3.9.- Parpadeo de la pantalla.

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 (herzios), 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.

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

• Utilice metadatos para describir la relación entre los componentes del paquete (consultar metadatos del vínculo para HTML).
• Utilice herramientas de archivo tales como zip, tar y gzip, y stuffit para crear el paquete.

3.11.- Validación.

3.11.1.- Validadores automáticos.

1. Una herramienta de validación de la accesibilidad automatizada, tal como Bobby (consultar [BOBBY]).
2. Un servicio de validación HTML, como el Servicio de Validación W3C HTML (consultar [HTMLVAL]).
3. Un servicio de validación de hojas de estilo, como el Servicio de Validación W3C CSS (consultar [CSSVAL]).

3.11.2.- Herramientas de reparación.

3.11.3.- Posibilidades del usuario.

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:
• Sonidos e imágenes cargadas.
• Imágenes no cargadas.
• Sonidos no cargados.
• Sin ratón.
• Marcos, scripts, hojas de estilo y applets no cargados.
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.

3.12.- Soporte del navegador.

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

4.1.- Estructura del documento y metadatos.

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.

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:

• TITLE: El título del documento. Observe que el (preceptivo) elemento TITLE, que sólo aparece una vez en un documento, es diferente del atributo "title", que se aplica a casi todos los elementos HTML 4.0. Los desarrolladores de contenido deberían usar el atributo "title" de acuerdo con las especificaciones HTML 4.0. Por ejemplo, "title" debería ser usado con vínculos para proporcionar información sobre el objetivo del vínculo.
• ADDRESS: Puede usarse para proporcionar información sobre el creador de la página.
• LINK: Puede ser usado para iniciar documentos alternativos (diferente estructura, diferente idioma, diferente mecanismo de llegar al objetivo).
• El elemento META puede especificar metadatos subjetivos para un documento. Por favor, consulte en la sección de refresco automático de la página para obtener información sobre por qué META no debe usarse para remitir a páginas.

4.1.2.- Encabezamientos de sección.

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.

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="Siguiente" href="capitulo2"> <LINK rel="Anterior" href="capitulo1"> <LINK rel="Inicio" href="cubierta"> <LINK rel="Glosario" href="glosario">

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

4.1.4.- Agrupación estructural.

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

• Utilice FIELDSET para agrupar controles de formulario en unidades semánticas y describa el grupo con el elemento LEGEND
• Utilice OPTGROUP para organizar las listas largas de opciones de menú en grupos más pequeños.
• Utilice tablas para datos tabulares y describa la tabla con CAPTION.
• Agrupe las filas y columnas de las tablas con THEAD, TBODY, TFOOT y COLGROUP.
• Anide lista con UL, OL y DL.
• Use los encabezamientos de sección (H1 - H6) para crear documentos estructurados y separar tramos largos de texto.
• Separar líneas de texto en los párrafos (con el elemento P).

4.2.- Información sobre el idioma.

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.

4.3.- Etiquetas de texto.

4.3.1.- Énfasis.

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.

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.

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.

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:

• El texto puede ser ampliado o interpretado como discurso o braille.
• Los mecanismos de búsqueda pueden usar la información del texto.

• Asegurese de que el usuario sabe lo que representan las variables, por ejemplo, en la ecuación "F = m * a", indique que F = fuerza, m = masa y a = aceleración.
• Para ecuaciones más simples utilice caracteres, como en "x + y = z".
• Para ecuaciones más complejas, márquelas con MathML ([MATHML]) o TeX. Nota: MathML puede ser usado para crear documentos nuy accesibles, pero comúnmente no es tan ampliamente apoyado y usado como TeX.
• Proporcione una descripción de texto de la ecuación y, donde sea posible, use referencias con entidad de caracteres para crear símbolos matemáticos. Debe proporcionarse un texto equivalente si la ecuación está representada por una o más imágenes.

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.

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.

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

Hasta que CSS2 sea ampliamente utilizada o las aplicaciones de usario 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 item de la misma. Por ejemplo, si un apartado de la lista envuelve a la siguiente línea en la pantalla, puede parecer ser dos items 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 asegurar más aun que los usuarios comprenden las diferencias entre los items de la lista indicados visualmente, los desarrolladores de contenido deberían proporcionar una etiqueta de texto antes o después de la frase del item 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 imagenes 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.

4.5.1.- Tablas de datos.

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

• Identifique grupos estructurales de filas (THEAD para encabezamientos de tabla repetidos, TFOOT para pies de tabla repetidos y TBODY para otros grupos de fila) y grupos de columnas (COLGROUP y COL). Etiquete los elementos de tabla con los atributos "scope", "headers" y "axis", de forma que los futuros navegadores y ayudas técnicas sean capaces de seleccionar datos de una tabla filtrando por categorías. Esta etiqueta ayudará también a los navegadores a alinear tablas (también denominado "serialización" de tablas). Puede crearse una versión lineal basada en las filas leyendo el encabezamiento de la fila y anteponiendo a cada celda el encabezamiento de la columna de la celda. La alinéación podría estar basada en columnas. Tenga en cuenta que la dirección natural de escritura del idioma puede afectar a la disposición de la columna (y por tanto la ordenación). En HTML, el atributo "dir" especifica el orden de disposición de la columna (por ejemplo, dir="rtl" especifica una disposición de derecha a izquierda).
• No utilice PRE para crear una disposición tabular de texto -- utilice el elemento TABLE de forma que las ayudas técnicas puedan reconocer que es una tabla.
• Proporcione un título a través del elemento CAPTION.
• Proporcione un resumen a través del atributo "summary". Los resúmenes son especialmente útiles para los lectores no videntes.
• Proporcione subtítulos claros para las etiquetas de encabezamiento con el atributo "abbr" en TH. Estas serán particularmente útiles para las futuras tecnologías habladas que puedan leer las etiquetas de fila y columna para cada celda. Las abreviaturas reducen las repeticiones y el tiempo de lectura.
• Los futuros navegadores y ayudas técnicas serán capaces de trasladar automáticamente las tablas a secuencias lineales o navegar una tabla de celda en celda si el dato está adecuadamente etiquetado. El Grupo de Trabajo de Evaluación y Reparación de WAI está siguiendo el progreso de las herramientas, así como desarrollando las suyas propias, que permiten a los usuarios navegar las tablas de celda en celda. Consulte [WAI-ER].

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.

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

 

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>

4.5.2.- Evite las tablas para maquetar.

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.

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 leeran 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 llueva esta mañana, pero ellos deberían parar antes del fin de semana.

Las clases de la Universidad de Wisconsin se reanudarán el 3 de septiembre.

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

4.6.- Vínculos.

Un buen vínculo de texto no debería ser demasidado 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.html" ***creo que sería topo.gif***         alt="Rutas actuales al Gimnasio Boulders Climbing" </A>

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

• Incluya un vínculo que permita al usuario saltar sobre el conjunto de vínculos de navegación.
• Utilice el atributo "tabindex" de HTML 4.0 para permitir al usuario saltar a un punto de destino después del conjunto de vínculos de navegación. Este atributo todavía no está suficiente extendido.
• Proporcione una hoja de estilo que permita a los usuarios ocultar el conjunto de vínculos de navegación.

4.6.2.- Acceso desde el teclado.

4.7.- Imágenes y mapas de imagen.

4.7.1.- Textos equivalentes para imágenes.

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 ventas en 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 textual</A> está disponible. </OBJECT>

4.7.2.- Vínculos-d invisibles.

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.

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 (Hertz)

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 pestañeante: ;-). O las palabras "por tanto" pueden sustituir a las flechas realizadas con guiones y el signo "mayor que" (por ejemplo: --->) y la palabra "grande" para la poco común abreviatura "gr8".

4.7.4.- Mapas de imagen.

4.7.5.- Mapas de imagen del lado del cliente.

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.

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:

• Incluya los vínculos alternativos en el cuerpo de un elemento OBJECT (consulte el ejemplo sobre vínculos en el elemento OBJECT, previo).
• Si se utiliza IMG para insertar la imagen, proporcione una lista alternativa de vínculos tras aquella, e indique la existencia y ubicación de la lista alternativa (por ejemplo, a través del atributo "alt").

• Si no hay otras posibilidades para hacer el mapa de imagen accesible, cree una página alternativa que sí sea accesible.

4.8.- Applets y otros objetos programados.

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

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.

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.

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.

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

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.

4.9.4.- Textos equivalentes para multimedia.

4.9.5.- Objetos multimedia empaquetados.

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

4.10.- Marcos.

• Sin un guión, tienden a romper la funcionalidad de "página anterior" que ofrecen los navegadores.
• Es imposible referirse al "estado actual" de un marco con una URI; una vez cambian los contenidos de un marco, no se puede volver a aplicar la URI original.
• Abrir un marco en una nueva ventana del navegador puede desorientar o sencillamente incomodar a los usuarios.

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

4.10.2.- Textos equivalentes para marcos.

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.

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

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 imagenes 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">

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

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.

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

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.

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

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.

4.11.1.- Haga accesibles los controles del teclado.

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

4.11.2.- Grupo de controles de formulario.

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

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

4.11.5.- Acceso desde el teclado a los formularios.

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.

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:

• Utilice múltiples botones de envío (cada uno con su propia imagen) en lugar de un solo botón gráfico de envío. Los autores deben utilizar hojas de estilo para controlar la posición de estos botones.
• Utilice un mapa de imagen del lado del usuario junto con el subprograma (scripting).

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

Puntos de validació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,

• El elemento BUTTON no aparece.
• INPUT con type="button" > aparecerá como un campo de entrada de texto.

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

• Evite crear contenido flotante para el cliente. Si el navegador del usuario no ejecuta scripts, no se generará o desplegará ningún contenido. No obstante, esto es diferente que desplegar u ocultar un contenido ya exitente mediante la utilización combinada de hojas de estilo y scripts; si no se ejecuta el script, igualmente se mostrará el contenido. Esto tampoco excluye que se generen páginas flotantes del lado del servidor y se envíen al cliente.
• Evite crear vínculos que utilicen "javascript", como URI. Si un usuario no está utilizando scripts, no será capaz de seguir los enlaces, puesto que el navegador no puede crear el contenido del vínculo.

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 validació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):
• Utilice "onmousedown" con "onkeydown".
• Utilice "onmouseup" con "onkeyup".
• Utilice "onclik" con "onkeypress".
Observe que no hay equivalente en el teclado para la doble pulsación ("ondblclick") en HTML 4.0.
3. 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 validació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 validación en esta sección: 6.1 y 3.4.

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

• Utilice un número mínimo de hojas de estilo en su sitio.
• Si tiene más de una, utilice el mismo nombre "class" para el mismo concepto en todas las hojas.
• Utilice hojas de estilo vinculadas mejor que envueltas, y evite las hojas de estilo "inline".
• Los desarrolladores de contenido no deberían escribir líneas "!important". Deben hacerlo los usuarios donde sea necesario.
• Utilice la unidad "em" para los tamaños de letra.
• Utilice unidades de medida relativas y porcentajes. CSS le permite utilizar unidades relativas incluso en posiciones absolutas. Por tanto, puede colocar una imagen que será compensada por "3em" desde el comienzo del elemento que la contenga. Es una distancia fija, pero relativa al tamaño de las letras, con lo cual se escalará adecuadamente.
• Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas.
• Especifique siempre una fuente genérica por defecto.
• Utilice números, no nombres, para los colores.
• Proporcione un texto equivalente para cualquier imagen o texto importantes, generados con hojas de estilo (por ejemplo, a través de las propiedades "imagen de fondo", "estilo de lista" o "contenido").

Nota: El texto generado con hojas de estilo es parte del documento de origen y puede no estar disponible para las ayudas técnicas que acceden al contenido a través de DOM, nivel 1 ([DOM1]).
• Asegúrese de verificar que sus hojas son legibles aun sin hojas de estilo.

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 validación en esta sección: 7.2.

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

• Tipo: 'text-transform (para mayúsculas, minúsculas y letras capitales).
• Sombreado: 'text-shadow'.
• Subrayados, resaltado de vínculos, parpadeo: 'text-decoration'. Nota: Si se utiliza contenido parpadeante (por ejemplo, un encabezamiento que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. En CSS, 'text-decoration: blink' provocará que el contenido parpadee y permitirá a los usuarios detener el efecto desconectando las hojas de estilo o anulando la regla en una hoja de estilo de usuario. No utilice los elementos BLINK y MARQUEE. Estos elementos no son parte de ninguna especificación W3C para HTML (por ejemplo, no son elementos estándar).

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:

• Sangría: 'text-indent'. No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto.
• Espaciado de letras o palabras: 'letter-spacing', 'word-spacing'. Por ejemplo, en lugar de escribir "H O L A" (que los usuarios generalmente reconocen como la palabra "hola", pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a "hola" la propiedad 'word-spacing". Los textos sin espacios serán transformados en discurso más fácilmente.
• Espacio en blanco: 'white-space'. Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento.
• Dirección del texto: 'direction', 'unicode-bidi'.
• Los pseudoelementos :first-letter y :first-line permiten a los autores remitir a la primera letra o línea de un párrafo 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 validación en esta sección: 2.1 y 2.2.

Utilice las propiedades CSS para especificar colores:

• 'color', para el color del texto en primer plano.
• 'background-color', para los colores del fondo.
• 'border-color', 'outline-color', para los colores de los bordes.
• Para los colores de los vínculos, remita a las pseudo-clases :link, :visited y :active.

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

• Están rodeados por un borde.
• Utilizan un color de fondo diferente.
• Comienzan por la palabra "Ejemplo" (o "Ejemplo desaconsejado").
• También terminan con la frase "fin del ejemplo", pero esta frase está escondida por defecto con 'display: none'. Para las aplicaciones de usuario que no soportan hojas de estilo o cuando se desconectan las hojas de estilo, este texto ayuda a delimitar el fin de un ejemplo a los lectores que no sean capaces de ver el borde que rodea el ejemplo.

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

• Cada una de las propiedades 'text-indent', 'text-aling', 'word-spacing' y 'font-stretch', permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-aling:center' en lugar del elemento CENTER.
• Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios "non-breaking" (&nbsp;), que son etiquetas no estandarizadas, para crear espacio alrededor de un elemento.
• Con las propiedades 'float', 'position', 'top', 'right', 'bottom' y 'left', el usuario puede controlar la posición visual de casi cualquier elemento de manera independiente a cómo aparezca el elemento en el documento. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales. Las propiedades de posicionamiento pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.
• La propiedad 'empty-cells' permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en el papel. Una celda de datos que debe estar vacía, no debería ser llenada con un espacio en blanco o un espacio "non-breaking" sólo para lograr un efecto visual.

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:

• 'border', 'border-width', 'border-style', 'border-color'.
• Para las tablas, 'border-spacing' y 'border-collapse'.
• Para contornos dinámicos, 'outline', 'outline-color', 'outline-style' y 'outline-width'.

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 pixels 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 validación.

Este índice lista cada punto de validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validación 3.5 en las pautas).

Consulte: 4.1.2 Encabezamientos de sección.

3.6 Etiquete apropiadamente las listas y los items de las listas. [Prioridad 2] (Punto de validació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 validació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 validació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 validació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 validació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 validació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 validació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 linearicen. Por otra parte, si la tabla no tiene sentido, proporcione un equivalente alternativo (que puede ser una versión linearizada). [Prioridad 2] (Punto de validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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, evitelo en las páginas. [Prioridad 2] (Punto de validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 caractéres imprimibles que no sean parte del vínculo (rodeados por espacios) entre los vínculos adyacentes. [Prioridad 3] (Punto de validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validació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 validación 14.3 en las pautas).

Consulte: 3.5 Navegación.

Índice de elementos y atributos HTML.

Puntos de validació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écnica
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	Reemplamiento	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	Aplicado al elemento	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 validació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 validació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.

---

Volver al inicio de esta página.
Volver a la página principal.

[ WCAG10 ] [ Verificación WCAG10 ] [ Técnicas WCAG10 ] [ Preguntas sobre WCAG10 ] [ Referencia rápida ]

Este sitio en la Web trata de ser accesible para todas las personas con algún tipo de limitación funcional y para todo tipo de navegadores.
Si encuentra algún problema al visitarlo, no dude en ponerse en contacto con el responsable del mismo.
Envíe un correo electrónico a:
disweb@oocities.com

|  | |