La única versión normativa de este documento es la versión original en inglés que se encuentra en el sitio web del W3C http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/.

Ninguna parte del presente documento en castellano es normativa aunque se especifique lo contrario.

Copyright © 1999-2000 W3C ® (MIT, INRIA, Keio), Todos los Derechos Reservados. Son aplicables las reglas del W3C sobre  obligaciones, marcas registradas, utilización de documentos y licencias de software.

Traductores: Carlos Egea, Alicia Sarabia, Alan Chuter

[índice]  

W3C

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

Nota de 6 noviembre de 2000 de W3C

Esta versión (en inglés):
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
(texto plano, PostScript, PDF, archivo gzip tar del HTML, archivo zip del HTML)
La última versión (en inglés):
http://www.w3.org/TR/WCAG10-CSS-TECHS/
Versión anterior (en inglés):
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/
Editores:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center, Universidad de Wisconsin -- Madison;
Ian Jacobs, W3C

Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), Reservados todos los derechos. Las reglas W3C de responsabilidad, marcas, uso de documentos y licencia de software son de aplicación.

Resumen

Este documento describe unas técnicas para la creación de hojas de estilo en cascada (CSS) accesibles. Las hojas de estilo CSS son definidas por las recomendaciones del W3C "CSS Level 1" [CSS1] y "CSS Level 2" [CSS2]. El propósito de este documento es ayudar a los creadores de contenidos Web quienes desean manifestar su cumplimiento de las "Pautas de Accesibilidad al Contenido en la Web 1.0" ([WCAG10]). Aunque las técnicas descritas en este documento ayudarán a crear CSS conforme a las "Pautas de Accesibilidad al Contenido en la Web 1.0", estas técnicas no garantizan la conformidad y no son la única manera de crear contenidos conformes.

Este documento es parte de una serie de documentos sobre técnicas para crear contenidos Web accesibles. Para información sobre otros documentos de la serie, consúltense las "Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0" [WCAG10-TECHS].

Nota: Este documento contiene algunos ejemplos que ilustran soluciones accesibles en CSS pero también ejemplos desaconsejados que ilustran lo que los desarrolladores de contenidos no deben hacer. Los ejemplos desaconsejados están resaltados y los lectores los deben leer con precaución -- se incluyen únicamente a título de ilustración.

Estatus de este documento

Esta versión se publica para corregir algunos vínculos rotos de la versión anterior.

La versión de 6 de noviembre 2000 de este documento es una Nota, de una serie de Notas, producidas y suscritas por el Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web (WCAG WG). Esta Nota no ha sido revisada ni suscrita por los Miembros de W3C. La serie de documentos sustituye al documento "Nota de 5 de mayo de 1999. Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0". Los temas del documento anterior se han dividido en documentos separados, uno para cada tecnología específica, que pueden evolucionar de forma independiente. Estos documentos más cortos específicos para cada tecnología facilitan a los autores centrarse en una tecnología concreta.

Mientras que la Recomendación "Pautas de Accesibilidad al Contenido en la Web 1.0" [WCAG10] es un documento estable, se espera que esta serie de documentos específicos evolucione según cambian las tecnologías y los desarrolladores de contenidos descubran técnicas más efectivas para el diseño de contenidos Web accesibles.

Están disponibles el histórico de cambios en la serie de documentos así como la lista de temas abiertos y cerrados . Animamos a los lectores a comentar el documento y proponer soluciones a los temas abiertos. Por favor, envíe los comentarios detallados sobre este documento al Grupo de Trabajo a w3c-wai-gl@w3.org; se puede consultar el archivo público de mensajes.

La versión en inglés de esta especificación es la única versión normativa. No obstante, pueden existir traducciones en otros idiomas.

La lista de errores conocidos de este documento está disponible en "Errores en las Pautas de Accesibilidad al Contenido en la Web". Se ruega informen sobre los errores encontrados en este documento a wai-wcag-editor@w3.org.

La Iniciativa de Accesibilidad en la Web - WAI del Consorcio World Wide Web (W3C) proporciona una variedad de recursos sobre accesibilidad en la Web. Las Pautas de Accesibilidad WAI son producidas como parte de la Actividad Técnica de la WAI. Los objetivos del Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web están descritos en los estatutos.

