Dudas sobre usabilidad vs diseño.

[haga41]

Buenas,

Estoy pasando una web que tengo hecha con tablas a capas y también aprovechando para arreglar los css para que se vea bien en diferentes navegadores.

El caso es que aparte de los dolores de cabeza que me está dando que todo quede lo más parecido posible en todos los navegadores, ahora tengo algunas dudas respecto a la usabilidad y accesibiliad de la página.

La página es sobre una revista de motos ficticia, y tiene varias secciones: noticias, links, pruebas, etc.
El caso es que en la sección de noticias aparecen los titulares de las diferentes noticias y en el fondo de la capa un collage de imágenes de motos con la opacidad bastante bajada, lo puse para darle "vidilla" pero probablemente sea muy poco usable. En la sección de links tengo una capa que contiene "todo" dentro de esa una capa que ocupa todo el tancho con el titulo de la sección pero debajo tengo un montón de capas que contienen imágenes de sustitución y que entre todas forman otro collage de imágenes. Aparte de que no hay manera de que explorer 6 me coja la altura que le pongo en el estilo para las capas que llevan las imágenes de sustitución, cosa que me descuadra toda la sección, quizás sea una manera poco usable o accesible de hacerlo, no lo se.

El caso es que aunque me parecian buenas ideas en principio cada vez tengo más dudas sobre donde poner el límite al diseño (o mi concepto de diseño) frente a la usabilidad y accesibilidad. Me gustaría mucho que me dieráis vuestra opinión sobre este caso concreto.

[derkenuke]

Hola haga41:

Creo que has descrito un ejemplo de DIVitis. Esto es, abundancia de elementos DIV para conseguir la maquetación que nos interesa.

Piensa en simplificar los elementos. Tal vez el collage de imágenes pueda ser una sola imagen colocada en el background del body (o de alguna sección) mediante CSS, en vez de tanto DIV.

Piensa en cómo se verá tu web en modo texto para hacerte una idea de lo que has escrito en HTML puro y duro. En browsershots tienes navegadores de texto (elinks por ejemplo) para hacerte unas capturas de tu documento.

Accesibilidad está relacionado con escribir HTML semántico, en el que cada elemento HTML tenga un sentido estructural (para ello está HTML). Usabilidad puede entenderse simplemente con qué tan fácil es tu documento para navegar por él. Si las imágenes resultan tan pesadas y desorientan tanto que el lector no es capaz de diferenciar partes, es que es poco usable.

Cuanto más limpio esté tu HTML y más se parezca a un XML de la forma cabecera-menú-contenido-pie, mejor. Y cuanto más clara esté la estructura de tu página, más puntos de usabilidad obtendrías.

Si tienes un enlace a tu documento te podríamos comentar más detalles.


Saludos.

[haga41]

Hola derkenuke,

Lo primero de todo, muchas gracias por responder. De momento estoy teniendo problemas con los validadores como Total Validator o browsershots porque la página en la que estoy alojando mis webs últimamente usa frames que no permiten a esas webs analizar los webs por separado.

El caso es que soy un diseñador gráfico metido a diseñador/ programador web y entre el lío que tengo con intentar mejorar mis conocimientos de ASP, PHP, SQL, CSS y cuando saco algun rato ASP.NET y Actionscript todavía ando algo perdido, se más o menos reglas básicas que he visto al validar webs que tengo alojadas en otros sitios en el TAW, y se que las imágenes deben tener su alt, longdesc, etc por ejemplo pero si que es verdad que aún me quedan muchas cosas que aprender.

Sobre el uso abusivo de los divs, creo que puedes tener razón ya que en este caso aplicando la clase que le di a los divs directamente al vínculo el resultado era el mismo, el caso de este collage, tal y como está diseñado no puede ser una sola imagen, ya que está formado por 20 imágenes iniciales más las 20 de sustitución, la idea es que cuando te pongas encima del logo de una marca, salte la imagen de sustitución que es una imagen exactamente igual que la original pero con una sombre paralela debajo del logo y al pulsar visites la web de esa marca en una ventana nueva, pongo una foto del detalle.

