Liens - Démonstrations

Conforme : Liens mis en forme via CSS avec un texte positionné hors écran

AccueilSuivant


<a href="#" class="btn home">
 <span class="sr">Accueil</span>
</a>


.sr{
 position:absolute;
 top:-10000px;
}

.home:before{
 content:"";
 display:inline-block;
 background:url("../img/home.png") no-repeat center;
 height:20px;
 width:30px;
}

Non conforme : Liens mis en forme via CSS seulement (lien vide)


<a href="#" class="btn home">
 <span class="icon"></span>
</a>


.icon:before{
 content:"";
 display:inline-block;
 background:url("../img/home.png") no-repeat center;
 height:20px;
 width:30px;
}

Conforme : Liens images avec une alternative

Accueil


<a href="#" class="btn">
 <img src="img/home.png" alt="Accueil" />
</a>

Non conforme : Liens image sans alternative (lien vide)


<a href="#" class="btn">
 <img src="img/home.png"/>
</a>

Conforme : Liens composites (texte et image de décoration)

Accueil


<a href="#" class="btn">
 <img src="img/home.png" alt="" />
 Accueil
</a>

Non conforme : Liens composites (images avec une alternative non pertinente)

home.png Accueil


<a href="#" class="btn">
 <img src="img/home.png" alt="home.png" />
 Accueil
</a>