Bouton de soumission accessible avec l'image d'arrière-plan

J'ai un bouton d'envoi de formulaire, qui utilise une image d'arrière-plan contenant une jolie version du texte 'value'.Bouton de soumission accessible avec l'image d'arrière-plan

je me cachais le texte de valeur HTML en utilisant:

text-indent: -9000px; 
font-size: 0;

Cependant, avec l'image désactivée (pour les tests d'accessibilité) il n'y a évidemment pas de texte de bouton affiché.

La suppression de ce qui précède ramène le texte de valeur, mais il se superpose au-dessus de l'image. Comment puis-je avoir l'image d'arrière-plan au-dessus du texte de valeur?

Par première approximation est une combinaison de <button><span></span></button>?

Source

2010-12-06 Jon Hadley

Quel est le cas d'utilisation pour aucune image? Un lecteur d'écran? Si c'est le cas, le texte text-indent'd sera toujours lu. – Erik

Hmm. Si vous vous inquiétez de l'accessibilité, êtes-vous sûr que c'est la bonne voie à suivre en premier lieu? Ne serait-il pas plus facile de placer le texte explicatif en dehors du bouton? –

@Pekka, désolé question n'était pas tout à fait clair - ce n'est pas un texte explicatif, c'est le texte que la valeur afficherait autrement - a changé la question à réfléchir. –

Qu'en est-il en utilisant une balise img intérieur du bouton, et donnant qu'un attribut alt:

HTML:

<button class="button"> 
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/> 
</button>

CSS:

.button { 
    background: transparent; 
    border: 1px solid Black; 
}

Source

2010-12-06 12:14:41 Bazzz

P.S. supprimer le "f" dans l'URL google pour voir l'image au lieu du texte alt: "infstant" devient "instant" – Bazzz

-2

Set valeur du bouton à vide:

<input type="submit" value="" />

et vous pouvez retirer le text-indent de votre CSS.

Cela n'affiche évidemment aucun texte, mais lorsque vous désactivez l'arrière-plan CSS, le bouton reste visible.

Source

2010-12-06 11:41:30 mingos

Veuillez lire la question s'il vous plaît. Je veux garder le texte de la valeur. –

Vous ne pouvez pas avoir une image de fond avec du texte et la valeur du bouton en dessous avec seulement HTML et CSS. Soit vous allez sans valeur ou changez l'arrière-plan pour ne pas contenir de texte et stylisez le texte du bouton Soumettre. – mingos

Vous pouvez faire quelque chose comme ceci: <button>Your BTN Text<span class="img"> </span></button>

et CSS:

button { position: relative;} 
button span { 
    position: absolute; 
    text-indent: -9000px; 
    top:0; 
    left: 0; 
    right:0; 
    bottom:0; 
    background: url(yourimage.whatever); 
}

donc si nous désactivons les images du texte est encore visible sous l'élément absolu.

Source

2010-12-06 11:57:28 meo

Faire comme value="" (vide):

<input type='submit' name="csubmit" value="" />

Si vous avez plusieurs soumettre boutons et valider en fonction sur le bouton cliqués valeur de congé avec un espace vide:

<input type-"submit" name="csubmit1" value=" " /> 
<input type-"submit" name="csubmit2" value=" " /> 
<input type-"submit" name="csubmit3" value=" " />

Source

2014-02-19 04:16:04 BGB73

Bouton de soumission accessible avec l'image d'arrière-plan

Répondre

Questions connexes