En la otra sección tenía puestas las noticias a las que aún tengo que aplicar css para a:link,a:hover, etc y de fondo una imagen bastante difuminada que deje ver bien los textos pero no si es buena idea o queda bien.

Estos son los links a los fotos:
http://i524.photobucket.com/albums/cc328/s7474/cap1.jpg
http://i524.photobucket.com/albums/cc328/s7474/cap2.jpg
http://i524.photobucket.com/albums/c...capdetalle.jpg

Hay un par de fallos en Explorer 6 con el banner de la derecha, me hace un hueco enorme y no se porque y con el bloque negro del buscador que me lo hace más largo de lo que debería, pero bueno quitando eso que aún tengo que solucionar, lo demás está lo más parecido posible, los banners de la izquierda y derecha son gif animados que pesan 42kb (izquierda) y 140kb (derecha) creo que me he pasado 8 pueblos con el tamaño del gif de la derecha...

[lucasan]

No tienes un link al sitio?

[haga41]

Acabo de subirlo a un sitio nuevo para que de menos problemas con el TAW y compañía. En algunas secciones falta pulirla un poco pero basicamente sería como está aquí (sin el banner de arriba claro):

http://haga041.webng.com/motos

[derkenuke]

Hola de nuevo:

Estaría bien ver un enlace al sitio, pero un par de cosas:

Estás mostrando información importante en imágenes, algo que no se debe hacer. Fíjate en lo que describe CSSLab: Cómo reemplazar el contenido por una imagen. Creo que sería una buena técnica para tu sitio. Si son enlaces, mejor que mejor: Yo montaría una lista de enlaces ocultando el texto y poniendo la imagen de fondo, y al hacer hover cambiar la imagen de fondo. Creo que es lo más accesible que se me ocurre.

Por otra parte, accesibilidad y frames son dos términos que no casan. O uno o lo otro, pero intentar las dos cosas sería contradictorio. Hay muchas razones para no usar frames. Puede haber métodos más accesibles usando frames, pero lo mejor es no usarlos.


Un saludo.


EDIT: Ya vi el enlace, lo estoy analizando.

[derkenuke]

Bueno, ya he visto un par de cosas, hay muchos detalles para comentarte pero te comento cosas principales y puntuales:

Hablando de semántica de código (que como ya te dije se relaciona con accesibilidad) es recomendable dar nombres a los DIVs que definan su contenido, y no su color o posición. Ejemplos como:

Código HTML:

<div class="rojo"> 
  <div class="izquierda1">12:19:14 PM</div>
  <div class="espacio">&nbsp;</div>
  <div class="derecha1">8/30/2008</div>
</div> 

Debería quedar como:

Código HTML:

<div class="hora_dia"> 
  <div class="hora">12:19:14 PM</div>
  <div class="dia">8/30/2008</div>
</div> 

Los spacers (capas vacías de contenido que sirven como separadores) es mejor no ponerlos, no aportan nada y no son estructurales.

Vuelvo a repetir lo de imagen aportando contenido interesante (de hecho, principal).


Otro problema de usabilidad bastante gordo es que hay muchos elementos parpadeantes. Firefox provee un método para pararlos, pulsando la tecla escape (todavía no he encontrado cómo reanudarlos). Pero se aconseja evitar en todo caso elementos parpadeantes, o con colores dificiles de asimilar. Si puedes hacer un script para automáticamente deternerlos al de pocos segundos de entrar mejor que mejor (ya no es por cuestiones teóricas, es que molestan realmente).


Por lo demás más o menos bien supongo. Intenta identar o tabular tu código, será más fácil para leer, mantener y editar en un momento dado.

Iniciado por haga41

cada vez tengo más dudas sobre donde poner el límite al diseño (o mi concepto de diseño) frente a la usabilidad y accesibilidad

