WCAG hochkontrast-Farbpaletten für Menschen mit Sehbehinderung

Dank der Arbeit von @pmusaraj und mir selbst bietet Discourse nun die Möglichkeit, im Einrichtungsassistenten eine Farbpalette mit höherem Kontrast auszuwählen.

Diese Paletten priorisieren den Textkontrast und sollen die Web Content Accessibility Guidelines für Farbkontraste (Level AA) erfüllen. Im Hintergrund sind dies keine normalen Farbpaletten; sie enthalten automatisch zusätzliches CSS.

Sowohl eine helle als auch eine dunkle Version sind verfügbar (sie sind die letzten beiden Optionen in der Liste). Bestehende Sites können auf die Farben zugreifen, indem sie community.yoursite.com/wizard/steps/color aufrufen, oder indem sie sie als Basispaletten auswählen, wenn sie eine neue Palette unter admin > anpassen > Farben erstellen.

Sobald diese Paletten erstellt sind, werden sie unter admin > anpassen > Farben aufgelistet. Wenn Sie sie nicht als Standardfarben Ihrer Site verwenden, können Sie auch Benutzern erlauben, diese Paletten auszuwählen.

Wenn sie als benutzerwählbar festgelegt sind, können Einzelpersonen ihre Farbpalette im Abschnitt „Schnittstelle" ihrer Einstellungen auswählen (community.yoursite.com/my/preferences/interface).

Wenn Sie Probleme mit dem Kontrast dieser Paletten feststellen, teilen Sie uns dies bitte mit, damit wir weiterhin die von den WCAG festgelegten Standards einhalten können!

27 „Gefällt mir“

Es wäre wirklich schön, wenn das Standard-Farbschema von Discourse den von WCAG festgelegten Standards entspräche. Können Sie dazu Stellung nehmen, warum dies nicht der Fall ist?

4 „Gefällt mir“

Da Discourse ursprünglich nicht für höhere Kontrastfarben konzipiert wurde, wären wahrscheinlich umfassendere Änderungen erforderlich, die über die Farben hinausgehen, um die Unterschiede auszugleichen. Dies als ersten Schritt umzusetzen, bringt diese zugänglicheren Farben bereits heute in Umlauf.

Ein kurzes Beispiel ist, wie wir den Unterschied zwischen gelesenen und ungelesenen Themen anzeigen. Standardmäßig geschieht dies, indem wir den Kontrast verringern, nachdem Sie ein Thema gelesen haben:

Um die WCAG-Standards zu erfüllen, müssen wir den Kontrast der gelesenen Titel erhöhen. Dadurch bleibt jedoch kaum noch ein Kontrast zwischen gelesenen und ungelesenen Titeln bestehen. Daher denke ich, dass wir langfristig eine andere Darstellung als den Kontrast in Betracht ziehen sollten, um die beiden zu unterscheiden.

15 „Gefällt mir“

Alles klar. Ich möchte das Team einfach nur ermutigen, diese Arbeit voranzutreiben.

8 „Gefällt mir“

Das ist phänomenal, danke schön. Im Namen einiger meiner sehbehinderten Nutzer, die sich darüber beschwert haben, ist dies sehr zu begrüßen. Ich habe dies sofort aktiviert.

15 „Gefällt mir“

Nach dem Lesen des ersten Beitrags hatte ich den Eindruck, dass die neuen Farben im Assistenten ausgewählt werden müssen, um sie einer Liste hinzuzufügen. Als ich den Assistenten ausgeführt habe und zur Seite „Farben“ gelangt bin, suchte ich nach einer Möglichkeit, alle Farben auszuwählen, da ich die neuen Farben zur Liste hinzufügen wollte. Offenbar lag mein Verständnis falsch. Aus dem, was ich sehe, lässt sich auf der Seite „Farben“ nur ein Farbschema auswählen. Jetzt bin ich verwirrt.

  1. Was bewirkt die Auswahl eines Schemas auf der Seite „Farben“? Legt dies den Standard für alle fest?
  2. Warum darf im Assistenten nur ein Farbschema ausgewählt werden? Vermutlich ist die Antwort dieselbe wie bei Frage 1.

Da ich dies schreibe, während ich den ersten Beitrag durchgehe, lasse ich die Einstellungen auf der Seite „Farben“ so, wie sie waren.

Weiter geht es zu admin > anpassen > Farben. Nach einigen Experimenten habe ich Folgendes festgestellt:

  1. Wählen Sie Neu.
  2. Öffnen Sie bei Basis-Palette das Dropdown-Menü, das nun WCAG Hell und WCAG Dunkel enthält.
    Dies bietet eine Möglichkeit, die Elemente auszuwählen.

Ich habe also WCAG Hell ausgewählt und wurde daraufhin mit einem Dialogfeld konfrontiert, in dem ich die Farbpalette benennen und Farben auswählen konnte. Wie im Beispiel habe ich den Namen WCAG Hell eingegeben, die Option Farbschema kann von Benutzern ausgewählt werden aktiviert und dann auf Speichern geklickt.

Auf community.yoursite.com/my/preferences/interface habe ich den Abschnitt Farbschema nicht gefunden.

Außerdem verfügt unsere Seite über den Hamburger-Theme-Auswähler. Ich dachte, diese würden dort automatisch erscheinen, aber es scheint, dass ich ein neues Basis-Theme (Theme) erstellen muss, um sie zu verwenden.

