Link
Ein Link führt Sie irgendwohin: eine andere Seite, ein anderer Teil derselben Seite, eine andere Website.
Auf dieser Seite
Playground
<a class="feitio-link" href="#playground">den Novemberbericht</a>Wann verwenden
- Zum Navigieren immer, auch wenn es wie eine Aktion aussieht („Alle anzeigen").
- Innerhalb des Textes oder auf einer eigenen Zeile.
Wann nicht verwenden
- Etwas zum Geschehen bringen (Speichern, Löschen, Senden): verwenden Sie Button.
- Für eine prominente Tür zu einem anderen Bereich: verwenden Sie LinkCard.
Beispiele
Gleicher Tab
Standardmäßig: der Link bringt Sie dorthin, und die Rückwärts-Taste bringt Sie zurück.
Code anzeigen
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>Neuer Tab
Die Ausnahme, nur wenn das Verlassen der Seite dazu führt, dass jemand etwas verliert, wie ein halb ausgefülltes Formular. Immer mit dem Icon und dem versteckten Hinweis.
Code anzeigen
<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>Das Icon bedeutet neuen Tab
In Feitio bedeutet ein Icon auf einem Link nur eine Sache: es öffnet einen anderen Tab. Ein Link zu einer anderen Seite, der im gleichen Tab geöffnet wird, erhält kein Icon.
States
- Immer unterstrichen. Die Farbe reicht nicht aus.
- Hovern: die Unterstreichung verdickt sich.
- Fokus: der orangen Rahmen.
Do and don't
Do
Der Linktext sagt, wohin er führt, auch wenn man ihn aus dem Kontext liest.
Don’t
"Klicken Sie hier" sagt niemandem, der die Liste der Links durch eine Screenreader-Liste durchliest, nichts.
Don’t
Das Icon verspricht einen neuen Tab, der nie öffnet: Menschen lernen, ihm nicht zu vertrauen.
Schreiben
- Der Linktext ist das Ziel: "Backup-Bericht", nicht "hier", "mehr erfahren" oder die rohe Adresse.
- Das Icon sitzt ganz am Ende des Textes, innerhalb des Links.
Barrierefreiheit
- Neuer Tab immer mit dem versteckten Text "(in einem neuen Tab öffnen)"; das Icon ist
aria-hidden. target="_blank"immer mitrel="noopener". In React, wenn man nach einem neuen Tab fragt, werden alle drei zusammengeführt.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-link" | erforderlich | Text orange, always underlined. |
href | URL | The destination. |
target="_blank" | nur als Ausnahme | Öffnet ein neues Tab; immer mit dem Icon, dem versteckten Text und dem rel. |
rel="noopener" | mit target="_blank" | Die Sicherheit des neuen Tabs. |