Ahora podemos volver a la cuestión, y en este caso yo sí que sacrificaría bastante diseño para lograr accesibilidad. No estamos hablando de una web experimental o atrevida en conceptos, sino una web tradicional que puede llegar a obtener buenos valores de accesibilidad y usabilidad sin problemas.

Saludos.

[haga41]

Hola de nuevo,

Muchas gracias por tu tiempo y tus consejos.

La verdad es que las clases estan un poco liosas y si que es verdad que los estilos deberían de tener nombres más claros. Lo de elementos parpadeantes, si te entiendo bien, sería mejor, menos molesto y bastante más ligero si no fueran gif animados, al menos uno de ellos o al menos que sólo se ve la animación una vez, con el ImageReady puedo hacer que se ejecuten sólo una vez así que no hay problema por eso.

Una duda que tengo es si lo de cambiar el color de fondo de los botones de opción está bien visto o sería mejor que sólo cambiara el color del texto en el hover.

Lo de la imagen con un contenido principal supongo que te refieres a la imagen de la cabecera en la que está en la foto el título de la revista, lo puse así para poder usar una tipografía que fuera la típica arial, verdana, courier, etc y que la gente que no la tenga pudiese verla sin problemas pero supongo que es mejor ponerlo con texto y jugar un poco con los css.

Bueno, creo que tus consejos y los fallos que creo que entiendo que me ha dado ell TAW, tengo para un rato, espero poder tener una web bastante más accesible pronto y poder mostrarosla a ver que tal la véis.

P.D.: Un fallo que no entiendo del TAW es este:

# Asegúrese de que este documento puede ser leído sin necesidad de utilizar hojas de estilo. (1)
#

* Línea 16: <link rel="stylesheet" type="text/css" href="templates/estilorevistamotos.css">

¿Qué se supone que tengo que hacer para arreglar eso?

[derkenuke]

Iniciado por haga41

Una duda que tengo es si lo de cambiar el color de fondo de los botones de opción está bien visto o sería mejor que sólo cambiara el color del texto en el hover.

Pues ahí no sé que opinarán los gurús de lo usable. Supongo que depende de tu criterio de colores, a mi no me parecería mal (si no haces cambios demasiado bruscos).

Iniciado por haga41

Lo de la imagen con un contenido principal supongo que te refieres a la imagen de la cabecera en la que está en la foto el título de la revista

Me refiero tanto a la cabecera, como a la imagen que sale en el espacio principal (bike_cover.jpg). De hecho, en esa imagen en la parte de abajo hay texto escrito como si fuera contenido:

Entrevista: Hablamos con Valentino Rossi.
Análisis: Mundial de motociclismo...
...

Eso NO debería ser una imagen.
También entrarían en este grupo todas las imagenes que intenten representar un texto.

Iniciado por haga41

P.D.: Un fallo que no entiendo del TAW es este:

# Asegúrese de que este documento puede ser leído sin necesidad de utilizar hojas de estilo. (1)
#

* Línea 16: <link rel="stylesheet" type="text/css" href="templates/estilorevistamotos.css">

¿Qué se supone que tengo que hacer para arreglar eso?

Con eso se refiere a que desactives tu CSS y veas si tu documento sigue pudiendo ser leído, y ser navegable. Es decir, si puedes usarlo y pinchar en los links, leer el contenido... etc, sin CSS. En este caso veo que mayormente podemos, aunque en links.asp tenemos algunos problemas si navegamos sin imágenes. Definitivamente ese documento es una lista de enlaces. Esa lista tiene un fondo grande y cada elemento de la lista tiene un enlace. Cada enlace tiene una imagen decorativa de fondo y un hover en CSS que cambia la imagen de fondo (sin ese javascript, y menos mezclado con el HTML).



Saludos.

[haga41]

Hola de nuevo, sobre los textos de los que me hablas en la imagen de la portada, los puse ahí porque quería que pareciera una portada más o menos real de una revista de motos, he intentado arreglarlo, tanto ahí como en los banners poninendo en sus respectivos longdesc una descripción bastante detallada de las imágenes.

