C30Usar CSS para sustituir texto por imágenes de texto y ofrecer controles de usuario para cambiar a otra presentación

Aplicabilidad

CSS.

Descripción

El objetivo de esta técnica es mostrar cómo puede usarse CSS para sustituir texto HTML estructurado por imágenes de texto de una manera que permita a los usuarios ver el contenido según sus preferencias. Para usar esta técnica, el autor empieza creando una página HTML que usa elementos semánticos para marcar la estructura de la página. A continuación, el autor diseña dos o más hojas de estilos para esa página. Una hoja de estilos presenta el texto HTML como texto y la segunda usa características de CSS para sustituir parte del texto HTML por imágenes de texto. Por último, mediante scripts del lado del servidor o del lado del cliente, el autor proporciona un control que permite al usuario cambiar entre las vistas disponibles.

Esta técnica puede usarse para cumplir el criterio de conformidad 1.4.5 Imágenes de texto o el 1.4.9 Imágenes de texto (sin excepciones) si está disponible una presentación que no incluya imágenes de texto y siempre que el control de la interfaz de usuario que se proporciona para que los usuarios cambien a una presentación alternativa cumpla los criterios pertinentes. Cuando sea posible, los autores deberían ofrecer como presentación por defecto la que no incluye imágenes de texto. Además, el control usado para cambiar debería situarse cerca del principio de la página.

Se han desarrollado diversas técnicas de «sustitución de imágenes» para abordar distintos problemas de agentes de usuario, configuración y compatibilidad con las tecnologías de asistencia (consulte los recursos para más información). Aunque existen varios enfoques que los autores pueden usar para sustituir texto, es importante tener en cuenta la compatibilidad con las tecnologías de asistencia y si la técnica funcionará correctamente cuando los scripts, el CSS o las imágenes (o combinaciones de ellos) estén desactivados. Dado que puede resultar difícil encontrar una única solución que funcione en todos los casos, esta técnica recomienda el uso de un control que permita a los usuarios cambiar a una presentación que no incluya una técnica de sustitución de imágenes.

Ejemplos

<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</span></h2> 
</div>

#Header h1 {
  background-image: url(pufferfish-logo.png);
  height: 195px;
  width: 290px;
  background-repeat: no-repeat;
  margin-top: 0;
  position: absolute;
}
#Header h1 span {
  position: absolute;
  left: -999em;
}
#Header h2 {
  background-image: url(beauty.png);
  background-repeat: no-repeat;
  height: 234px;
  width: 33px;
  margin-left: 8px;
  position: absolute;
  margin-top: 250px;
}
#Header h2 span {
  position: absolute;
  left: -999em;
}

#Header h1 {
  font: normal 200%/100% Garamond, "Times New Roman", serif;
  margin-bottom: 0;
  color: #000099;
  background: #ffffff;
}
#Header h2 {
  font: normal 160%/100% Garamond, "Times New Roman", serif;
  margin-bottom: 0;
  color: #336600;
  background: #ffffff;
}

Pruebas

Técnicas relacionadas

• C29: Usar un selector de estilos para proporcionar una versión alternativa conforme
• F3: Fallo del criterio de conformidad 1.1.1 debido a transmitir información exclusivamente mediante imágenes de fondo CSS

Recursos

• Replacing Text By An Image (sustituir texto por una imagen)
• Facts and Opinion About Fahrner Image Replacement (hechos y opiniones sobre la sustitución de imágenes de Fahrner)
• In Defense of Fahrner Image Replacement (en defensa de la sustitución de imágenes de Fahrner)
• CSS image replacement (sustitución de imágenes con CSS, en Wikipedia)
• CSS Backgrounds And Borders Module