Está disponible una lista de las actuales Recomendaciones y otros documentos técnicos de W3C.

Índice

1 Reducir el mantenimiento y aumentar la coherencia

Puntos de verificación en esta sección:

Técnicas:

2 Permitir al usuario redefinir los estilos

Punto de verificación en esta sección:

Técnicas:

Para asegurar que los usuarios puedan controlar los estilos, CSS2 modifica la semántica del operador "!important" definido por CSS1. Con CSS1, el autor siempre tenía la última palabra sobre los estilos. Con CSS2, si la hoja de estilo del usuario contiene "!important", esto tiene prioridad sobre cualquier regla aplicable en la hoja de estilo del autor. Esta es una característica importante para los usuarios que necesitan o que tienen que evitar ciertas combinaciones o contrastes de colores, usuarios que necesitan letra grande, etc. Por ejemplo, la regla siguiente especifica una letra grande para el texto de párrafo y tendría prioridad para redefinir sobre una regla de autor con el mismo peso:

Ejemplo.

P { font-size: 24pt ! important }

El valor de CSS2 "inherit" - que está disponible para cualquier propiedad - da lugar a reglas de estilo "!important" compactas que definen gran parte o todo el documento. Por ejemplo, las siguientes reglas de estilo fijan el color de fondo a blanco y el de primer plano a negro para todos los elementos.:

Ejemplo.

  
/* Fija el color del texto en negro
   y el color de fondo en blanco para 
   todo el "body" del documento.
*/

BODY {     
  color: black ! important ;      
  background: white ! important  
}

/* Tiene el efecto de que los valores de 
   "color" y "background" son heredados por todos 
   los otros elementos que tienen mas fuerza 
   debido a !important. 
   Note que esta característica puede ser 
   redefinida por otros estilos mas específicos.
*/

* {   
  color: inherit ! important ;   
  background: inherit ! important
}

CSS2 también incluye estas características para permitir el control por parte del usuario:

Por ejemplo, para dibujar una línea negra gruesa alrededor de un elemento cuando sea el foco y una línea roja gruesa cuando esté activo, se pueden emplear las siguientes reglas:

Ejemplo.

:focus  { outline: thick solid black }  
:active { outline: thick solid red }

3 Unidades de medida

Puntos de verificación en esta sección:

Técnicas:

Ejemplo.

Utilice "em" para establecer los tamaños de letra, como en:


   h1 { font-size: 2em }

mejor que:


   h1 { font-size: 12pt }

Fin del ejemplo.

Ejemplo.

Utilice unidades de longitud relativas y porcentajes.

   body { margin-left: 15%; margin-right: 10%}

Fin del ejemplo.

Ejemplo.

Utilice unidades absolutas de longitud sólo cuando sean conocidas las características físicas del medio de salida.

   /* tarjeta de visita */
   .businesscard { font-size: 8pt }

Fin del ejemplo.

4 Contenidos generados

Puntos de verificación en esta sección:

Técnicas:

CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:

El contenido generado puede servir como marcador para ayudar a los usuarios a navegar por el documento y orientarse cuando no pueden acceder a las pistas visuales tales como barras de desplazamiento proporcionales, marcos con índice de contenidos, etc.

Por ejemplo, la siguiente hoja de estilo de usuario causaría la generación de las palabras "Fin Ejemplo" después de cada ejemplo marcado con un valor de clase especial en el documento:

Ejemplo.

 
div.example:after {     
  content: Fin Ejemplo  
}

El usuario también puede, por ejemplo, numerar los párrafos para localizar su posición durante la lectura del documento:

Ejemplo.

 
p:before {     
  content: counter(paragraph) ". ";
    counter-increment: paragraph
}

5 Tipos de letra

Puntos de verificación en esta sección:

Técnicas:

Ejemplo.

Especifique siempre un tipo de letra genérico por defecto en caso de que no esté disponible el deseado:

   body { font-family: "Gill Sans", sans-serif }

Fin del ejemplo.

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>

Fin del ejemplo.

6 Efectos de estilo del texto

Puntos de verificación en esta sección:

Técnicas:

Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:

7 Texto en vez de imágenes

Puntos de verificación en esta sección:

Técnicas:

Los diseñadores de contenido deberían utilizar hojas de estilo para dar estilo al 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 redefinir 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 bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible (vea las secciones sobre equivalentes textuales y páginas alternativas).

Ejemplo.

En este ejemplo, la imagen insertada muestra en caracteres rojos grandes "Ejemplo", y se refleja en el valor del atributo "alt".

<p>Esto es un 
   <img src="BigRedExample.gif" alt="ejemplo"> 
   de lo que queremos decir.
</p>

Fin del ejemplo.

8 Formateo y posición del texto

Puntos de verificación en esta sección:

Técnicas:

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

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

Ejemplo.

<head>
<title>Primera letra mayúscula</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. En la fecha de redacción de este documento, el seudo-elemento CSS :first-letter, que permite a los desarrolladores de contenido remitir a la primera letra de una parte del texto no está soportado ampliamente [NdT].

9 Colores

9.1 Contraste de colores

Puntos de verificación en esta sección:

Técnicas:

Ejemplo.

Use números en vez de nombres, para colores:

   h1 {color: #808000}
   h1 {color: rgb(50%,50%,0%)}

Fin del ejemplo.

Ejemplo desaconsejado.

  h1 {color: red}

Fin del ejemplo.

Use estas propiedades CSS para especificar colores:

Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar también el color de fondo (y viceversa).

9.2 Asegurarse de que la información no se transmite sólo por el color

Puntos de verificación en esta sección:

Asegúrese de que la información no se transmite sólo a través del color. Por ejemplo, cuando pida intervención de los usuarios, no escriba "por favor, seleccione uno de los ítems indicados 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 detallados).

Por ejemplo, en este documento se ha dado estilo a los ejemplos por defecto (a través de hojas de estilo) de la siguiente manera:

Test rápido: Para verificar si su documento funciona aun sin colores, examínelo con un monitor en blanco y negro o con el color desactivado en el navegador. Igualmente, intente configurar su navegador con un esquema de colores que sólo utilice blanco, negro y los cuatro tonos de gris básico de la paleta del navegador y compruebe como se presenta la 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 indistintas para mostrarse bien.

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

10 Proporcionar pistas de contexto en las listas HTML

Puntos de verificación en esta sección:

Los diseñadores de contenidos deben emplear UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.

La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como "1", "1.1", "1.1.1", etc.

Ejemplo.

<style type="text/css">
    ul, ol { counter-reset: item }
    li { display: block }
    li:before { 
      content: counters(item, "."); 
      counter-increment: item;
    }
</style>

Fin del ejemplo.

Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas 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. El siguiente mecanismo CSS1 muestra cómo ocultar el final de una lista cuando estén activadas las hojas de estilo, y mostrarlo cuando las hojas de estilo estén desactivadas, cuando la hoja de estilo del usuario predomina sobre el mecanismo de ocultación o cuando no se soportan hojas de estilo.

Ejemplo.

  <style type="text/css">
      .findelista { display: none }
  </style>
  <ul>
     <li>Papelería:
        <ul>
           <li>Sobres
           <li>Blocs de notas
           <li>Papel con membrete
           <li>Papel carteles
           <span class="findelista">(Fin de papelería)</span>
        </ul>
     <li>Lápices:
        <ul>
           <li>Bolígrafos azules
           <li>Rotuladores pizarra blanca 
           <span class="findelista">(Final de lápices)</span>
        </ul>
     <li>Sujetapapeles:
        <ul>
           <li>clips
           <li>grapas
           <li>cuerda. 
           <span class="findelista">(Fin de sujetapapeles)</span>
        </UL> 
     <span class="findelista">(Fin de suministros de oficina)</span>
  </ul>

Fin del ejemplo.

Nota: Este ejemplo no resuelve el problema de ítems de lista que se ajustan al principio de la línea siguiente. Con un poco más de esfuerzo, el autor podría incluir etiquetas parecidas al final de cada ítem de la lista.

11 Maquetación, ubicación, colocación en capas, y alineación

Puntos de verificación en esta sección:

Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta):

11.1 Si no tiene más remedio que emplear imágenes como espaciadores

Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes.

Si los diseñadores 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 deben 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;">aquí

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

Fin del ejemplo.

12 Líneas y bordes

Puntos de verificación en esta sección:

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

Utilice las propiedades CSS para especificar los estilos de los bordes:

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

