Les techniques d'intégration d'icônes-liens

Accessiday.

Les techniques d'intégration d'icônes-liens

Consultant accessibilité numérique

Atalan.

Icônes-liens sur le web

Exemples 01 (légende ci-après).
Liens de partage sur des réseaux sociaux
Exemples 02 (légende ci-après).
Liens et boutons extraits de Google Maps

Icônes-boutons sur le web

Exemples 03 (légende ci-après).
Boutons de l'éditeur de texte formaté « CKEditor »
Exemples 04 (légende ci-après).
Boutons de contrôle d'un player vidéo HTML5 accessible

Objectifs

Objectifs

Le cahier des charges

Le cahier des charges

Accueil
Icône-lien pointant vers la page d'accueil d'un site web

Balise img avec alt renseigné

Technique 01

Exemples de code

État par défaut

<a href="/">
  <img src="accueil.png" alt="Accueil" />
</a>

États survolé et focusé

<a href="/">
  <img src="accueil-actif.png" alt="Accueil" />
</a>

Points positifs d'accessibilité

Bugs

Inconvénients

background CSS et texte caché

Technique 02

Exemples de code

HTML

<a href="/">
  <span class="hors-ecran">Accueil</span>
</a>

CSS

a {background: url("sprite.png") no-repeat left top;}
a:hover, a:focus {background-position: left bottom;}
.hors-ecran {position: absolute; left: -99999px;}

Avantages

Point négatif d'accessibilité

Accueil

Citation

« L'expérience prouve que les usagers malvoyants utilisent peu d'aides techniques : ils se contentent bien souvent de réglages sur leurs OS. » Fernando PINTO da SILVA - Coordinateur du CERTAM à l'AVH

Remède 01

list-style-image

a {list-style-image: url("accueil.png");}
a:hover,
a:focus {list-style-image: url("accueil-actif.png");}

content:

a span:before {content: url("accueil.png");}
a:hover span:before,
a:focus span:before {content: url("accueil-actif.png");}

Remède 02

Accueil
.surcharge-contraste-eleve  {
  -ms-high-contrast-adjust: none;
}

Remède 03

Accueil
body.ui-helper-highcontrast .hors-ecran {position: static;}

Ressources

Inconvénients

Police d'icônes
et texte caché

Technique 03

Exemples de code

HTML

<a href="/">
  <span class="home" aria-hidden="true"></span>
  <span class="hors-ecran">Accueil</span>
</a>

CSS

@font-face {font-family: 'FontAwesome';}
a.home span {content:"\f015"; color:#02799f; speak:none;}
a:hover span, a:focus span {color: #587d2b;}

Points positifs d'accessibilité

Accueil

Avantages

Accueil

Points négatifs d'accessibilité

Accueil

Remède 01

home

HTML

<a href="/">home</a>

CSS

@font-face, a {font-family: 'LigatureSymbols';}

Remède 02

Accueil

HTML

<a href="/">
  <span aria-hidden="true"></span>
  <span class="AdobeBlank">Accueil</span>
</a>

CSS

.AdobeBlank {font-family: 'AdobeBlank';}

Ressources

Inconvénient

Quelques mots
sur SVG

Exemples de code

Accueil

HTML

<svg viewBox="0 0 100 100">
  <use xlink:href="#icon-home"></use>
  <a xlink:href="/" role="link">
    <text>Accueil</text>
  </a>
</svg>

Ressources

Merci !

Accessiday.

Crédits