Lorsqu'on fait un webdesign, certains ont encore tendance à encore mettre leurs textes longs à même l'image lorsqu'ils finalisent leurs pages.
Or, cette pratique a des désavantages au niveau de l'accessibilité.
La problématique
Pour quelqu'un qui voit les images sans problème, il n'aura pas de problème à lire le texte. Mais qu'en est-il de ceux qui ne peuvent pas les voir ?
>> Pas d'image, pas de texte
Contrairement à la croyance populaire, il n'y a pas que les non-voyants qui ne voient pas les images, mais aussi les internautes qui utilisent un navigateur texte (tel Lynx) ou un dispositif de filtrage des images affichés sur le Web. C'est d'ailleurs pourquoi le Web Accessibility Initiative recommande de toujours renseigner l'attribut
alt="" lorsque vous insérez une image dans votre page Web. Pour une image purement décorative, vous pouvez laisser une valeur vide, mais pour une image importante, notamment les images-liens, vous DEVEZ mettre un texte.
Mais pour ce qui est d'un texte de plusieurs lignes, l'attribut
alt="" n'est pas très adapté.
> Texte difficilement lisible dans une image : aucune alternative
Le deuxième désavantage du texte à même l'image, c'est que si le texte est difficilement5 lisible par manque de contraste ou par sa taille, il sera alors impossible de contourner le problème puisque :
- Le texte ne sera pas agrandissable, même sous Firefox et autres non-IE qui agrandissent même les polices de taille absolue.
- Impossibilité de visualiser le texte en noir sur blanc lorsqu'on débranche le style.
- Difficulté à l'éditer si le créateur n'a pas gardé le fichier .PSD ou .XCF contenant les calques de l'image.
Solution
Afin d'éviter ces problèmes d'accessibilité, la solution est de ne pas inclure le texte dans l'image, puis définir cette image comme fond d'un bloc qui contiendra le paragraphe du texte.
Je vais donc vous le montrer à le faire avec XHTML et CSS
en XHTML :
<div id="intro">
<h1>Bienvenue sur mon super site !</h1>
<p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</p>
</div>
L'élément <div> servira pour y mettre notre image comme fond. Les éléments <h1> et <p> contiendront nos textes.
Notre image fait 700 pixels de largeur et 200 pixels de haut et donc, on va donner ces dimensions à notre <div id="intro"> en plus d'y définir l'image de fond.
#intro
{
background: url('fond.png') no-repeat;
height: 200px;
width: 700px;
}
Mais notre texte ne doit pas dépasser les bords de notre bloc. On va donc définir les marges de nos éléments <h1> et <p>, en plus de leur définir une taille de police relative que je recommande d'utiliser puisque ces polices sont agrandissables sous Internet Explorer, contrairement aux valeurs en pixels ou en points qui ne sont pas confortables à lire pour les internautes de 45 ans et plus.
#intro h1
{
margin: 20px;
font-size: 1.2em;
}
#intro p
{
margin: 10px 20px;
font-size: 0.8em;
}
N'oubliez pas non plus de définir une police de type sans-sérif pour tous vos textes, et je vous recommande même de le définir pour la balise body.
Exemple :
body
{
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
}
(ce que j'ai montré est mon choix personnel, mais vous pouvez aussi utiliser Verdana ou Arial comme choix prioritaire.).
On finir par une couleur qui va aller en harmonie avec notre image de fond, en autant que le contraste soit suffisant. Par exemple, si notre fond est orangé, on va opter pour un orange foncé.
#intro h1
{
margin: 20px;
font-size: 1.2em;
color: #884411;
}
#intro p
{
margin: 10px 20px;
font-size: 0.8em;
color: #884411;
}
Voici donc notre code CSS final qui sera notre code minimal :
body
{
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
}
#intro
{
background: url('fond.png') no-repeat;
height: 200px;
width: 700px;
}
#intro h1
{
margin: 20px;
font-size: 1.2em;
color: #884411;
}
#intro p
{
margin: 10px 20px;
font-size: 0.8em;
color: #884411;
}
Il ne vous reste qu'à centrer votre bloc et à choisir la couleur de fond du corps de la page.
Avec la façon que je vous ai montrée, vous pourrez obtenir un rendu similaire tout en étant beaucoup plus accessible et en restant valide.