Das ist keine Beschwerde, sondern nur ein Feedback von jemandem, der den Beitrag zum ersten Mal liest und ihn testet. :slightly_smiling_face:

2 „Gefällt mir“

Hmm, das hätte funktionieren müssen. Möglicherweise musste die Seite für die Schnittstellenpräferenzen neu geladen werden.

3 „Gefällt mir“

Das ist das, was ich sehe. Ich habe sogar die HTML-Seite neu geladen, aber es hat sich nichts geändert.

Hinweis: Die Seite wird von Discourse Hosting gehostet, falls das relevant ist – https://swi-prolog.discourse.group/

1 „Gefällt mir“

Ich habe mir Ihre Seite angesehen. Ich sehe nicht, dass „Farbschema kann von Benutzern ausgewählt werden

5 „Gefällt mir“

Oh, das war so lustig. Nicht du, sondern was ich gemacht habe. Danke, dass du nachgeschaut und geantwortet hast.

Von Admin > Einstellungen > Anpassen > Farben

Sieh dir im linken Bereich WCAG Light und WCAG Dark an.

Ein Klick auf WCAG Light zeigt

Dann habe ich Farbschema kann von Benutzern ausgewählt werden aktiviert.

Was mir beim ersten Mal nicht aufgefallen war, war das hinzugefügte blaue Kontrollkästchen.

Ein Klick auf das hinzugefügte blaue Kontrollkästchen ändert die Anzeige in

Dann zeigt SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language jetzt

:slightly_smiling_face:


Nachdem ich noch einige weitere Farben hinzugefügt habe, die von Benutzern verwendet werden können, hat sich die Schnittstellenoption geändert und mir die Wahl zwischen Regular- und Dark-Modus gegeben.

7 „Gefällt mir“

Könntest du das bitte genauer erläutern? Ich bin dabei, mein erstes Forum einzurichten und möchte das Farbschema anpassen sowie einen automatischen Wechsel in den Dunkelmodus basierend auf den Systemeinstellungen der Nutzer unterstützen.

Sollte ich Farben auf Basis dieser neuen Schemata anpassen?

Wie lauten die aktuellen Schritte zum Erstellen eines benutzerdefinierten Farbschemas angesichts der jüngsten Änderungen bei der Gestaltung von Farbschemata zur Unterstützung des Dunkelmodus (wie in jüngsten Threads diskutiert) und dieser neuen zugänglichen Schemata?

Vielen Dank!

2 „Gefällt mir“

Wenn also diese WCAG-Paletten ausgewählt werden, wird zusätzlicher CSS-Code (hier zu finden) geladen, um die Farben verschiedener Elemente anzupassen (in der Regel wird dabei eine Farbvariable mit höherem Kontrast verwendet als standardmäßig). Ich vermute, dass das CSS basierend auf dem Namen der Farbpalette geladen wird…

Wenn du also diese Paletten ändern möchtest und einige der Kontrastverbesserungen durch das benutzerdefinierte CSS beibehalten willst, musst du den Namen wohl nicht ändern (stimmt das, @pmusaraj?).

Alternativ könntest du den CSS-Code aus dem oben genannten Link kopieren und in deinem eigenen Theme verwenden (du würdest dann jedoch Updates verpassen, die wir vornehmen).

9 „Gefällt mir“

Nein, das WCAG-spezifische CSS wird nur eingebunden, wenn das aktuelle Farbschema eine Ableitung eines der beiden Basis-WCAG-Schemata ist. Du kannst das neue Schema also beliebig benennen, aber wenn es von einem Basis-WCAG-Schema abgeleitet wurde, erhält es das zusätzliche CSS.

10 „Gefällt mir“

Toll, dass es diese neue Funktion gibt! Ich bin neugierig: Erfüllt Discourse aktuell die vollständigen WCAG-Richtlinien oder gibt es noch etwas zu tun?

1 „Gefällt mir“

Es gibt noch etwas mehr zu tun, aber nicht viel. Wir sind zu 99 % am Ziel und arbeiten derzeit aktiv mit einem Barrierefreiheitsberater zusammen, um die letzten Lücken zu schließen.

7 „Gefällt mir“

Das ist großartig zu hören für alle Nutzer. Und auf welche WCAG-Richtlinien arbeiten Sie zu? WCAG 3.0?

2 „Gefällt mir“

Wir arbeiten an der Umsetzung der WCAG 2.0. Die WCAG 3.0 befindet sich laut WCAG 3 Introduction | Web Accessibility Initiative (WAI) | W3C noch im Entwurfsstadium.

7 „Gefällt mir“

Beim Verfolgen dieses Threads freue ich mich zu hören, dass WCAG 2.0 unterstützt wird. Vielleicht habe ich es übersehen, aber ich sehe keine Erwähnung von Untertiteln. Unterstützt Discourse Untertitel bei Videoinhalten? Gibt es in Discourse einen Mechanismus, um Videos mit Untertiteln zu veröffentlichen?

2 „Gefällt mir“

Untertitel können manuell über das HTML5-Video-Tag hinzugefügt werden. Zudem steht eine Theme-Komponente zur Verfügung, die eine einfache Benutzeroberfläche dafür bietet.

8 „Gefällt mir“

Vielen Dank für WCAG Dark! Ich liebe es!!

Ich habe eigentlich keine Verwendung dafür (soweit ich weiß) – ich finde nur, dass es fantastisch aussieht. :heart:

3 „Gefällt mir“