He cambiado el link a otro que me han dado opción. Esta es la nueva dirección:

http://www.webng.com/haga041/motos/

Sobre lo del javascript es cierto que tal y como está diseñada ahora mismo la sección de links son imprescindibles pero he visto un post sobre comportamientos de dreamweaver que quizás me podría servir como método alternativo, aún tengo que probarlo.

Lo de los css es el error que me da para coneguir la primera A del TAW como bien dices será por la sección de links, he probado a verla deshabilitando los css y las imágenes y aunque no es una maravilla a traves de los links de los alt se puede navegar aunque es cierto que sin javascript probablemente no iría bien.

Según lo que me has dicho, entiendo que quizá sea mejor que me deje de imagenes de sustitución e incluso de imágenes y busque una manera más accesible de mostrar los links, me da un poco de pena lo e quitar el collage pero bueno supongo que es más importante que la web consiga al menos la doble A (aunque aún me queda bastante para eso) que que quede "bonita".

[derkenuke]

Iniciado por haga41

sobre los textos de los que me hablas en la imagen de la portada, los puse ahí porque quería que pareciera una portada más o menos real de una revista de motos

Hay maneras de hacer una presentación tipo revista. Las imágenes es fácil conseguirlas, yo creo que lo más complicado es conseguir una buena composición de tipografias para dar el toque de estilo. Eso es cómodo de hacer con CSS y sin ninguna pérdida de accesibilidad.
Buen blog de tipografias - http://ilovetypography.com/
Para entender los valores tipograficos - http://www.sitepoint.com/article/anatomy-web-fonts
15 sitios excelentes de uso tipografico - http://ilovetypography.com/2007/09/1...eb-typography/
Este quizás te interese más: 10 ejemplos de combinaciones de tipografía y cómo se hacen: http://www.3point7designs.com/blog/2...w-they-did-it/
Son buenos recursos en general. Está todo en google.

Iniciado por haga41

Sobre lo del javascript es cierto que tal y como está diseñada ahora mismo la sección de links son imprescindibles pero he visto un post sobre comportamientos de dreamweaver que quizás me podría servir como método alternativo, aún tengo que probarlo.

Como te he dicho, no creo que sea necesario javascript para realizar una cosa así. Es mejor mantenerlo simple, cuantas menos tecnologías usemos mejor.

Creo que puedes conseguir un doble A sin quitar el collage, sólo hay que escoger técnicas que no limiten la accesibilidad, y métodos para adoptar todas las recomendaciones de la especificación, es posible.


Saludos

edit: ¡Se me olvidaba! Quizás te venga bien para tu menú http://www.cristalab.com/tutoriales/...do-listas.html.

[haga41]

Hola de nuevo, muchas gracias por tus consejos y tu tiempo.

Creo que ya entiendo lo que quieres decir, que es mejor que construya una portada "a mano" con css que usar una imagen, la otra está ehcha a mano en Photoshop pero la verdad es que tampoco quedó demasiado bien, hoy no se que tal andaré de tiempo pero ya ire probando cosas con las tipografías para hacer portada decente y accesible.

Tengo otra duda que no si podrás resolverme, lo del collage he intentado solucionarlo con css pero no me hace el cambio de imagen y no entiendo porque. Este es el código y el estilo:

Código HTML:

<a id="linkaprilia" href="http://spain.aprilia.com" target="_blank"></a> 

Código HTML:

#linkaprilia {
     margin: 0;
     padding: 0;
     width: 210px;
     height: 59px;
     background-image: url(../imagenes/links/aprilia1.jpg);
	 float:left;
}
#linkaprilia a {
     text-decoration: none;
	 background-image: url(../imagenes/links/aprilia1.jpg);
}
#linkaprilia a:hover {
	text-decoration: none;
    background-image: url(../imagenes/links/aprilia2.jpg);
}
#linkaprilia a:active {
	text-decoration: none;
    background-image: url(../imagenes/links/aprilia2.jpg);
}
#linkaprilia a:visited {
	text-decoration: none;
    background-image: url(../imagenes/links/aprilia1.jpg);
}

