Buttons und Links nach Funktion statt nach Aussehen wählen
Links navigieren zu einem Ziel, Buttons lösen eine Aktion aus. Die sichtbare Gestaltung darf diese funktionale Trennung nicht ersetzen.
Für Webentwickler und UX-Teams lässt sich „Buttons und Links semantisch wählen“ vor allem an zwei Punkten beurteilen: „Navigationsziel“ und „Link als Schalter“. Diese Gegenüberstellung macht die fachliche Grenze greifbar.
Veröffentlicht: · 3 Min. Lesezeit · Autor: Sebastian Geier
Wann ist ein Button und wann ein Link das semantisch richtige Bedienelement?
Ein Link führt zu einer anderen URL oder Position, während ein Button den aktuellen Zustand verändert oder eine Aktion auslöst. Das native Element wird nach dieser Folge gewählt und unabhängig davon gestaltet, damit Tastatur-, Browser- und Hilfsmittelverhalten erwartbar bleiben.
Navigationsziel
Navigationsziel – Ein Wechsel zu einer URL, einem Dokumentanker oder einer externen Ressource wird mit einem echten Link umgesetzt.
Ausgeführte Aktion – Eine Zustandsänderung, Formularaktion oder Interface-Steuerung verwendet einen Button mit passendem Standardverhalten.
Erwartbare Bedienung – Elementtyp, zugänglicher Name, Fokuszustand und Tastaturauslösung entsprechen derselben erkennbaren Funktion.
Ausgeführte Aktion
Für jedes interaktive Element die Folge der Aktivierung als Ortswechsel oder Zustandsaktion eindeutig beschreiben.
Den passenden nativen Link oder Button einsetzen und Styling vollständig vom gewählten HTML-Element entkoppeln.
Klick, Enter, Leertaste, Kontextmenü und Fokusdarstellung entsprechend dem erwarteten Elementverhalten praktisch testen.
Praxisszenario: „Link als Schalter“
Eine Kartenkomponente nutzt einen Button mit JavaScript, um zur Detailseite zu wechseln, während ein Link ohne href den Filterbereich öffnet. Die Rollen werden getauscht: Der Kartentitel wird ein echter Link, der Filteröffner ein Button mit aria-expanded; beide behalten ihre bisherige visuelle Gestaltung.
Link als Schalter
Link als Schalter – Ein href-loses a-Element steuert einen Zustand und verhält sich bei Tastatur, Kopieren oder neuem Tab nicht wie erwartet.
Button als Navigation – JavaScript ändert die URL über einen Button und entfernt Browserfunktionen wie Linkvorschau oder Öffnen in neuem Fenster.
Optik als Semantik – Komponenten werden nach Farbe oder Form benannt und ändern ihren Elementtyp, obwohl ihre Aufgabe gleich bleibt.
Erwartbare Bedienung
Anteil inventarisierter Interaktionen, deren nativer Elementtyp mit der dokumentierten Navigations- oder Aktionsfolge übereinstimmt.
Anzahl eigener Klick-Handler auf nicht interaktiven Elementen oder Links und Buttons mit künstlich nachgebautem Standardverhalten.
Welche Fragen nach „Buttons und Links semantisch wählen“ weitere Prüfungen auslöst
Eine vertiefende Frage beantwortet PDFs, Downloads und externe Links verständlich kennzeichnen: Wie kennzeichnet man PDFs, Downloads und externe Links verständlich und barrierearm?
Weitere Perspektiven bietet JavaScript-Navigation ohne echte Links vermeiden.
Wenn du „Buttons und Links semantisch wählen“ praktisch umsetzen möchtest, kannst du auf robuste Website-Systeme zurückgreifen. Dort stehen „Native Semantik und Seitenstruktur“ und „Navigationsziel“ im Mittelpunkt.
Fazit: Buttons und Links semantisch wählen
Links versetzen Menschen an einen anderen Ort, Buttons verändern den aktuellen Zustand oder lösen eine Aktion aus. Diese funktionale Grenze schafft erwartbares Verhalten unabhängig vom Design.
Quellen und weiterführende Hinweise
Die folgenden offiziellen Dokumentationen und Standards belegen die fachliche Einordnung.
HTML Standard: Semantics – WHATWG: Primärspezifikation für die semantischen Rollen und Strukturen nativer HTML-Elemente.
Headings – W3C Web Accessibility Initiative: Offizielle Umsetzungshilfe zu Überschriftenrängen, Inhaltsorganisation und Beziehungen zu Seitenregionen.
ARIA in HTML — W3C Recommendation: Die aktuelle W3C-Empfehlung definiert, welche ARIA-Rollen und -Attribute HTML-Semantik zulässig ergänzen und welche redundanten oder widersprüchlichen Verwendungen zu vermeiden sind.
Kernthese
Für einen Ortswechsel wird ein Link verwendet, für eine Zustandsänderung oder Aktion ein Button. Das native Element sichert erwartbares Tastatur- und Hilfsmittelverhalten.
Worum es nicht geht
Nicht gemeint ist das Abhaken eines einzigen Prüfpunkts. Entscheidend sind die getrennten Risiken „Link als Schalter“, „Button als Navigation“ und „Optik als Semantik“.
Worum es geht
Drei Anforderungen begrenzen die Lösung: „Navigationsziel“, „Ausgeführte Aktion“ und „Erwartbare Bedienung“. Sie müssen im produktiven Zusammenspiel bestehen.
Semantisches HTML & Barrierefreiheit
Fokuszustände sichtbar machen, ohne das Design zu entstellen
Zu „Buttons und Links semantisch wählen“ gehört als eigenständiger Prüfschritt die Frage: Wie lassen sich gut sichtbare Fokuszustände in ein Designsystem integrieren?
Semantisches HTML & Barrierefreiheit
Modale Dialoge mit sauberem Fokusmanagement entwickeln
Ergänzt „Buttons und Links semantisch wählen“ um eine getrennte Entscheidung: Wie funktioniert korrektes Fokusmanagement bei einem modalen Dialog?
Insights Übersicht
Alle VELUNO Insights im Überblick
Weitere Analysen zu Website-Systemen, digitaler Sichtbarkeit und belastbaren Arbeitsmodellen.
Ausgeführte Aktion: nächste Arbeitsstufe
Ein Interaktionsinventar sollte Ziel oder Zustandsfolge jedes klickbaren Elements notieren. Abweichungen lassen sich danach mit nativen Elementen korrigieren, ohne das visuelle Komponentensystem neu zu gestalten.