Ejemplo.

En este ejemplo, el elemento H1 tendrá un borde superior de dos píxeles de grosor, color rojo y estará separado del contenido por 1em:

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

Fin del ejemplo.

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

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="next" href="siguiente.htm">[Página siguiente]</A>
  <a rel="previous" href="anterior.htm">[Página anterior]</A>
  <a rel="first" href="primera.htm">[Primera página]</a>
</div>

Fin del ejemplo.

13 Ubicación por CSS y marcado para una transformación correcta

Puntos de verificación en esta sección:

Mediante las propiedades de ubicación de CSS2, el diseñador puede mostrar los contenidos en cualquier posición en la ventana del navegador del usuario. El orden en que los elementos aparecen en pantalla puede ser distinto al orden en que aparecen en el documento fuente. El ejemplo siguiente muestra algunos principios:

  1. El texto aparece visualmente en el navegador en un orden distinto al del código fuente.
  2. La ubicación CSS se puede emplear para crear efectos de tabla. Un elemento TABLE se puede emplear para crear el mismo efecto.

Observe que se define una clase para cada objeto que se desea ubicar. El uso de "class" puede sustituirse con "id" en estos ejemplos. Se ha empleado "class" porque en el ejemplo real, los objetos son réplicas y por lo tanto no son únicos.

Ejemplo desaconsejado.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }  
  .menu2 { position: absolute; top: 3em; left: 10em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em } 
</style></head>
<body>
<div class="box">
  <span class="menu1">Productos</span> 
  <span class="menu2">Ubicaciones</span> 
  <span class="item1">Teléfonos</span> 
  <span class="item2">Ordenadores</span> 
  <span class="item3">Reproductores MP3 portátiles</span> 
  <span class="item5">Madrid</span> 
  <span class="item4">Oviedo</span>
</div>
</body>

Fin del ejemplo.

Al aplicar las hojas de estilo, el texto aparece en dos columnas. Los elementos de clase "menu1" (Productos) y "menu2" (Ubicaciones) aparecen como encabezados de columna. "Teléfonos", "Ordenadores" y "Reproductores MP3 portátiles" aparecen en la lista debajo de "Productos", y "Madrid" y "Oviedo" aparecen en lista debajo de "Ubicaciones", como se muestra en la siguiente captura de pantalla:

Captura de pantalla del código ejemplo tal y como aparece cuando se aplican las hojas de estilo

Cuando no se aplican las hojas de estilo, todo el texto aparece en una línea de palabras "Productos, Ubicaciones, Teléfonos, Ordenadores, Reproductores MP3 portátiles, Madrid, Oviedo". Aparecen en el orden en que está escritas en el código fuente. Por eso, el texto que aparece como encabezado de columna cuando se aplican hojas de estilo aparece como la primera frase, debido a que se definen en primer lugar en el código fuente. Esto se ve en la siguiente imagen:

Screen shot of the example code as it appears without style sheets

El siguiente ejemplo muestra que la misma apariencia visual se puede conseguir en un navegador que soporta hojas de estilo y además crear una presentación mas comprensible cuando no se aplican hojas de estilo. Se ha aplicado el etiquetado estructural (listas de definiciones) a los contenidos. Observe que los márgenes se fijan en cero puesto que en navegadores HTML, las listas de definiciones se muestra con margen fijo para el elemento DD.

Ejemplo.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }  
  .menu2 { position: absolute; top: 3em; left: 10em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em } 
</style></head>
<body>
<div class="box">
<dl>
  <dt class="menu1">Productos</dt>
    <dd class="item1">Teléfonos</dd>
    <dd class="item2">Ordenadores</dd>
    <dd class="item3">Reproductores MP3 portátiles</dd>
  <dt class="menu2">Ubicaciones</dt>
   <dd class="item4">Madrid</span>
   <dd class="item5">Oviedo</span>
  </dt>
</dl>
</div>
</body>

Fin del ejemplo.

Cuando aplicamos hojas de estilo, la apariencia es la misma que con el ejemplo anterior. Sin embargo, ahora, cuando no se aplican hojas de estilo, el texto aparece como una lista de definiciones en vez de una serie de palabras. El texto que con hojas de estilo aparece como encabezado de columna, ahora aparece como términos definidos cuando no se aplican hojas de estilo, como se puede comprobar en la siguiente imagen de pantalla.