Entiendo que debería cambiar la imagen de fondo en el hover y en el active ¿no?¿qué puede estar fallando? El enlace funciona bien a pesar de no tener nada entre las etiquetas <a></a>. Lo estoy probando de forma local aún no está subido.

Ok, ya lo he corregido, lo he puesto así y funciona, supongo que estará bien.

#linkaprilia {
margin: 0;
padding: 0;
width: 210px;
height: 59px;
background-image: url(../imagenes/links/aprilia1.jpg);
float:left;
}
#linkaprilia:a {
text-decoration: none;
background-image: url(../imagenes/links/aprilia1.jpg);
}
#linkaprilia:hover {
text-decoration: none;
background-image: url(../imagenes/links/aprilia2.jpg);
background-color:#FF0000;
}

[derkenuke]

Hola de nuevo:

Estabas poniendo como selector "#linkaprilia a", mientras que de #linkapirilia no cuelga ningún elemento "a". Él es directamente el elemento "a", así que sería directamente #linkapirilia:active o #linkapirilia:hover, sin esa "a".

Lo de las tipografías tiene tema, no es fácil conseguir un resultado vistoso que se vea en varios navegadores. Sólo con experiencia y práctica (y buen gusto) se consigue.


Saludos

[haga41]

Hola otra vez,

Tienes razón con lo del "a" a veces me hago un poco de lío con los hover, link, etc en los css pero creo que con tu explicación me ha quedado bastante claro. Ya he quitado el javascript y he sustituido todo por css y la verdad es que el código queda mucho más limpio, ¿está bien que quite el javascript o debería dejarlo y poner una página alternativa con los css en el <noscript>? Lo digo por los problemas de accesibilidad que pueda tener la web si dejo sólo con css esa parte.

Sobre lo de las tipografías si que es verdad que tiene su cosa, hay ando peleandome un poco con los estilos de fuentes y esas cosas para ver si consigo algo decentillo pero bueno, se que llevará su tiempo. A ver si poco a poco la voy puliendo un poco y voy arreglando los errores de accesibilidad sin trastear demasiado en el diseño.

Una duda onta, por estética prefiero que los radio button esten a la izquierdo del nombre de la opción pero a la hora de poner el label el TAW no me los valida correctamente. He visto un poco vuestro post de los input dentro del label y parece que tengo ponerlo a la derecha para que lo valide bien. Es decir ahora lo tengo así:

Código HTML:

<ul>		
<li><form name="form1" method="post" id="form1" action="resultados.asp">
<label for="buscador"><input " name="buscador" type="text" id="textobuscador size=<%=tamanio%> /></label>            
<label for="noticias"><input  name="buscador" type="radio" id="buscadornoticias" value="1" checked="checked"/>
Noticias</label><br/>
<label for="pruebas"><input name="buscador" type="radio" id="buscadorpruebas" value="2" checked="checked"/>
Pruebas<br/></label></li>
<li>
<label for="buscar"><input type="submit" name="button" id="button" value="Buscar" />
</label></form>
</li>		
</ul> 

¿Debería tenerlo así?

Código HTML:

<ul>		
<li><form name="form1" method="post" id="form1" action="resultados.asp">
<label for="buscador"><input " name="buscador" type="text" id="textobuscador size=<%=tamanio%> /></label>            
<label for="noticias">Noticias<br/><input  name="buscador" type="radio" id="buscadornoticias" value="1" checked="checked"/>
</label>
<label for="pruebas">Pruebas<br/><input name="buscador" type="radio" id="buscadorpruebas" value="2" checked="checked"/>
</label></li>
<li>
<label for="buscar"><input type="submit" name="button" id="button" value="Buscar" />
</label></form>
</li>		
</ul> 

[derkenuke]

Iniciado por haga41

¿está bien que quite el javascript o debería dejarlo y poner una página alternativa con los css en el <noscript>? Lo digo por los problemas de accesibilidad que pueda tener la web si dejo sólo con css esa parte.

