J4-System-Plugin "Zusätzliche Barrierefreiheitsfunktionen": Frontend-Icon ändern

  • Joomla Version
    4.3.3
    PHP Version
    Unbekannt
    Hoster
    -

    Hallo Miteinander,

    ich habe zwei generelle Fragen zum Plugin "System – Zusätzliche Barrierefreiheitsfunktionen" in Joomla 4.x (mit z. B. Cassiopeia):

    1. Wie kann man das standardmäßig im Frontend verwendete Icon ("Rollstuhlfahrer") in einer anderen Farbe darstellen?

    2. Wie lässt sich das standardmäßig im Frontend verwendete Icon ("Rollstuhlfahrer") ändern in ein anderes Accessibility-Icon ohne Rollstuhl?

    Z. B. so etwas in dieser Art o. ä.:

    Besten Dank & besten Gruß.

  • Hallo Batmin,

    2. Wie lässt sich das standardmäßig im Frontend verwendete Icon ("Rollstuhlfahrer") ändern in ein anderes Accessibility-Icon ohne Rollstuhl?

    Z. B. so etwas in dieser Art o. ä.:

    Erinnerte mich, dass das schon mal Thema war. Also:

    firstlady

    Wenn man das aber gemäß hier https://github.com/joomla/joomla-…e90d35e7a6a3dfb ändern würde, ist das ja bei einem Update nicht drinnen.

    Könnte man es in die user.css geben - oder anderen Tipp?

    Hab noch nicht im Backend geschaut, ob es da ev. eine Umstellmöglichkeit gibt.

    Liebe Grüße

    Christine

  • christine2 Hallo Christine,

    Dankeschön für Dein Engagement zu meinem Anliegen.

    Ja, Du hast recht, dieser PR betrifft nur das Backend. Das hätte ich vielleicht erwähnen sollen, dass ich diesen PR gestern auch gefunden hatte, aber er für meinen Frontend-Anliegen nicht weiterhilft. Das hätte Dir Arbeit erspart. Verzeih' bitte. pardon

    Besten Gruß Dir

    Batmin

  • Auf meinen Issue #41191 wird auf: https://github.com/joomla/joomla-cms/pull/39615 verwiesen.

    Den hatte ich auch schon mal im Vorfeld gesehen gehabt. Bin dann aber ausgestiegen bzw. verdrängt, weil es da um Google Font (?) geht. Erinnerung wieder da.

    Wäre ja hier einzustellen, wenn es diese vorgeschlagenen Felder Icons (zu sehen im Issue #39615) ev. mal geben sollte:

    Soll ich meinen Issue jetzt closen?

    Liebe Grüße

    Christine

  • Moin Christine.

    Dankeschön Dir abermals! Mein Wunsch ist, ein anderes Icon von Fontawesome verwenden zu können und keines von Gurgel. Und dann das Icon in einer etwas auffälligeren Farbe als das standardmäßige Grau. (Das von mir in #1 angeführte blaue Icon war nur als Beispiel gedacht, als Beispiel für ein Accessibility-Icon ohne Rollstuhl. Ich meine, dass das auch von Fontawesome stammt.)

    Danke, dass Du einen PR dafür eingereicht hast, bitte nicht "closen".

    Besten Gruß

    Batmin

    P.S: Wenn sich das Anliegen auch per CSS lösen lässt, wäre ich auch schon sehr froh über einen Hinweis zur Vorgehensweise. Das würde mir völlig reichen!

  • Mein Wunsch ist, ein anderes Icon von Fontawesome verwenden zu können und keines von Gurgel. Und dann das Icon in einer etwas auffälligeren Farbe als das standardmäßige Grau. (Das von mir in #1 angeführte blaue Icon war nur als Beispiel gedacht, als Beispiel für ein Accessibility-Icon ohne Rollstuhl. Ich meine, dass das auch von Fontawesome stammt.)

    Siehe den screenshot in meinem obigen Issue #5. Das Icon ist bei mir blau und nicht grau (?)

    Danke, dass Du einen PR dafür eingereicht hast, bitte nicht "closen".

    Öhm, habe einen "Issue" eingereicht. Wenn ich wissen täte (Codes und vieles mehr) könnte ich einen PR erstellen :)

    Nehme aber an, dass ich diesen "closen" muss, da es einen Hinweis auf diesen Issue auf Github #39615 gibt.

    Weil: wenn es in einem "Issue" einen ähnlichen oder gleichen vorhergehenden Fall schon gibt, wird der (neue) geschlossen. Na schau ma mal .........

    Liebe Grüße

    Christine

  • Jetzt komme ich etwas durcheinander, kann nicht folgen. ;)

    Ich bezog mich in meinem Post #7 auf das graue Icon (von Fontawesome), welches ich in #1 angeführt hatte.

    Und ja, in Deinem Screenshot in Post #5 hast Du ein blaues (vermutlich eines von Gurgel).

    Ah, verstanden, Issue, nicht PR. nono Hatte ich eben verwechselt, sorry. pardon

  • Moin zusammen,

    das Plugin nutzt https://ranbuch.github.io/accessibility/ als Basis unter /media/vendor/accessibility/js

    Die drei Dateien dort kann man als Override in sein eigenes Template kopieren unter /templates/eigenestemplate/js/vendor/accessibility/ oder /media/templates/site/eigenestemplate/js/vendor/accessibility/ und in den Dateien kann man jeweils https://fonts.bunny.net/icon?family=Material+Icons bei fontFaceSrc eintragen, statt die Google Quelle, damit man keine Probleme mit der EU-DSGVO bekommt. Im Backend stellt man im Plugin auf Google Material Icon um und in den drei Dateien kann man auch nach accessible suchen und es durch accessibilty ersetzen, sodass man das universelle Barrierefreiheits-Icon bekommt, statt des Rollstuhl-Icons. Man kann auch vieles andere, wie z. B. die Position anpassen. Das ist alles gut dokumentiert in obigem Link.

    Viele Grüße

    Markward

  • Hallo!

    Ich habe das Plugin nun auch mal getestet.
    Allerdings ist das nicht nutz- und brauchbar.
    Sobald man das aktiviert für die Webseite zeigt das Wave-Tool direkt 11 Contrastfehler an und ein Alert an.

    Wäre wirklich schön gewesen, aber wenn damit die Barrierefreiheit nicht mehr gegeben ist, bringt es ja nichts.

    Gruß
    sven

  • Ich hab das Problem auch mit Astroid. Wenn ich das Plugin aktiviere, kriege ich 10 Contrast Errors (mit WAVE). Wenn ich dann das Plugin so einstelle, dass für die Icons "Google Material Font" verwendet werden soll, gibt's immerhin einen Error weniger, weil das Rollstuhl-Icon einen besseren Kontrast hat. Die restlichen 9 Errors resultieren offenbar aus den 9 Menüeinträgen der Bedienhilfen, da ist der Kontrast zwischen Text und Hintergrund wohl nicht ausreichend.

    Unter github.com/ranbuch/accessibility hab ich eine Doku dazu gefunden. Unter Customize Styling hab ich folgendes gefunden als Beispiel für dark mode:

    :root {
    --_access-menu-background-color: #000;
    --_access-menu-item-button-background: #222;
    --_access-menu-item-color: rgba(255,255,255,.6);
    --_access-menu-header-color: rgba(255,255,255,.87);
    --_access-menu-item-button-active-color: #000;
    --_access-menu-item-button-active-background-color: #fff;
    --_access-menu-div-active-background-color: #fff;
    --_access-menu-item-button-hover-color: rgba(255,255,255,.8);
    --_access-menu-item-button-hover-background-color: #121212;
    --_access-menu-item-icon-color: rgba(255,255,255,.6);
    --_access-menu-item-hover-icon-color: rgba(255,255,255,.8);
    --_access-menu-item-active-icon-color: #000;
    }

    Also hab ich mir gedacht, wenn ich access-menu-iten-color auf #000000 setze, sollte der Kontrast wohl ausreichen...

    Aber wohin damit. Ich dachte, ich schreibs mal ins benutzerdefinierte CSS an den Anfang:
    :root {
    --_access-menu-item-color: #000000;
    }

    Bringt aber keine Änderung. Meine CSS-Kenntnisse reichen da leider nicht aus.

    Hat da jemand eine Idee, was ich falsch mache?

    Viele Grüße

  • Hier mal Zusammenfassung vom Eingangsthread, war letztes Post #10 in 2023.

    Das Post #11 von Ethlaegil von 2024 jetzt erst gesehen, da bzw. der Thread logischerweise geschlossen war. Diese Info war bis jetzt irgendwie dann untergegangen.
    Sonst hätte ich firstlady damals danach gefragt ....

    Recherchen ergaben, dass der letzte Stand ist:

    System - Additional Accessibility Features -> Icon alternatives · Issue #45271 · joomla/joomla-cms
    The plugin 'System - Additional Accessibility Features' offerst two icon sets to choose from: Emojies Google Material Font When choosing the Google Material…
    github.com

    Der ursprüngliche Issue #41191 mit einigen Querverweisen zu anderen Issues ...

    Hat da jemand eine Idee, was ich falsch mache?

    Nein. Habe da zurzeit keine Idee. Müsste man wohl sehen ...

    Liebe Grüße
    Christine