onfocus="this.blur()" wird von blinden Webmastern gehasst

Als er über die Seite zur Bedienung der Bildschirmlesesoftware sprach, betonte er gegenüber unseren Front-End-Studenten besonders: Was er am meisten hasste, war der Code onfocus="this.blur()" im Seitenlink. Woher kam das?

(Abbildung 1)

Liebe Studierende, kommt euch dieser Code bekannt vor? Ja, ihr wisst schon, wir verwenden ihn oft, um den gepunkteten Rahmen zu entfernen, der um einen Link herum erscheint, wenn dieser im Fokus ist (wie in Abbildung 1 oben zu sehen). Wenn ihr danach googelt, werdet ihr feststellen, dass sich die ersten paar Dutzend Seiten ausschließlich mit der Technik zum Entfernen des gepunkteten Rahmens befassen. Aber darüber haben wir vielleicht noch nie nachgedacht: Diese Codezeile hat blinden Benutzern große Probleme bereitet: Sie unterbricht den Tabulatortastenpfad blinder Benutzer, sodass der Tabulatorcursor nicht auf den nächsten Controller (Link, Formularfeld, Objekt, Imagemap usw.) der Seite fokussieren kann. Der Test läuft wie folgt ab:

Wenn Sie die Tabulatortaste drücken, können der erste und der zweite Link normal fokussiert werden. Wenn Sie mit der Tabulatortaste weiter zum dritten Link gehen, kommt es zu einer Tragödie: Der Fokus kehrt zum ersten Link zurück und kann nicht auf den vierten Link fokussiert werden. Der Grund dafür ist, dass, wenn der Fokus auf dem dritten Link liegt, die Ereignisverarbeitung onfocus="this.blur()" den Fokusverlust erzwingt und der Fokus zum Anfang des Dokuments zurückkehrt. Das dauerhafte Drücken der Tabulatortaste hat zur Folge, dass der Fokus zwischen den ersten drei Links hin- und herwandert und die dahinter liegenden Inhalte nicht mehr über die Tabulatortaste [1] erreicht werden können.

(Abbildung 2)

Gibt es also einen besseren Weg? Das Hinzufügen von onfocus="this.blur()" dient grundsätzlich dazu, den gepunkteten Rahmen um den Link zu entfernen, nachdem dieser den Fokus erhalten hat (natürlich sind die Fokuseffekte in Chrome, Safari und Opera unterschiedlich, deshalb nennen wir es hier einfach so). Im W3C-Artikel zu Outline wird erläutert, dass dieses gepunktete Kästchen dazu dient, Benutzern mitzuteilen, welches Element auf der aktuellen Seite den Fokus hat. Ich denke, dass die Existenz des gepunkteten Kästchens sinnvoll ist, aber manchmal kann man bestimmte Anforderungen an die „visuelle Sauberkeit“ nicht vermeiden (wie in Abbildung 2 gezeigt: Das gepunktete Kästchen trennt den „Produkt“-Hintergrund vom roten Block darunter). Im Folgenden sind einige gängige Methoden zum Entfernen des gepunkteten Kästchens zusammengefasst:

Auf dieser Grundlage lautet die empfohlene Methode zum Entfernen des gepunkteten Rahmens des Links: Verwenden Sie das Attribut hidefocus im Internet Explorer und outline:none in FF/Chorme/Opera/Safari. Im Augenblick:
<a href="#" hidefocus="true" >Link</a>
a:Fokus {
Umriss: keiner;
}

Yang Yongquan sagte hilflos, dass die Screenreader-Software dieses Attribut zwangsweise herausfiltern würde, bevor die Seite gelesen wird, wenn der Tab aufgrund von onfocus="this.blur()" nicht auf den gesamten Inhalt der Seite zugreifen kann. Wenn der Benutzer this.blur() jedoch dynamisch in js auslöst, muss sich die Screenreader-Software neue Tricks einfallen lassen, um dies einzuschränken. Dies erhöht zweifellos den Arbeitsaufwand bei der Entwicklung von Screenreader-Software. Um blinden Benutzern einen reibungsloseren Zugriff auf unsere Website zu ermöglichen, sollten Sie die Verwendung von onfocus="this.blur()" vermeiden.

Hinweise

[1] Standardmäßig werden in Safari durch Drücken der Tabulatortaste keine Links, sondern Formularfelder fokussiert. Sie können diese Funktion aktivieren, indem Sie in den Einstellungen unter „Erweitert“ die Option „Tabulatortaste drücken, um jedes Element auf der Webseite hervorzuheben“ aktivieren. Opera ist etwas ganz Besonderes. Mit Umschalt+Pfeiltasten nach oben, unten, links und rechts kann die Seite nach oben, unten, links und rechts fokussiert werden.

[2] In Opera wird beim Anklicken eines Links (im Fokus- oder aktiven Zustand) kein gepunkteter Rahmen angezeigt, daher kann das Problem mit dem gepunkteten Rahmen für Links in Opera ignoriert werden. Der von Opera mit den Tasten Umschalt+Auf, Ab, Links und Rechts erstellte Drahtrahmen kann nicht mithilfe von „outline:none“ entfernt werden, Opera unterstützt jedoch das Outline-Attribut.

[3] Das Hidefocus-Attribut ist ein privates Attribut des Internet Explorers. Obwohl das Hidefocus-Attribut zwei Werte hat: true oder false, zeigen die Testergebnisse, dass in IE5-IE9, unabhängig davon, ob der Wert true oder false ist, der Link den gepunkteten Rahmen verliert, solange das Hidefocus-Attribut hinzugefügt wird.