Ejemplo de código tal como aparece sin aplicar hojas de estilo, pero que se transforma airosamente

Nota. Para comprobar la diferencia entre estos ejemplos, puede probar el archivo de prueba para hojas de estilo que se transforman airosamente.

14 Crear movimiento con hojas de estilo y scripts

Puntos de verificación en esta sección:

Técnicas

15 Hojas de estilo en cascada auditivas

Puntos de verificación en esta sección:

Las propiedades auditivas de CSS2 proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual. El ejemplo siguiente muestra cómo distintas cualidades de sonido (incluida una familia de voz ("voice-family", algo parecido a un tipo de letra auditivo), pueden indicar al usuario que el contenido hablado es un encabezado:

Ejemplo.

 
H1 {     
  /* Familia de voces*/
  voice-family: pedro;
  /* Énfasis */
  stress: 20;
  /* Riqueza */
  richness: 90;     
  /* Señal anterior */
  cue-before: url("ping.au")     
}

Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2.

Además, la propiedad "speak-header" describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla.

16 Acceso a representaciones alternativas de los contenidos

Puntos de verificación en esta sección:

CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:

En el siguiente ejemplo, el valor del atributo "alt" del elemento IMG se muestra después de la imagen (de forma visual, auditiva, etc):

Ejemplo.

 /* Después */
 IMG:after { 
    /* contenido: atributo(alt)*/
    content: attr(alt) 
 }

Observe que se muestra el valor del atributo aún cuando no se muestre la imagen (por ejemplo, cuando el usuario ha desactivado las imágenes en su navegador).

17 Tipos de medios

Puntos de verificación en esta sección:

Con los "tipos de medios" de CSS2 (empleados con las reglas @media) los creadores de páginas y los usuarios pueden diseñar hojas de estilo que permiten mostrar los documentos de forma más adecuada en ciertos dispositivos. Estas hojas de estilo pueden adaptar la presentación del documento para dispositivos Braille, sintetizadores de voz, o dispositivos TTY. Las reglas "@media" también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas.

18 Referencias

Para la última versión de cualquier especificación W3C, por favor, consulte la lista de Informes Técnicos W3C de W3C en http://www.w3.org/TR.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, editores, 17 diciembre 1996, revisado 11 enero 1999. Esta Recomendación CSS1 es http://www.w3.org/TR/1999/REC-CSS1-19990111. La versión más reciente de CSS1 está disponible en http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley e I. Jacobs, editores, 12 mayo 1998. Esta Recomendación CSS2 es http://www.w3.org/TR/1998/REC-CSS2-19980512/. La versión más reciente de CSS2 está disponible en http://www.w3.org/TR/REC-CSS2.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden e I. Jacobs, editores, 5 mayo 1999. Esta Recomendación WCAG 1.0 está en http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
[WCAG10-TECHS]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. Este documento explica como implementar los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0". El último borrador de las técnicas está disponible en http://www.w3.org/TR/WCAG10-TECHS/.

19 Recursos

Nota: W3C no puede garantizar la estabilidad de cualquiera de las siguientes referencias, que se encuentran fuera de su control. Estas referencias están incluidas por conveniencia. Las referencias a productos no suponen la recomendación de los mismos.

19.1 Otras pautas

[UWSAG]
"The Unified Web Site Accessibility Guidelines". Editores: G. Vanderheiden y W. Chisholm. The Unified Web Site Guidelines fue compilado por Trace R & D Center en la Universidad de Wisconsin con financiación del National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

19.2 Recursos sobre la accesibilidad

[LIGHTHOUSE]
The Lighthouse proporciona información sobre colores y contrastes accesibles.

20 Agradecimientos

Co-directores del Grupo de Trabajo para las Pautas de Contenido:
Jason White, Universidad de Melbourne, Australia
Gregg Vanderheiden, Trace Research and Development
Contacto con el Equipo W3C:
Wendy Chisholm
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, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, 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 Treviranus, Steve Tyler, y Jaap van Lelieveld

Icono conformidad nivel Triple-A, W3C-WAI Pautas de Accesibilidad al Contenido en la Web 1.0

[indice]