Thema "Betreff: Barrierefrei" in Website & Apps

Barrierefrei

sunny-dj — Fri, 20 Dec 2024 11:14:20 GMT

Ich selbst bin farbenblind (rot/grün) und kann die rot bzw. grün angezeigten Renditen nicht unterscheiden.
So kann ich mich zwar an den Minuszeichen orientieren, sehe aber die Trends nicht auf einen Blick.
Mein Vorschlag: Bitte kennzeichnet die Minusrendite mit einem weiteren Layoutmerkmal, bevorzugt wäre m.E. eine Negativdarstellung, mit ausreichend dunklem roten Untergrund, siehe Anlage.

Betreff: Barrierefrei

Morgenmond — Fri, 20 Dec 2024 11:36:22 GMT

@sunny-dj schrieb:
Ich selbst bin farbenblind (rot/grün) und kann die rot bzw. grün angezeigten Renditen nicht unterscheiden.
So kann ich mich zwar an den Minuszeichen orientieren, sehe aber die Trends nicht auf einen Blick.
Mein Vorschlag: Bitte kennzeichnet die Minusrendite mit einem weiteren Layoutmerkmal, bevorzugt wäre m.E. eine Negativdarstellung, mit ausreichend dunklem roten Untergrund, siehe Anlage.

Hi @sunny-dj ,

ich bin zwar nicht farbblind habe aber eine Rot-Grün-Schwäche und kann deinen Einwand komplett nachvollziehen.

Die Abstufungen bei den Farben sind auch für mich oft nicht erkennbar.

Klare und deutliche Farben würden da Abhilfe schaffen.

@SMT_Chris @SMT_Ines @SMT_Birgit ,

könntet ihr dies bitte an die zuständige Abteilung mit der Bitte um Umsetzung weiterleiten ?

Dies wäre ein wichtiger Schritt hin zur Barrierefreiheit.

Danke.

Gruß Morgenmond

Betreff: Barrierefrei

dg2210 — Fri, 20 Dec 2024 12:22:59 GMT

@sunny-dj schrieb:
Ich selbst bin farbenblind (rot/grün) und kann die rot bzw. grün angezeigten Renditen nicht unterscheiden.
So kann ich mich zwar an den Minuszeichen orientieren, sehe aber die Trends nicht auf einen Blick.
Mein Vorschlag: Bitte kennzeichnet die Minusrendite mit einem weiteren Layoutmerkmal, bevorzugt wäre m.E. eine Negativdarstellung, mit ausreichend dunklem roten Untergrund, siehe Anlage.

Das Gute ist: Die comdirect hat das schon umgesetzt. Statt 'fester Farben' sind die Auszeichnungen abstrakt vorgenommen; in der Depotübersicht steht dann im HTMl-Text nicht 'green', sondern 'cd--positive'. Du kannst dir daher ganz einfach in deinem Browser (evtl mit einer entsprechenden Erweiterung) die angezeigten Farben zu einem Farbton ändern, der dir angenehmer ist - oder die Darstellung auf invers ändern etc.

Betreff: Barrierefrei

Thorsten_ — Fri, 20 Dec 2024 17:40:08 GMT

Die Fachabteilung wurde bereits 2023 informiert:

Nach dem "Barrierefrei-Design-Relaunch" im letzten Sommer wurde auch das Thema Rot-Grün-Schwäche thematisiert, u. a. hier:

(Details zu den gewählten Farben und den Gründen von @SMT_Chris stehen in diesem und diesem und diesem Beitrag.)

Betreff: Barrierefrei

sunny-dj — Sat, 21 Dec 2024 10:48:15 GMT

Vielen Dank, das klingt gut.

Allerdings kann ich mit "das ist ganz einfach" nicht viel anfangen.
Kannst du mir bitte noch ein Stichwort geben, mit dem ich in Google suchen kann um den Farbton 'cd--positive' für mich einzustellen. Ich kann sogar css. Vielen Dank im Voraus.

Betreff: Barrierefrei

dg2210 — Sat, 21 Dec 2024 12:19:28 GMT

@sunny-dj schrieb:
Vielen Dank, das klingt gut.
Allerdings kann ich mit "das ist ganz einfach" nicht viel anfangen.
Kannst du mir bitte noch ein Stichwort geben, mit dem ich in Google suchen kann um den Farbton 'cd--positive' für mich einzustellen. Ich kann sogar css. Vielen Dank im Voraus.

CSS !

Genau zu diesem Zweck wurde CSS ja erfunden: der Server liefert einen ausgezeichneten Text und der Browser macht aus den Auszeichnungen eine Seite am Bildschirm.

Betreff: Barrierefrei

sunny-dj — Sat, 21 Dec 2024 16:55:35 GMT

