Barrierefrei-Button

Hallo ihr Lieben,
da das Thema barrierefrei ja spätestens durch das BFSG in aller Munde ist, habe ich mir überlegt, wieso nicht noch einen kleinen Schritt weitergehen?

Jaja, ich weiß, unsere Seite muss hinsichtlich des Themas sowieso noch stark überarbeitet werden - ich bin bereits dran!​

Jedenfalls habe ich mir überlegt, dass manche Dinge, die die Barrierefreiheit stärken, für die meisten anderen Nutzer ohne Beeinträchtigung störend sein könnten oder das Design unverhältnismäßig beeinflussen könnten - z.B. die Verwendung einer speziell für Legastheniker entwickelten Schriftart, der Unterstrich bei Links, etc.

Da wäre es doch toll, wenn es einen Button gäbe, den die beeinträchtigen Menschen drücken könnten, und schwupps wird die Seite mit einer anderen Schriftart, einer größeren Schriftgröße, unterstrichenen Links, etc. angepasst. Damit man sich dann noch gescheit durch die verschiedenen Seiten des Onlineshops klicken kann, sollte die Einstellung natürlich am Besten für die gesamte Sitzung gespeichert werden. Ich nehme an, dass hierfür auch irgendwelche Cookies gesetzt werden müssten...

Jetzt habe ich allerdings ein Problem: Uns zwar bin ich technisch maximal unbegabt. Also was macht man in der heutigen Zeit? Genau - man fragt Chat GPT.
Herausgekommen ist Folgendes:

HTML:

<button id="accessibility-toggle">Barrierefrei</button>

Code:

/* Standard-Schriftart und -Stil */
body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #ffffff;
  color: #000000;
}

/* Barrierefrei-Optionen */
body.barrierefrei {
  font-family: 'OpenDyslexic', sans-serif; /* Dyslexie-Schriftart */
  font-size: 18px; /* Größere Schrift */
  line-height: 1.75;
  background-color: #f4f4f4; /* Hellerer Hintergrund */
  color: #333333; /* Dunklerer Text */
}

/* Links unterstrichen */
a.barrierefrei {
  text-decoration: underline;
  color: #0056b3; /* Farblich angepasste Links */
}

/* Alternativer Button-Stil (falls benötigt) */
button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Code:

document.getElementById("accessibility-toggle").addEventListener("click", function() {
  // Toggle die barrierefrei-Klasse für den gesamten Body
  document.body.classList.toggle("barrierefrei");
 
  // Toggle Links unterstrichen machen, wenn Barrierefrei aktiviert ist
  var links = document.querySelectorAll("a");
  links.forEach(function(link) {
    link.classList.toggle("barrierefrei");
  });
 
  // Speichern der Einstellung im localStorage, damit sie über die Sitzung hinweg erhalten bleibt
  var isAccessible = document.body.classList.contains("barrierefrei");
  localStorage.setItem("barrierefrei", isAccessible);
});

// Beim Laden der Seite prüfen, ob die Barrierefrei-Option aktiv war
window.addEventListener("load", function() {
  var isAccessible = localStorage.getItem("barrierefrei") === "true";
  if (isAccessible) {
    document.body.classList.add("barrierefrei");
    var links = document.querySelectorAll("a");
    links.forEach(function(link) {
      link.classList.add("barrierefrei");
    });
  }
});

Natürlich müsst man sich dann auch noch die entsprechende Schriftart im Shop einbinden und kann die Farben an die eigenen Bedürfnisse einpassen.

Wo ich das CSS einfügen muss, ist klar. Beim html wird es schon schwieriger - ich dachte eigentlich so ein Button macht irgendwo "oben" Sinn... aber natürlich nicht nur auf der Startseite, sondern überall. Vielleicht dann doch in den Footer?
Aber jetzt kommt die alles entscheidende Frage für jemanden wie mich, der keine Ahnung von Tuten und Blasen in Bezug auf Javascript hat: Wo zum Teufel baue ich das ein?

Vielleicht gefällt ja Jemandem die Idee mit dem Button und möchte die Idee weiterentwickeln - oder mir auch einfach nur verraten, wie ich das eingebaut bekomme.

Ganz liebe Grüße an alle!
Manuela von Wiki-Naturwaren

 

Sehr cool, gefällt mir gut. Das hat ja tausende Funktionen. Was mir nicht gefällt: der Preis - und dann auch noch monatlich statt einer Einmal-Zahlung für ein einmal installiertes Plug-In.
Mir würde so eine abgespeckte Version schon reichen - sodass man sich die Schriftgröße z.B. nicht aussuchen kann, sondern sie bei Klick auf den Button einfach in "groß" ausgewählt wird. An - Aus - Fertig.

 

Für alle, die so ein Tool auch interessiert: Ich habe "AccessYes" von "CookieYes" gefunden, das ist ein kostenloses Tool. Nicht so ausgereift wie das von @tannenhof_imshausen genannte Tool, dafür kostenlos uns super schnell eingebaut. Ich teste es gerade in meinem Testshop und bin bisher ganz zufrieden.