webentwicklung-frage-antwort-db.com.de

Techniken zum Behandeln des Öffnens einer neuen Registerkarte und Sicherstellen der Barrierefreiheit im Internet mit WCAG 3.2

WCAG 3.2 gibt an, dass Inhalte in einem vorhersehbaren Format bereitgestellt werden sollen und dass der Benutzer darauf aufmerksam gemacht wird, wenn anschließend mit einem Klick eine neue Registerkarte geöffnet wird.

Ich habe eine Webseite mit einer Liste vieler Links, die in einem neuen Tab geöffnet werden. W3C empfiehlt, dass dies entweder im Linktext angegeben wird oder ein Indikator für Hover/Focus angegeben wird. Aufgrund der großen Anzahl von Links auf dem Dieselbe Seite, die dies erfordert, würde das Bereitstellen dieser Optionen das Design/die Benutzeroberfläche erheblich stören.

Gibt es andere weniger visuell aufdringliche Möglichkeiten, um diese Konformität zu erreichen, ohne für jeden Link ein Popup oder eine Textwarnung bereitzustellen?

Gibt es auch andere Probleme mit der Barrierefreiheit beim Öffnen neuer Fenster/Registerkarten?

1
Dog

Sie haben diese Frage auch auf stackoverflow.com gepostet. Ich beantwortet es dort mit ziemlich umfangreichen Details, aber ich füge die Antwort auch hier hinzu, um es anderen leichter zu machen, die Antwort zu finden.

Die Antwort hängt von der Konformitätsstufe ab, die Sie erreichen möchten. Die meisten Unternehmen (und die meisten Ländergesetze) verlangen eine AA-Konformität. Tatsächlich besagen die Richtlinien, dass eine AAA-Konformität nicht ​​erforderlich sein sollte.

Hinweis 2 : Es wird nicht empfohlen, die Level AAA-Konformität als allgemeine Richtlinie für ganze Websites zu fordern, da für einige Inhalte nicht alle Level AAA-Erfolgskriterien erfüllt werden können.

Dies bedeutet jedoch nicht, dass Sie einige der AAA-Anforderungen nicht berücksichtigen sollten. Zum Beispiel einen Farbkontrast von mehr als 4,5: 1 ( 1.4.6 Kontrast (verbessert) ) oder sicherstellen, dass Ihr Linktext für sich genommen Sinn macht, anstatt sich auf den Kontext zu verlassen ( 2.4.9 Link Purpose (Link Link) ) sind beide große Verbesserungen über der AA-Konformität.

In Bezug auf Links, die in neuen Fenstern geöffnet werden, fällt dies unter .2.5 Änderung auf Anfrage , was eine AAA-Konformität ist. Abhängig von der Konformitätsstufe, die Sie erreichen möchten, müssen Sie sich möglicherweise nicht daran anpassen.

Wenn Sie nur eine Handvoll Links auf Ihrer Website verteilt hätten, die in einem neuen Fenster geöffnet wurden, wäre es schön, eine visuelle Anzeige zu haben, die anzeigt, dass der Link in einem neuen Fenster geöffnet wird, und diese Informationen an Bildschirmleser weiterzuleiten. (Siehe H83: Verwenden des Zielattributs, um auf Benutzeranforderung ein neues Fenster zu öffnen und dies im Linktext (HTML) anzugeben als Beispiel. Sie können auch ein Symbol anstelle von Text verwenden, stellen Sie jedoch sicher, dass das Das Symbol hat das Attribut alt oder Sie geben einem Bildschirmleser über aria-label , aria-labelledby oder visuell versteckter Text ).

Wenn Sie dies jedoch tun und dann eine Seite haben, auf der die meisten Links zu einem neuen Fenster führen, sieht die Seite möglicherweise mit allen zusätzlichen Informationen überfüllt aus. Hier müsste man vorsichtig sein. Wenn Sie sich dazu entschließen, einen allgemeinen Kommentar zu dieser einen Seite zu verfassen, der besagt, dass alle Links in einem neuen Fenster geöffnet werden, sodass Sie nicht neben jedem Link ein Symbol benötigen, schlägt dies fehl WCAG 3.2.4 Konsistente Identifikation , was eine AA-Anforderung ist. Das heißt, Sie hätten einige Seiten mit "neuen Fenstersymbolen" neben den Links und eine andere Seite ohne diese.

Sie müssen sich also entscheiden ob Sie möchten angeben, dass ein Link in einem neuen Fenster geöffnet wird (eine AAA-Anforderung) oder nicht. Wie bereits erwähnt, ist die Implementierung einiger AAA-Anforderungen eine gute Sache. Sei einfach konsequent.

1
slugolicious

Wenn dies nur für eine Website gilt, können Sie beim Hover zwei verschiedene Unterstreichungsstile verwenden.

  • einzelne (normale) Unterstreichung für Links, die im selben Fenster geöffnet werden
  • doppelte Unterstreichung für Links, die in einem neuen Fenster geöffnet werden

Oder verwenden Sie einen der raffinierten Schwebezustände von http://ianlunn.github.io/Hover/ . Die Sprechblasen sind interessant

1
Koumtti

Um Ihre Nachfrage zu präzisieren, wäre es so etwas wie eine Wikipedia-Sache am Ende von Artikeln? (Beispiel: https://en.wikipedia.org/wiki/Supply-side_platform )

Wenn ja, denke ich, dass das Zeigen nicht so viel stört. Oder implementieren Sie so etwas wie Referenzanker, um eine "Liste" dieser Links am Ende Ihrer Artikel anzuzeigen?

Wenn Sie neue Registerkarten öffnen möchten, achten Sie darauf, den Webbrowser des Benutzers NICHT auf diese neuen Registerkarten zu konzentrieren. Oder 1) sie verlieren den Fokus auf Ihrer Hauptwebsite (was nicht gut ist) 2) dies kann zu Frustration führen, da sie bei 100% des Geschehens nicht die Kontrolle haben.

1
Rhevan