Sorry, das ist mir klar!
Das verwende ich jeden Tag um meine Webseiten zu gestalten.
ABER:
Wie kann ich der ComDirect Seite ein css unterschieben?
Oder allgemeiner gefragt: was genau muss ich tun, um 'cd--positive' mein eigenes Aussehen festzulegen.
Das will ich natürlich nicht jedesmal frickeln sondern für ComDirect allgemein festlegen.
Da ich aber zu doof bin aus "CSS!" eine Handlung abzuleiten, bitte ich um konkretere Angaben.

Vielen Dank im Voraus

Betreff: Barrierefrei

dg2210 — Sat, 21 Dec 2024 18:20:31 GMT

@sunny-dj schrieb:

Da ich aber zu doof bin aus "CSS!" eine Handlung abzuleiten, bitte ich um konkretere Angaben.

Es ist keine Schande, sich nicht damit auszukennen. Ab einfachsten wird sein, du suchst dir jemand bei Fivver o.ä., der das für dich macht.

Betreff: Barrierefrei

Thorsten_ — Sun, 22 Dec 2024 10:30:23 GMT

Du kannst die Bordmittel des Browsers nutzen (Bsp. Firefox). Oder es gibt Erweiterungen für diesen Zweck, wie z. B. Stylus (https://add0n.com/stylus.html).

Betreff: Barrierefrei

Weinlese — Sun, 22 Dec 2024 16:46:16 GMT

@sunny-dj schrieb:
Mein Vorschlag: Bitte kennzeichnet die Minusrendite mit einem weiteren Layoutmerkmal, bevorzugt wäre m.E. eine Negativdarstellung, mit ausreichend dunklem roten Untergrund, siehe Anlage.

Hier ist einmal eine einfache Umsetzung mit den oben erwähnten CSS-Klassen für die Erweiterung Stylus. Dazu das Stylus-Icon oben rechts anklicken, "Style erstellen für" mit der comdirect-Adresse auswählen und dann denn CSS-Code in den Editor eingeben:

td > span.color--cd-negative { padding-left: 10px; background-color: red !important; color: white !important; }

Das Ergebnis sieht dann so aus:

Diese einfache Version unterlegt alle negativen Werte mit einem roten Hintergrund. Für die positiven Werte kann man eine ähnliche Regel anlegen, bei der das "cd-negative" durch "cd-positive" ersetzt wird. Man kann das ganze auch noch verfeinern und nur bestimmte Spalten in der Tabelle auswählen.

/* Alle Spalten */ td > span.color--cd-negative { ... } /* Nur Spalte mit Gesamtwert der Papiere */ td[data-label="Wert in EUR / Diff. seit Kauf"] > span.color--cd-negative { ... } /* Nur Spalte mit aktuellem Kurs/Tagesänderung */ td[data-label="Aktuell / Diff. zum Vortag"] > span.color--cd-negative { ... }

Die Möglichkeiten sind vielfältig, nur je größer die Spielerei, desto komplizierter der CSS-Code. 🙂

Viele Grüße

Weinlese

Betreff: Barrierefrei

Silver_Wolf — Sun, 22 Dec 2024 17:31:12 GMT

@Thorsten_ schrieb:
Oder es gibt Erweiterungen für diesen Zweck, wie z. B. Stylus (https://add0n.com/stylus.html).

Stylus ist schon ein geiles Tool.

Ich habe mir damit hier auch die ganzen lästigen grell-gelben Widgets in ein angenehmes Türkis umgefärbt. 🙂

Betreff: Barrierefrei

sunny-dj — Sun, 22 Dec 2024 18:06:24 GMT

Hallo Weinlese,
vielen Dank, das ist eine Anleitung mit der ich das hingekriegt habe.
Es funktioinert !

Danke !

Ich habe deine Anleitung mal vervollständigt (ist mein Job)
und ein Bild dazu gemalt.

Anleitung um die negativen Werte auf rot unterlegt anzuzeigen.

1. Erweiterung stylus im ChromeWebstore suchen und installieren

2. auf die Seite von comdirect gehen, auf der die Anzeige funktionieren soll
dort oben rechts auf das Icon Erweiterungen klicken

> Stylus > Style erstellen für ...

3. css eingeben und speichern

4. ausprobieren. die negativen Werte werden rot unterlegt.

Betreff: Barrierefrei

Weinlese — Mon, 23 Dec 2024 16:14:10 GMT

@sunny-dj

Freut mich, dass es direkt geklappt hat. Ich hatte es nur im Firefox ausprobiert, nicht in Chrome. Deine Anleitung für die Erweiterung funktioniert im Firefox aber genau so.

Viele Grüße

Weinlese