Es recomendable no usar javascript para esas cosas, ya que javascript es menos "accesible" que CSS. Quiero decir que si puedes evitar el javascript lo evites, pero si no lo puedes evitar, úsalo de manera no obstrusiva. Como te dije, mejor utilizar pocas tecnologías, y como ya vamos a utilizar CSS..

Iniciado por haga41

Una duda onta, por estética prefiero que los radio button esten a la izquierdo del nombre de la opción pero a la hora de poner el label el TAW no me los valida correctamente. He visto un poco vuestro post de los input dentro del label y parece que tengo ponerlo a la derecha para que lo valide bien.

No sé qué error te da. Lo que sí se es que el atributo for de LABEL tiene que tener un ID del documento, no un name. Luego ahí tienes un montón de LABEL que no están asociados a nada. Lee la documentación de la especificación de LABEL, descubrirás eso y que el rótulo (el texto) puede ir tanto antes como después del radio sin problemas.

Eso de que el radio esté antes o después también puede ser considerado tema de CSS. Prueba este código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<title>Página nueva</title>
<style type="text/css">
label {
	display: block;
	width: 5em;
}
label input {
	float: right;
}
</style>
</head>

<body>

<label><input type="radio" name="r" />Texto</label>
<label><input type="radio" name="r" />Texto</label>
<label><input type="radio" name="r" />Texto</label>
<label><input type="radio" name="r" />Texto</label>


</body>
</html> 

Ahora quítale la regla de label input y mira qué pasa. Tú tienes el control de la presentación con CSS, no con HTML. Con CSS se pueden controlar muchas cosas interesantes sin tener que cambiar la estructura HTML, es su gracia.


Un saludo.

[haga41]

Entiendo que es mejor que quite el javascript, el problema que tengo ahora es que al ser esa zona, la del collage, simples links sin imágenes ya que van todas en los css, si deshabilito los css desaparecen todos los links, al menos lo he probado en Explorer y es lo que ha pasado, así que necesito algo que sea como un alt en los links para que al menos quede un texto si deshabilito los css.

He probado con el atribto title pero no me sale nada, he mirado esta web:
http://html.conclase.net/w3c/html401...uct/links.html
Y no veo ninguna manera de que me salgan.

Por lo demás he conseguido validar los css y el html del index y no tener errores automáticos en A, AA y AAA pero me quedan por pulir varios errores manuales.

Hay errores manuales que simplemente no entiendo, por ejemplo, me dice que use alt y longdesc a pesar de que lo uso y me lo pone como error, me dice lo de los elementos parpadeantes pero ya no hay ninguno y algunos otros son bastante abstractos también.

Yo al menos los veo bien:

Código HTML:

<img class="banner" src="../imagenes/bannerdainese.jpg" alt="Banner Dainese" longdesc="http://haga041.webng.com/motos/bannerdainesedesc.html"/>
<img class="banner2" src="../imagenes/banneralpinestars.gif" alt="Banner AlpineStars" longdesc="http://haga041.webng.com/motos/banneralpinestarsdesc.html"/> 

Acabo de probar subiendo esta web, más sencilla imposible:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titulo</title>
</head>
<body>
<h1>Titulo</h1>
</body>
</html>

Y aún y todo me da errores manuales, ¿es problema del TAW o de mi página? Me da errores como:
"Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla" o "Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio".

[derkenuke]

Iniciado por haga41

Entiendo que es mejor que quite el javascript, el problema que tengo ahora es que al ser esa zona, la del collage, simples links sin imágenes ya que van todas en los css, si deshabilito los css desaparecen todos los links, al menos lo he probado en Explorer y es lo que ha pasado, así que necesito algo que sea como un alt en los links para que al menos quede un texto si deshabilito los css.

Si deshabilitas el CSS ¿no se ven los links? Tendrás algún texto dentro de las etiquetas <a> ¿no? Algo extraño... En el HTML están definidos los links, deberían aparecer pero sin imagen de fondo, todos azules (o el color por defecto del navegador) y sin efecto rollover.

