Comment remplacer les boutons d'image HTML avec un lien texte?

Question

Je voudrais rendre ma page Web hautement compatible; Donc, quand un utilisateur désactive tous les styles lors de la navigation sur mes sites, je veux qu'ils soient en mesure de tout trouver dans le texte. Le problème est que certains de mes pages Web utilisent des boutons d'image comme suit:

<a href="next.html"><img src="images/next_button.png"></a> 

Ceci est un problème depuis quand je visite une page avec un bouton (en mode sans styles), je reçois l'image du bouton au lieu de un lien de texte. Comment est-ce que je peux substituer le bouton d'image avec un lien de texte dans un tel cas? Merci!

Answer 1

La solution est d'utiliser les textes que dans le code HTML et les styliser avec des images dans le css:

HTML:

<a href="next.html" class="next-button"><span>Next</span></a> 

CSS:

.next-button 
{ 
    display: inline-block; 
    width: 100px; /* image width */ 
    height: 20px; /* image height */ 
    background: url("../images/next_button.png") 
} 

.next-button span 
{ 
    display: none; 
} 

Edit: Masquer le texte lors de l'affichage de l'arrière-plan à l'aide d'une balise de plage supplémentaire

Answer 2

Utilisez l'attribut alt?

<img src="images/next_button.png" alt="next" /> 

Answer 3

En fait, la spécification HTML exige que vous avez un attribut ALT sur vos balises img comme ceci:

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a> 

navigateurs, tels que les navigateurs en mode texte, les lecteurs d'écran et d'autres qui ne présentent pas l'image remplacera automatiquement le texte ALT pour l'image.

Answer 4

En ce qui concerne votre balisage, il est très bien en termes d'accessibilité en dehors de manquer l'attribut requisalt. L'exécuter dans n'importe quel validateur HTML vous en aurait averti.

Il serait également utile d'ajouter un attribut rel="next" à la balise a, pour indiquer qu'il est un lien relationnel à la page suivante:

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a> 

Answer 5

Comme indiqué, un attribut approprié alt serait la solution facile . J'aime l'idée d'utiliser CSS pour les boutons autant que possible (stylisant ainsi le texte). Si vous utilisez jQuery, regardez le nouveau widget de jQuery UI qui fait exactement cela.

Vous pouvez également utiliser une technique de remplacement d'image en conservant le texte sur la page, puis en recouvrant le texte d'une image ou en écartant le texte via CSS. Dans les deux cas, le texte actuel serait là pour des raisons d'accessibilité/SEO et l'image serait simplement une image de fond pour la rendre jolie.