Vous êtes ici: Home › Obtenir le label › Conditions generales ›

Instructions pour placer le label AnySurfer

Si l'équipe de AnySurfer vous a confirmé par un rapport de Validation favorable que votre site est conforme à la totalité des directives AnySurfer, vous pouvez placer le label sur votre page d'accueil. Pour ce faire, nous vous demandons de suivre les instructions suivantes.

Deux blocs de code à ajouter + CSS

Pour placer correctement le label AnySurfer, il y a deux blocs de code HTML à ajouter. Le premier contient le code HTML pour l'image du label, le second une notice explicative destinée aux utilisateurs de lecteurs d'écran. Chaque bloc de code HTML est lié a des éléments de styles que vous pouvez ajouter directement dans une de vos feuilles de style (CSS) ou placer dans la partie HEAD de la page d'accueil.

L'image du label est visible pour tout le monde. La notice explicative est uniquement lue par les lecteurs d'écran. Nous vous demandons d'utiliser les deux blocs.

1. L'image du label

Code HTML (francophone) 


<a id="as-gfx" href="http://label.anysurfer.be/">

   <img src="label_anysurfer_50x40.png"

   alt="AnySurfer, label de qualité belge pour les sites web accessibles" 

   title="AnySurfer, label de qualité belge pour les sites web accessibles" 

   lang="fr" />

</a>

Code HTML (néerlandophone) 


<a id="as-gfx" href="http://label.anysurfer.be/">

   <img src="label_anysurfer_50x40.png"

   alt="AnySurfer, Belgisch kwaliteitslabel voor toegankelijke websites" 

   title="AnySurfer, Belgisch kwaliteitslabel voor toegankelijke websites" 

   lang="nl" />

</a>

Code HTML (anglophone) 


<a id="as-gfx" href="http://label.anysurfer.be/">

   <img src="label_anysurfer_50x40.png"

   alt="AnySurfer, quality mark for accessible websites in Belgium" 

   title="AnySurfer, quality mark for accessible websites in Belgium" 

   lang="en" />

</a>

Code HTML (germanophone) 


<a id="as-gfx" href="http://label.anysurfer.be/">

   <img src="label_anysurfer_50x40.png"

   alt="AnySurfer, Belgische Qualitätsmarke für zugängliche Webseiten" 

   title="AnySurfer, Belgische Qualitätsmarke für zugängliche Webseiten" 

   lang="de" />

</a>

Code CSS correspondant 


#as-gfx img {

   width: 50px;

   height: 40px;

   border: none;

}

Instructions

  • Vous devez placer l'image du label à un endroit visible sur votre page d'accueil, de préférence en tête du document et sur un arrière-plan de couleur blanche.
  • Vous placez le fichier label_anysurfer_50x40.png dans le dossier images de votre propre site. Vous complétez le chemin de l'image de manière à ce qu'il corresponde au dossier images de votre site.
  • Il n'est pas permis de changer les couleurs ou la forme du label AnySurfer. Si vous souhaitez néanmoins utiliser une version modifiée, par exemple en nuances de gris, veuillez nous contacter.

2. Notice explicative pour les utilisateurs des lecteurs d'écran

Code HTML (francophone) 


<p id="as-txt" lang="fr">

  Ce site internet porte le label AnySurfer, 

  une marque de qualité belge pour les sites accessibles.

  Vous trouverez plus d'information sur 

  <a href="http://label.anysurfer.be/">www.anysurfer.be</a>.

</p>

Code HTML (néerlandophone) 


<p id="as-txt" lang="nl">

  Deze website draagt het AnySurferlabel, 

  een Belgisch kwaliteitslabel voor toegankelijke websites.

  Meer informatie vindt u op 

  <a href="http://label.anysurfer.be/">www.anysurfer.be</a>.

</p>

Code HTML (anglophone) 


<p id="as-txt" lang="en">

  This website received the AnySurfer label, 

  a quality mark for accessible websites in Belgium.

  For more information, please visit 

  <a href="http://label.anysurfer.be/">www.anysurfer.be</a>.

</p>

Code HTML (germanophone) 


<p id="as-txt" lang="de">

  Diese Webseite wurde wie AnySurfer Webseite gekennzeichnet. 

  AnySurfer ist eine Belgische Qualitätsmarke für zugängliche Webseiten.

  Für weitere Informationen, bitte besuchen Sie 

  <a href="http://label.anysurfer.be/">www.anysurfer.be</a>.

</p>

Code CSS qui correspond 


#as-txt {

  position: absolute;

  left: 0px;

  top: -10000px;

  overflow: hidden;

}

Instructions

Vous placez ce bloc de code HTML directement après la balise body de manière à ce que ce soit la première information lue par les lecteurs d'écran. Une personne aveugle sera alors directement informée que votre site est accessible.

Besoin d'aide?

Si vous éprouvez de quelconques difficultés pour placer ces éléments sur votre site, si vous avez des questions ou si vous souhaitez afficher le label d'une autre façon, nous vous invitons à nous contacter.

Haut de la page