Iniciado por haga41

Hay errores manuales que simplemente no entiendo, por ejemplo, me dice que use alt y longdesc a pesar de que lo uso y me lo pone como error, me dice lo de los elementos parpadeantes pero ya no hay ninguno y algunos otros son bastante abstractos también.

Tú mismo lo has dicho: son puntos que tienes que verificar manualmente. No existe ningún método automático en el TAW para detectar esas cosas, así que es una simple advertencia para que no cometas el error. Al menos así lo tengo entendido yo.

La mayoría de normas de accesibilidad son de sentido común una vez las entiendes, y hay que repasar norma por norma manualmente para cerciorarse de que no se incumplen, es algo pesado, pero no existe nada mejor aún.



Saludos.

[haga41]

Ese es el problema que no tenía nada en el link ya que lo genero todo: tanto la imagen inicial como la de sustitución por css. Tenía esto:

Código HTML:

<a id="linkbmw" title="linkbmw" href="http://www.bmw-motorrad.es" target="_blank"></a> 

Pero pensando un poco se me ha ocurrido hacer una chapucilla que de momento parece funcionar sin css, al menos en explorer, eso sí habrá que ver si es accesible o no. Lo he modificado así:

Código HTML:

<a id="linkbmw" title="linkbmw" href="http://www.bmw-motorrad.es" target="_blank"><div class="invisible">Web de Bmw</div></a> 

Y he retocado los estilos, creando el estilo "invisible" que se ve sin css, al menos en explorer y hace que el texto no se vea cuando usas los css:

Código HTML:

#linkbmw {
     margin: 0;
     padding: 0;
     width: 210px;
     height: 59px;
     background-image: url(../imagenes/links/bmw1.jpg);
     float:left;
}
#linkbmw:hover {
	text-decoration: none;
    background-image: url(../imagenes/links/bmw2.jpg);
}
.invisible{
	float:left;
	text-decoration:none;
	visibility:hidden;
	z-index:1;
}
.invisible:link{
	float:left;
	text-decoration:none;
	visibility:hidden;
	z-index:1;
}
.invisible:hover{
	float:left;
	text-decoration:none;
	visibility:hidden;
	z-index:1;
}

Sobre lo otro, como dices tú paciencia y a ingeniarmelas, supongo que no queda otra, pero vaya si que es un poco chapucera la cosa, porque hay errores que por mucho que busque no los veo, como esos que me ha indicado en la web de prueba esa que he hecho antes, no se como puede estar aún más claro y simple el lenguaje si es prácticamente todo como lo da el propio Dreamweaver...

¿Hay alguna página que tengo doble A o triple A sin ningún error ni manual ni automático que se pueda ver para aprender un poco? Porque muchas de las que hablan de usabilidad que he encontrado tienen tantos errores como la mía o más.

[derkenuke]

Ups, se me borró el post anterior, así que seré breve.

¿Realmente has leído el link de CSSLab del post #6? Tu elemento A por supuesto que debe tener contenido, no debe ser un elemento vacío. Pero utiliza text-indent para no mostrarlo en caso de tener activado CSS.

Sobre webs con triple A no conozco a bote pronto ninguna, pero seguro que si buscas encuentras. Las webs de usabilidad pueden seguir el dicho de "en casa del herrero cuchara de palo", así que tampoco te puedes fíar.

[haga41]

Si que lo leí, el problema es que como intento corregir tantas cosas a la vez para que cuando tuve que pensar lo de hacer las imágenes de sustitución con css ya se me había olvidado lo del text-indent, gracias por recordamelo de todas formas, al estar deshabilitados los css, no importa que use text-indet o visibility:hidden no? ¿O es mejor el text-indent por alguna razón?

Pregunto esto porque estoy sudando lo mío para arreglar un fallo que en doble A que me ha dado el Hera: (Unidades absolutas en css) y estoy cambiando todo lo que tenía en píxels a porcentajes y esas cosas y como en el ejemplo dde CSSLab pone -9999px me podría dar problemas, aunque he probado a poner -1000% también me valida la hoja de estilos bien así que supongo que hará lo mismo.

