Probablemente una de los primeros trucos que encontré al comenzar a aprender a hacer páginas “bien” —o sea, con un editor de texto, HTML y CSS, no con Dreamweaver y tablas— es la técnica del image replacement. La idea es simple: reemplazar, por ejemplo, una cabecera por una imagen con CSS, prescindiendo de insertarla con el elemento <img src='lorem-ipsum.jpg' alt='Lorem Ipsum' /> ya que esto produciría en un código más accesible y semánticamente correcto.

HTML:
<h1 title="contrasentido">contrasentido</h1>

CSS:
h1{
display:block;
background:url(img/contrasentido.gif) top no-repeat;
width:402px;
height:55px;
text-indent:-9999em;
}

Las reglas básicas de esta técnica: “indentar” negativamente el texto del elemento en el que queremos realizar el reemplazo lo suficiente para que no aparezca en pantalla y especificar la imagen que deseamos mostrar como fondo. El atributo title en el elemento que será reemplazado sirve para poner los tooltips con los que MSIE solía mostrar, erróneamente, el texto alternativo de las imágenes… en otras palabras, completan la ilusión.

Hasta acá pareciera que todo está bien, sin embargo todas las técnicas de image replacement presentan problemas: algunos causados por comportamientos extraños navegadores poco actualizados (más específicamente, Explorer 5 y versiones antiguas de Opera), otras en escenarios que, si bien pueden resultarnos poco comunes, no vale la pena descartar (como que el usuario tenga desactivada la descarga de imágenes al mismo tiempo que activada la utilización de hojas de estilo), necesidad de agregar etiquetas vacías o poco/ningún valor semántico o de aplicar hacks específicos para algunos navegadores.

En concreto:

• Utilizar un span vacío no tiene ningún valor semántico
• Si la idea es crear un mejor código, los hacks de CSS no tienen mucho sentido, ¿no?
• Si utilizamos display:none para ocultar el texto del elemento que será reemplazado, los lectores de pantalla hacen como que no existe
• Si utilizamos text-indent se produce scrolling horizontal en algunos navegadores

Y lo que es peor —y que de hecho es el motivo por el que comencé a escribir este artículo en primer lugar— es que al intentar imprimir un documento, si no se ha especificado el media de la hoja de estilos (o es una hoja para todos los medios), en el lugar del elemento reemplazado aparece un lindo espacio vacío, no la imagen ni el texto, a menos que el usuario active explícitamente (vaya pleonasmo) la casilla Imprimir colores e imágenes de fondo.

Lo terrible de esto es que muchos somos especialmente adeptos a utilizar image replacement en el título del sitio web, por lo que a menos que creemos una hoja de estilo específica para impresión, sin image replacement, ningún documento impreso desde nuestros sitios mostrará nuestra increíblemente-trabajada-y-mimada “imagen corporativa” sino alguna de las típicas fuentes: Arial, Helvetica, Verdana, Tahoma, sans-serif.

Aquí es donde la alternativa de utilizar una imagen no me parece tan descabellada: después de todo, si está hecho con gusto, en lo personal me gustaría bastante la posibilidad de imprimir un post de Minid.net o aNieto2k con su logo coronando la página.

¿Problemas de accesibilidad? ¿Porqué habría de haberlo (valga la redundancia)? Después de todo, hasta donde yo se todos los lectores de pantalla soportan el atributo alt, y esta sería una situación especialmente para la correcta utilización de este atributo. Vamos, el texto alternativo es precisamente para esto.

En conclusión: ¿por qué cuidar tanto la presentación en pantalla y descuidarla en otros medios? Utilizar una imagen “de verdad” dentro del h1 puede ser una buena oportunidad para estampar nuestro logo no solamente en las pantallas sino en los documentos que los usuarios de nuestros sitios impriman… una pequeña imagen puede hacer una gran diferencia.

… A propósito: debo crear una hoja de estilos para impresión en yukei.net