ich arbeite an der RAMP COVID-19-Initiative. Wir haben Discourse für unser Forum ausgewählt und sind sehr zufrieden damit.
Ein Kollege und ich haben uns mit der Barrierefreiheit beschäftigt. Ich bin der Meinung, dass wir Probleme mit zu geringem Kontrast mithilfe der Admin-CSS-Funktion behoben haben. Allerdings weist WAVE auf einige Probleme hin, bei denen wir uns nicht sicher sind, ob wir sie selbst lösen können, und zwar wie folgt:
Verknüpfte Bilder fehlen Alternativtext: Dies betrifft die Avatarbilder. Es gibt einen beschreibenden Titel, aber das Attribut alt ist leer.
Auf jeder Seite fehlt eine Beschriftung:
<div><input type="text"></div>
Auf jeder Seite gibt es eine leere Überschrift:
<div class="title"><h3></h3><!-- --></div>
Es werden zahlreiche leere Buttons gemeldet, die mit SVG verknüpft sind.
Es gibt leere Links, z. B.: <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
und <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.
Es gibt eine leere Tabellenkopfzeile: <th data-sort-order="posters" class="posters"></th>
Ich wäre sehr überrascht, wenn wir die einzigen wären, die diese Probleme haben. Ich frage mich also, ob WAVE die Dinge überdenkt oder ob wir vielleicht ein paar Tricks übersehen haben. Jegliche Hilfe wäre sehr willkommen.
Vielen Dank für Ihr Interesse. Einen Punkt bin ich mir nicht sicher, ob ich ihn finden kann (die leere Überschrift), aber den Rest erhalte ich über die WAVE-Funktionalität „Code“ und kann ihn (mit etwas Aufwand) mit dem F12-Inspektor finden.
Ich bin mir nicht sicher, ob die Zeitzonen auf unserer Seite liegen (ich bin im Vereinigten Königreich, UTC+01:00), aber ich würde gerne eine Teams- oder ähnliche Konferenz ansetzen, um es zu demonstrieren, falls das hilfreich ist.
Einige Screenreader ignorieren Avatare korrekt, andere lesen den Namen/Benutzernamen jedoch aufgrund dessen doppelt vor.
Ich habe einen PR erstellt, um das title-Attribut von Beitrags-Avataren zu entfernen:
Dies ist das Eingabefeld, in dem die zu kopierende und teilende URL angezeigt wird. PR zum Hinzufügen eines aria-Labels hier:
Ich konnte diese nicht finden … sie könnte auf Site-Einstellungen basieren? Muss ich noch etwas genauer untersuchen.
Wir kennzeichnen dies nicht für sehende Nutzer, da wir einen Blick auf die Spalte werfen und eine Annahme über ihren Inhalt treffen können … das ist viel schwieriger, wenn man nicht sehen kann … eine Beschriftung für Screenreader hinzuzufügen, ergibt Sinn:
Die verbleibenden Probleme, die ich nicht behandelt habe, betreffen Buttons; ich muss mich noch damit befassen …
vielen Dank für die schnellen Antworten und Maßnahmen zu diesem Zeitpunkt. Kann ich bestätigen, dass die zusammengeführten Anfragen nun ab einer bestimmten Version im Code enthalten sind?
Wäre es zudem hilfreich, wenn ich das von uns angepasste Thema (bereinigt und) zur Verfügung stelle, um die WAVE-Barrierefreiheitsprüfungen zu bestehen?
Ich werde mir später (hoffentlich) den Mut nehmen, alle Updates durchzuführen, und mich erneut melden.
Zum Thema: Es wurde alles etwas unübersichtlich. Wir verwenden das Light-Theme (und haben es modifiziert). Wir haben folgende Änderungen auf hoher Ebene an den Farben vorgenommen:
Die clevere Idee, die mir später eingefallen ist, besteht darin, einfach die Farbseite auf Barrierefreiheit zu testen.
Anschließend haben wir eine Vielzahl von Änderungen über den CSS-Editor (admin/customize/themes/3/common/scss/edit) vorgenommen. Ich bin mir nicht sicher, wie ich diese weitergeben soll (ich könnte sie kopieren und einfügen, aber ich weiß nicht, ob das das ist, was Sie möchten, oder ob Sie es in diesem Thread haben wollen). Ich denke, wenn wir die anderen erwähnten Farben (z. B. var(–primary-medium)) in einer übersichtlichen Schnittstelle sehen könnten, würden die Dinge einfacher werden. Ein klassisches Beispiel war #919191 → #595959, aber meine Methode behandelt nur Symptome, die ich beim Durchsuchen der Seiten sehe (und angesichts der dynamischen Natur der „Seite
Meiner Erinnerung nach verwendet die Admin-Seite von Discourse separate (schwieriger zu bearbeitende) Stylesheets, um zu verhindern, dass Nutzer sich versehentlich durch CSS-Änderungen den Zugang zur funktionsfähigen Admin-Oberfläche verwehren.
Ich bin dabei etwas ins Hintertreffen geraten, obwohl wir das Forum bereits aktualisiert haben. Aber ich wollte trotzdem denjenigen antworten, die sich die Zeit genommen haben (vielen Dank!), sich diesen Thread anzusehen.
Danke. Wenn ich auf deinen Link klicke, findet Wave 13 Barrierefreiheitsprobleme (zu geringer Kontrast), aber nicht bei den Farben selbst. Das liegt daran, dass – im Gegensatz zur Farbenseite – nicht gezeigt wird, wie sie verwendet werden (als Hintergrund oder Vordergrund mit Text).
Lass mich wissen, wie ich helfen kann; es gibt dort tatsächlich viele Kontrastfehler.
Ich habe mir das noch einmal angesehen, und die Anzahl der Fehler hat sich stark verringert. Vielen Dank an @awesomerobot und alle anderen, die geholfen haben!
Ich erhalte weiterhin folgende Fehler:
Beim Aufrufen einer Kategorie: Leerer Button im folgenden Code:
Bei bewerteten Beiträgen (ich bin mir nicht sicher, wie verbreitet dies in Discourse ist; es ist eine Erweiterung, die @angus freundlicherweise für uns entwickelt hat): Fehlendes Formular-Label
Zahlreiche Vorkommen (40 auf der Seite, die ich mir anschaue, mit zwei Benutzern, die bewertet haben), die so aussehen: <input class=" disabled" type="radio" value="1" checked="" disabled="">. Das befindet sich unter <span class="star-rating">.