Estoy validando el archivo, de momento el index, luego iré poco a poco con los demás, con el TAW, Hera, Examinator y Cynthia, así que me parece que tengo trabajo para rato...

Con pasar esos validadores a 0 en automático y revisar los manuales ya sería más que suficiente ¿no? Lo digo porque sólo me queda de momento, el fallo de doble A del Hera en automático, antes de revisar lo manual claro.

Hablando de webs triple A he encontrado una que aunque tiene el fallo de unidades absolutas en el Hera está bastante bien.

http://www.dagato.com/

En la págian general del Examinator hay unas cuantas con puntuación 9.9 como está, yo de momento estoy en 8.9 aunque me da fallos que me dejan flipado como decirme que no uso estilos en esa hoja ¿? y que no uso el link rel cuando es mentira, ¿puede ser fallo por usar una plantilla con regiones editables?

[derkenuke]

Hola de nuevo:

¿Cómo usas visibility:hidden? Estarías obligado a usar un elemento extra para ocultarlo, ya que el propio enlace no lo puedes ocultar. Lo bueno que tiene text-indent es que ocultas el texto de esa etiqueta, no la propia etiqueta. Supongo que sí puedes darle un valor en porcentaje sin problemas.

Y no sé por qué te puede decir esos errores raros los validadores. Asegúrate de que las etiquetas son las estándares y contienen todos los atributos obligatorios con sus valores, y están bien cerradas.

[haga41]

Hola otra vez,
Buff, últimamente esyoy bastant espeso, acabo de entender del todo lo del text -indent, de esa forma me ahorraría poner los divs, que estoy poniendo ahora.

<a id="linkcagiva" href="http://www.cagiva.it" target="_blank">
<div class="invisible">Web de Cagiva</div></a>

Con poner text-indent en el estilo linkcagiva y en todos los demas, podría usarlo así:

<a id="linkcagiva" href="http://www.cagiva.it" target="_blank">
Web de Cagiva</a>

Sobre los fallos de los validadores juraría que está todo ok, de hecho he copiado el código todo lo que he podido de otras que si valida bien y ni por esas.

Este es el código:

Código HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Revista Tu Moto</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="revistas,motos,paginas,web,diseño" />
<meta name="description" content="Revista de motos ficticia." />
<meta name="language" content="es" />
<!--#include file="../includes/AbrirBd.asp"-->
<%  intDia = day(date)
	intMes = month (date)
	intAnyo = year (date) 
	%>
<link rel="stylesheet" type="text/css" href="templates/estilorevistamotos.css" />
<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="templates/estilorevistamotosIE.css" />
<![endif]-->

</head>

<body> 

Y estos los errores:

Utilización de CSS.
Resultado: mal.
Ocultar No se usan estilos para controlar la presentación de la página.

Las hojas de estilo representan un gran paso adelante para la web porque permiten la separación de contenido y presentación de las páginas.

WCAG 3.3: Use hojas de estilo para controlar la composición y la presentación. (Prioridad 2)

Complemento visual del texto.
Resultado: mal.
Ocultar La página contiene más información gráfica que textual.

El uso correcto de gráficos incrementa la comprensión y facilidad de uso de un sitio Web.

WCAG 14.2: Complemente el texto con presentaciones gráficas o sonoras cuando ello facilite la comprensión de la página. (Prioridad 3)

Información sobre documentos relacionados.
Resultado: mal.
Ocultar No se proporciona información sobre documentos relacionados (usando <link>, por ejemplo).

Los elementos <link> con atributos "rel" o "rev" permiten dar información acerca de la relación entre la página actual y otros recursos.

WCAG 13.9: Proporcione información sobre las colecciones de documentos (por ejemplo, los documentos que comprenden múltiples páginas). (Prioridad 3)

La página es esta:
http://www.webng.com/haga041/motos/index.asp