Support » Allgemeine Fragen » Anker Sprung auf Header umrandet das Feld

  • Gelöst skibid

    (@skibid)


    Hallo zusammen,
    Ich habe für die Überschriften auf einer Webseite ids <h2 id=“Anker1“>Ankertest</h2> hinzugefügt damit ich über die Menüs #Anker1 auf die Punkte springen kann. Dies funktioniert auch ohne Probleme. Auffällig ist nur, dass wenn ich über den Link auf den Anker springe, ist das gesamte Feld mit einem leichten Rahmen umlegt, bis ich irgendwo in die Seite klicke. Dann ist der Rahmen weg. Egal ob mobil oder am Desktop.
    Kennt jemand von euch dieses Problem und weiß es ggf. zu beheben?
    Danke euch und viele Grüße

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    Das hat mit den Pseudoklassen des Anker-Elements zu tun.

    Pseudo-Klassen a:visited, a:hover, a:focus und a:active

    Die Kennzeichnung eines aktiven Links durch einen gestrichelten Rahmen verbessert auch die Barrierefreiheit, weil Webseitenbesucher dann sehen, ob sie einen aktivierten Link per Tastatur öffnen können. Das wegzuformatieren ist wie an der Fußgänger-Ampel den Lautsprecher für Blinde mit Kaugummi zukleben.

    Sorry das ich mich da einmische.
    Hatte das „Problem“ auch mal, zu einer Zeit, als nur Chrome einen extrem hässlichen dicken Rahmen erzeugte, während sonstige Browser kaum erkennbare erzeugten. (Insbesondere auf den einst beliebten Imagemaps schaute das unschön aus.)
    Da half nix ausser outline:none;

    Als einer der ersten Wegbereiter der Barrierefreiheit auf österr. Websites (Auftrag vom Kanzeleramt) dazu folgendes: Nachdem wir Jahre dafür kämpften, ist nun, ~15 Jahre später kaum mehr was von der Barrierefreiheit à la 2005 übrig.
    Also ist so ein Linkrahmen nützlich, aber wem er störend erscheint, kann ihn vonmiraus wegmachen.

    Moderator Bego Mario Garde

    (@pixolin)

    Alle WordPress-Anwender/-innen dürfen mit ihrer Website machen, was sie möchten. Das ist Bestandteil der vier Freiheiten der OpenSource-Lizenz. Hier im Forum versuchen wir aber, „Best Practice“ zu vermitteln und deshalb halte ich (auch wenn du das anders praktizierst) einen Hinweis für sinnvoll, dass durch das vollständige Entfernen der Formatierung für einen Link mit Status a:focus die Barrierefreiheit beeinträchtigt wird.

    Im Web Content Accessibility Guidelines (WCAG) 2.1 des W3C (was allgemein als Referenz anerkannt wird) gibt es als Bewertungskriterium für barriefefreie Websites die Regelung

    Success Criterion 2.4.7 Focus Visible (Level AA)

    Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

    (übersetzt

    Jede über die Tastatur bedienbare Benutzeroberfläche verfügt über einen Betriebsmodus, in dem die Tastaturfokusanzeige sichtbar ist.

    )

    In den Beispielen für eine Umsetzung der Regel wird unter „Using CSS to change the presentation of a user interface component when it receives focus“ beschrieben, wie der Status mit CSS-Regeln angezeigt werden kann.

    Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.

    (übersetzt

    Das Hervorheben des Elements, das den Fokus hat oder über das der Mauszeiger bewegt wird, kann Informationen liefern, wie z. B. die Tatsache, dass das Element interaktiv ist oder den Umfang des interaktiven Elements.

    )

    In einem Code-Beispiel wird allerdings statt einer (tatsächlich optisch wenig ansprechenden) Formatierung mit einer gepunkteten Linie eine farbliche Hervorhebung gezeigt.

    Kurz: anders formatieren ist OK, gar nicht formatieren verstößt zumindest gegen die Vorgaben zur Barrierefreiheit und dürfte zumindest bei Aufträgen für die öffentliche Hand zu Problemen führen.

    Thread-Starter skibid

    (@skibid)

    Hallo zusammen, super vielen Dank für die zahlreichen Informationen. Der Tipp mit dem outline:none Kommando in der css hat den, für mich als Fehler eingestuften, Zustand behoben.

    Mir ist dieser hauchdünne Rahmen um die Klasse beim zweiten oder dritten Review der Seite aufgefallen. Daher sehe ist diese „Methode“ um eine Barrierefreiheit zu erreichen schlichtweg als nicht geeignet an.
    Ggf. rührt dies daher, dass über den Sprung auf die Header Elemente, diese so kontrastreich und vom Hintergrund abgehoben dargestellt sind, dass mir der Rahmen erst gar nicht aufgefallen ist.
    Dies bestätigt mich damit noch mehr darin, dass ich die Kriterien wie ihr sie schildert erfüllt habe.

    Finde es aber Klasse dass mein gemeldetes Webseiten Verhalten einigen Lesern das Thema Barrierefreiheit auf Webseiten wieder ins Gedächtnis ruft.

    Danke euch und einen schönen Abend!

    Freut mich, dass es klappte!

    Ja, @skibid, das Thema hatte ich schon lange nebenbei verdrängt. Zu viele der (bloß meiner Meinung nach) wirklich sinnvollen Zugangserleichterungen verschwanden in den Jahren. Sicher kamen viele neue Regeln hinzu, doch mit WP hat man ja doch nicht die volle Kontrolle über den Code. Daher denke ich nur mehr gerne an diese Zeiten zurück.

    Damals Sites für Behörden, Ämter, Kommunen zu erstellen, war noch ohne WP, aber voller Herausforderungen und Experimente, wie man die zuvor inflationär aufkommenden Effekt-Spielereien (Barrieren) wieder einreißen konnte.

    Sorry fürs OT, für meine hier evtl. spezielle Eigenmeinung. Aber ich war da voll mittendrin und staune, wie lange diese schöne Zeit zurückliegt …

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Anker Sprung auf Header umrandet das Feld“ ist für neue Antworten geschlossen.