[Ovillo] Ocultar texto de un value en un input submit

[Victoria Gracia]

Hola Marc (y resto de compañeros)

Marc Palau escribió:
> Estoy intentando hacerlo lo más compatible, semantico y accesible que
> puedo, y eso me está resultando en un inconveniente.
>   
Accesible y usable... según la web de WebAIM [1]  puedes utilizar *input 
type='image'*, quizás no es lo más semántico, pero desde luego te 
ahorraría muchos quebraderos de cabeza
> Supongo que puedo utilizar un <button type="submit">, no? eso es correcto
> de usar?
>   
Sería lo más correcto semánticamente, pero como no quieres utilizar los 
elementos propios de interfaz del sistema operativo del usuario (esto 
es, los botones)... pues no ;) (Opera se te revela)
> <button type="submit" class="btncompra"
> name="boton[ID]"><span>Comprar</span></button>
>
> .btncompra span{display:none; /* fondo y eso */}
>   
<input type='image' name='btncompra' alt='Comprar' src='./comprar.png' />

Una sola línea... qué elegancia, sin necesidad de JS, sin pensar en 
alternativas según los navegadores, sin problemas incluso si el 
visitante tiene deshabilitadas las imágenes (se muestra el alternativo y 
tiene la mima funcionalidad), realmente yo me quedaría con esa opción.

La otra alternativa que se me ocurre es muy chapucera, sería crearte una 
capa (div) que tuviera la imagen del botón e intentar colocarla encima 
del botón asegurándote que el valor de z-index te lo permite... pero 
vamos, entre utilizar un control recomendado por el propio W3C o 
montarme una complicación innecesaria para intentar que en el navegador 
más utilizado en dispositivos móviles se muestre la imagen... casi que 
dejaría la semántica de lado por una vez (y conste que suelo defenderla 
a ultranza).

Yo de ti dormiría tranquilo utilizando el *imput type='image'*

Pero si sigues empeñado en jugar con el button, intenta ver si Opera te 
admite tapar el botón jugando con z-index en elementos. Quizás entonces 
lo que debas hacer es dejar el botón pero ocultarlo con la imagen para 
la mayoría de usuarios que estarán navegando con JS, estilos e imágenes 
habilitadas. Si alguien deshabilita alguno de esos elementos, siempre te 
quedará un claro y explícito botón ;)

De todos modos en aras a la accesibilidad, asegúrate de que el método 
con JS no impide a usuarios que no tengan ratón marcar el botón o imagen.

Un saludo

Victoria

[1] http://www.webaim.org/techniques/forms/controls.php