Link
Un lien vous emmène quelque part ailleurs : une autre page, une autre partie de la même page, un autre site.
Sur cette page
Playground
<a class="feitio-link" href="#playground">le rapport de novembre</a>Quand l'utiliser
- Pour naviguer, toujours, même quand cela ressemble à une action (« Voir tout »).
- Dans le texte ou sur sa propre ligne.
Quand ne pas l'utiliser
- Pour faire quelque chose arriver (sauvegarder, supprimer, envoyer) : utilisez Button.
- Pour une porte en vue vers un autre espace : utilisez LinkCard.
Exemples
Même onglet
Par défaut : le lien vous y emmène, et le bouton retour vous ramène.
Afficher le code
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>Nouvel onglet
L'exception, uniquement lorsque quitter la page ferait perdre à la personne quelque chose, comme un formulaire partiellement rempli. Toujours avec l'icône et l'avertissement caché.
Afficher le code
<a class="feitio-link" href="/ajuda/horarios" target="_blank" rel="noopener">
o guia de horários<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-new-tab"/></svg>
<span class="feitio-visually-hidden"> (abre em nova aba)</span>
</a>L'icône signifie nouvel onglet
Dans Feitio, une icône sur un lien ne signifie qu'une seule chose : il ouvre un autre onglet. Un lien vers un autre site qui s'ouvre dans le même onglet n'a pas d'icône.
États
- Toujours souligné. La couleur ne suffit pas.
- Survol : le soulignement s'épaissit.
- Focus: le contour orange.
Faire et ne pas faire
Do
Le texte du lien indique où il mène, même lu hors contexte.
Don’t
"Clicquer ici" ne dit rien à quelqu'un parcourant la liste des liens de l'accessibilité.
Don’t
L'icône promet un nouvel onglet qui ne s'ouvre jamais : les gens apprennent à ne pas lui faire confiance.
Écriture
- Le texte du lien est la destination : "rapport de sauvegarde", pas "ici", "en savoir plus" ou l'adresse brute.
- L'icône se trouve tout à la fin du texte, à l'intérieur du lien.
Accessibilité
- Nouvel onglet toujours avec le texte caché "(s'ouvre dans un nouvel onglet)"; l'icône est
aria-hidden. target="_blank"toujours avecrel="noopener". En React, demander un nouvel onglet ajoute les trois ensemble.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-link" | obligatoire | Text orange, always underlined. |
href | URL | The destination. |
target="_blank" | only as the exception | Opens a new tab; always with the icon, the hidden text and the rel. |
rel="noopener" | with target="_blank" | The new tab’s safety. |