, ,
EIn Beispiel mit einem Button, der einen orangen Hintergrund hat und mit weisser Schrift steht «Angebot kaufen» drauf. Das zweite Beispiel ist ein Link mit dem Text zu Blog-Seite der Link ist dunkel unterstrichen

Button oder Link?

Sowohl Buttons als auch Links sind wichtige Elemente auf Websites, aber sie haben unterschiedliche Funktionen und Techniken.

Button vs. Link: Was ist der Unterschied?

Ein Button ist wie ein Klick-Knopf, der dazu dient, bestimmte Aktionen auf der Website auszulösen. Technisch gesehen wird ein Button in HTML oft mit dem <button>-Element erstellt. Hier ist ein Beispiel:

<button type=“submit“>Angebot kaufen</button>

Ein Link hingegen ist ein Text oder Bild, das dich zu anderen Seiten auf derselben Website oder zu externen Websites führt. Technisch gesehen wird ein Link in HTML mit dem <a>-Element erstellt, wobei die href-Eigenschaft die Ziel-URL angibt. Hier ist ein Beispiel:

<a href=“https://www.blog-seite.ch“>Zur Blog-Seite</a>

Wann sollte welches Element verwendet werden?

Die Entscheidung, ob du einen Button oder einen Link verwenden solltest, hängt von der beabsichtigten Aktion ab.

  • Buttons werden genutzt, um Aktionen wie das Ausfüllen und Absenden von Formularen oder das Hinzufügen von Elementen in den Warenkorb zu ermöglichen. Technisch gesehen sind Buttons so programmiert, dass sie eine spezifische Funktion auslösen.
  • Links werden verwendet, um zu anderen Seiten zu navigieren. Sie sind technisch gesehen Hyperlinks, die es Benutzern ermöglichen, von einer Seite zur anderen zu gelangen, sei es auf derselben Website oder auf anderen Websites.

Wichtige Überlegungen für Barrierefreiheit

Barrierefreiheit ist entscheidend, um sicherzustellen, dass alle Nutzer die Website unabhängig von ihren besonderen Bedürfnissen nutzen können. Bei beiden Buttons und Links ist es wichtig, klare Textbeschreibungen zu verwenden.

Kontrast und Gestaltung: Technisch gesehen sollten Buttons und Links so gestaltet sein, dass sie einen ausreichenden Kontrast haben, um für alle Benutzer gut sichtbar zu sein. Dies hilft insbesondere Menschen mit Sehbehinderungen. Mehr zu Kontrast erfahren

Tastaturbedienung: Sowohl Buttons als auch Links müssen technisch so gestaltet sein, dass sie einfach mit der Tastatur bedienbar sind. Dies ermöglicht Nutzern, die keine Maus verwenden können, die Interaktion mit der Website. Mehr zu Tastaturbedienung erfahren

Fokus zeigen: Bei der Tastaturbedienung ist es technisch wichtig, zu sehen, welcher Button oder Link gerade ausgewählt ist. Der «Fokus» wird in der Regel durch eine visuelle Markierung dargestellt, um Benutzern anzuzeigen, welches Element gerade aktiv ist. Mehr über «Fokus zeigen» erfahren

Zusammenfassung

Buttons und Links sind entscheidende Elemente auf Websites, die unterschiedliche Funktionen und technische Aspekte haben. Die Wahl zwischen ihnen hängt von der beabsichtigten Aktion ab. Bei der Gestaltung ist es wichtig, die Barrierefreiheit im Blick zu behalten, indem klare Textbeschreibungen, ausreichender Kontrast, gute Tastaturbedienung und visuelle Fokusanzeigen sichergestellt werden. So wird gewährleistet, dass alle Nutzer die Website problemlos nutzen können.

Hast du Fragen? Dann melde dich über das Kontaktformular bei mir und wir sprechen darüber.

Danke für deine Nachricht

Ich melde mich in Kürze bei dir.