HTML-Semantik - Schaltfläche als Anker

Question

Ich interessiere mich hauptsächlich für die a11yAspekte

Wie Sie vielleicht wissen, möchten Sie manchmal eine Schaltfläche, die als Anker fungiert.
Dies sind 4 Möglichkeiten (ich kann mir vorstellen), um dieses Problem anzugehen:

1. Schaltfläche innerhalb eines Ankerelements

<a href="//redirection"><button>Button</button></a>

2. Im Knopfelement verankern

<button><a href="//redirection">Button</a></button>
<!-- Also should it be a href or button onclick (?) -->

3. Anker als Knopf (ohne Knopfelement)

<a class="buttonLike" href="//redirection">Button</a>

4. Schaltfläche als Umleitung (ohne Ankerelement):

const button = document.getElementById('button')
button.addEventListener('click', () => {
  window.location.href = "//redirection"
})

<button id="button">Button</button>

---

Ich habe versucht, selbst eine Antwort darauf zu finden. Am nächsten konnte ich diesen Auszug finden:
Gemäß der MDN-Ankerspezifikation , in der Folgendes angegeben ist:

Ankerelemente werden häufig als gefälschte Schaltflächen missbraucht, indem sie ihre href auf setzen #oder javascript:void(0)verhindern, dass die Seite aktualisiert wird, und dann auf ihre Klickereignisse warten.

Diese gefälschten href-Werte verursachen unerwartetes Verhalten beim Kopieren / Ziehen von Links, Öffnen von Links in einem neuen Tab / Fenster, Lesezeichen oder beim Laden von JavaScript, Fehlern oder Deaktivieren. Sie vermitteln auch unterstützende Technologien wie Screenreader mit falscher Semantik.

Verwenden Sie <button>stattdessen ein. Im Allgemeinen sollten Sie nur einen Hyperlink für die Navigation zu einer echten URL verwenden.

Leider hilft mir das nicht allzu sehr. Grundsätzlich heißt es nur, dass Sie den dritten Ansatz (Anker als Schaltfläche) nicht verwenden sollten, wenn Sie keinen echten Link dazu bereitstellen möchten, worum es in dieser Frage nicht geht.

Gibt es eine offizielle WCAG zu diesem Thema, die ich nicht finden konnte oder?

Answer 1

Option 1 ist kein gültiger HTML-Code.

Option 2 ist kein gültiger HTML-Code.

Option 3 ist hier die richtige Wahl.

Option 4 ist semantisch falsch.

Semantics ist einer der , wenn nicht die wichtigsten Aspekte der Zugänglichkeit.

Es gibt zwei Dinge, die Option 3 bestimmen.

Der erste ist, dass ein Anker nur verwendet werden sollte, um zu Abschnitten zu springen und zwischen Seiten zu navigieren.

Die zweite ist, dass eine Schaltfläche Aktionen auf derselben Seite ausführen sollte .

Wenn Sie nun einen Call-to-Action-Link so gestalten möchten, dass er wie eine Schaltfläche aussieht , die in Ordnung ist, aber sicherstellen, dass Sie die richtige Semantik verwenden, aber sicherstellen, dass CTA zu einer neuen Seite führt oder nicht semantisch korrekt ist.

Und obwohl es bei StackOverflow schwört, SEO zu erwähnen, ist ein Hyperlink anstelle einer JavaScript-Umleitung weitaus besser.

Answer 2

Die erste und zweite Regel von ARIA sagen:

• 1. Regel : Wenn Sie ein natives HTML-Element [...] verwenden können, tun Sie dies
• 2. Regel : Ändern Sie die native Semantik nicht, es sei denn, Sie müssen es wirklich.

Interaktive Elemente wie a und button dürfen keine anderen interaktiven Elemente enthalten:

Das a-Element kann um ganze Absätze, Listen, Tabellen usw., sogar ganze Abschnitte, gewickelt werden, solange sich kein interaktiver Inhalt darin befindet (z. B. Schaltflächen oder andere Links).

Da Sie also auf eine Seite verlinken möchten, ist Ihre dritte Lösung offensichtlich die einzig richtige.

Answer 3

Ich denke, Sie haben vielleicht die "falsche" Inszenierung verwirrt, die sich auf Ihr viertes Beispiel bezieht.

Aufgrund meiner geringen Erfahrung mit Barrierefreiheit und Semantik gibt es keine "Einheitsgröße". Es hängt wirklich von Ihren Prioritäten und der Benutzererfahrung ab, die Sie anstreben.

A <button>erhält alle Eingabehilfen automatisch vom Browser: Wird über die Tabulatortaste oder die Leertaste / Eingabetaste ausgewählt oder gedrückt.

Ein <a>Element ist ein Link. Links sollen als Links oder Anker innerhalb einer Seite verwendet werden.

Anker sind im Vergleich zu einer Schaltfläche innerhalb einer Seite nicht so wichtig. Aus Sicht der Benutzererfahrung; Eine Schaltfläche wird von Personen verwendet, um mit einer Benutzeroberfläche zu interagieren, entweder um die Benutzeroberfläche zu bestätigen oder um sie dazu zu bringen, etwas zu tun. Das Drücken einer Taste bietet ein anderes Feedback als ein Link. Ankerlinks hingegen helfen einem Benutzer beim Auffinden von Inhalten auf einer Seite.

Auch hier kommt es wirklich darauf an, was Sie versuchen:

• Ist das eine Seite mit Begriffen oder ein Artikel? Listen Sie dann Ihre Ankerlinks ohne knopfartiges Styling auf
• Ist dies ein Link, der als Schaltfläche aussehen muss, damit Benutzer ihn leichter erkennen oder interagieren können? Dann stylen Sie es als Knopf, ohne dass es tatsächlich ein ist <button>.