TheCodeAtlas – Projekte & Produkte

Der Reading Mode PRO ist das modernste, systemunabhängige Lesemodus-Add-on für Webseiten, Blogs, CMS, Shops und Frameworks. Mit einem einzigen Klick verwandelt sich jede Seite in ein ruhiges, perfekt lesbares E-Reader-Layout – optimiert für Barrierefreiheit, Lesekomfort und professionelle Darstellung. Warum dieses Add-on? Viele Webseiten sind modern, aber schwer lesbar: zu breite Layouts, ablenkende Elemente, zu kleine Schrift oder zu geringe Zeilenabstände. Der Reading Mode PRO löst dieses Problem sofort — systemunabhängig, ohne Eingriff in das bestehende Layout und ohne Änderungen am Theme. Hauptfunktionen ✔ Ein-Klick-Lesemodus für jede Webseite ✔ Optimierte Lesespalte (max. 700px) ✔ Große, angenehme Schrift ✔ Erhöhter Zeilenabstand (1.8) ✔ E-Reader Hintergrund (hell / dunkel je nach Systemmodus) ✔ Dark Reading Mode (automatisch) ✔ Bilder dezent und lesefreundlich ✔ Header/Navi/Footer ausgeblendet ✔ Serif-Schrift für bessere Lesbarkeit ✔ Wieder abschaltbar – ohne Rückstände ✔ Lokale Speicherung (Bevorzugter Modus bleibt erhalten) ✔ sauber getrennte CSS/JS – keine Konflikte Kompatibilität (100 % garantiert) HTML / PHP WordPress Joomla Typo3 Shopify WooCommerce Shopware Laravel / Symfony / Blade Twig / Smarty Templates Statische Seiten HuMo-Genealogy (mit optionalem Farbfix) Barrierefrei & Benutzerfreundlich bessere Lesbarkeit für Senioren optimal für Menschen mit Sehschwäche ideal für behördliche Webseiten rechtlich relevant durch Barrierefreiheitspflichten perfekt für Blogs, Texte, Dokumentationen, Artikel Bonus-Vorteil Durch die fokussierte Darstellung profitieren SEO, UX und Verweildauer: ✔ längere Lesezeit ✔ weniger Absprünge ✔ bessere Verständlichkeit ✔ professioneller Eindruck Integration Die Installation ist extrem einfach: CSS + JS: <link rel="stylesheet" href="/reading-mode/reading-mode.css"> <script src="/reading-mode/reading-mode.js" defer></script> vor </body> einfügen fertig Kein Setup. Kein Backend. Keine Anpassung. Sofort einsatzbereit auf jeder Seite. Branding „Powered by TheCodeAtlas – Reading Mode PRO“ ist ein fester Bestandteil der Lizenz und muss sichtbar bleiben. Klicken Sie unten rechts auf den runden blauen Button mit dem Buchsymbol, um den Reading Mode sofort auszuprobieren.

Die A11y Suite – Universal Edition ist das leistungsstarke Barrierefreiheits-Tool für moderne Webseiten, CMS, Shops, Blogs und Frameworks. Sie wurde entwickelt, um vollständig systemunabhängig zu funktionieren – egal ob klassische PHP-Webseite, WordPress, Joomla, Typo3, Laravel, HuMo-Genealogy oder ein statischer HTML-Onepager. Mit einem eleganten, kompakten Interface stellt die A11y Suite essenzielle Accessibility-Funktionen bereit, die Menschen mit Seh- und Leseschwierigkeiten den Zugang zu Ihrer Webseite erheblich erleichtern: vergrößerte Schriftgrößen erhöhter Zeilenabstand hoher Kontrastmodus Dark Mode (Theme-Umschaltung) Link-Hervorhebung Dyslexie-Font (OpenDyslexic) reduzierte Animationen lokale Speicherung aller Einstellungen (LocalStorage) Dank der Universal Engine funktioniert die A11y Suite selbst dann stabil, wenn andere Widgets scheitern: kompatibel mit allen Systemen Kompatibilitätsmodus für schwierige Umgebungen (High-Power) Hard-Compat Engine für ältere CMS / Themes automatische Anwendung in iframes (sofern erlaubt) Schutz vor doppelter Initialisierung vollständige Reversibilität aller Einstellungen keine CSS-Konflikte, kein Inline-Styling-Chaos 🔧 Einfache Integration Die Installation ist extrem unkompliziert: Standard: Einfach die beiden Codezeilen vor dem schließenden </body> einfügen – fertig. Falls kein zentraler Footer existiert: Den Code in jede gewünschte Frontend-Seite einfügen. Keinerlei Plugins, Dependencies oder externe Ressourcen notwendig. 🎁 Bonus enthalten: Der A11y Scanner Die Universal Edition enthält zusätzlich einen integrierten A11y-Scanner, der jede beliebige URL analysiert und automatisch folgende Werte liefert: Accessibility Score (0–100) häufige Barrierefreiheitsprobleme, u. a.: fehlende ALT-Texte fehlende Überschriften Formulare ohne Labels schwache Kontraste strukturelle Hinweise Ideal für Qualitätskontrolle, WCAG-Optimierungen, SEO und Agenturen. ✅ Haupt-Features Barrierefreiheit per Klick Textgröße: Normal / Groß / Extra-Groß Zeilenabstand: Standard / Groß / Extra-Groß Hoher Kontrastmodus Dark Mode Link-Hervorhebung (dashed outline) Dyslexie-Font (OpenDyslexic) Animationen deaktivieren Reset & persistente Speicherung Moderne Universal-Technik funktioniert zuverlässig mit jedem System kompatibel mit SPA, AJAX & dynamischen Inhalten automatische Anwendung in iframes Hard-Compat Engine für ältere und CSS-lastige Systeme High-Power Modus zur Sicherstellung maximaler Kompatibilität Fehler-resistent (try/catch-Mechanismus) Benutzerfreundlich & DSGVO-konform keine Cookies keinerlei externe Datenverarbeitung nur LocalStorage wartungsfrei 🧩 Kompatibilität System / CMS Kompatibel HTML / PHP ✔ 100% WordPress ✔ Joomla ✔ Typo3 ✔ Contao ✔ Drupal ✔ WooCommerce / Shopware ✔ Laravel / Symfony / Blade ✔ Twig / Smarty Templates ✔ HuMo-Genealogy ✔ (optimiert durch Hard-Compat Engine) Statische Webseiten ✔ 🛠️ Technische Angaben CSS: ~ 4 KB JS: ~ 12–15 KB (Universal Engine) keine Abhängigkeiten keine externen Fonts oder Frameworks editorfreundlich & leicht anpassbar 💼 Perfekt geeignet für: Unternehmensseiten Shops Behörden & öffentliche Einrichtungen Blogger & Creator Vereine & Organisationen Portfolio-Seiten Genealogie-Projekte Entwickler & Agenturen 🎯 Call to Action Machen Sie Ihre Webseite mit wenigen Klicks inklusiver – ohne Umbau, ohne Plugins, ohne Risiken. Jetzt sichern, einfügen und sofort nutzen. 🔗 Branding (Pflichtbestandteil) Der integrierte Hinweis „Powered by TheCodeAtlas – A11y Suite Premium“ ist ein fester Bestandteil der Lizenz und muss sichtbar bleiben. Das Entfernen, Verbergen oder Manipulieren des Brandings ist nicht gestattet.

Der Smart Focus Highlighter (Premium) ist ein modernes Accessibility-Add-on, das automatisch sichtbare Fokusrahmen für Links, Buttons, Formulare und Navigationselemente erzeugt – vollständig WCAG-konform und ohne Änderungen am HTML-Code. Viele moderne Webseiten haben unsichtbare oder schlecht erkennbare Fokuszustände. Das führt zu Bedienproblemen für Nutzer mit Tastatur, Sehschwäche oder motorischen Einschränkungen. Der Smart Focus Highlighter löst dieses Problem sofort und ohne Aufwand. ⭐ Hauptfunktionen ✔ Sichtbarer Fokus auf allen wichtigen Elementen Links Buttons Formulare Inputs Navigation Menüs Tabellen Icons / SVG-Links Der Fokus wird als deutlich sichtbarer, aber dennoch eleganter Rahmen angezeigt. ✔ WCAG-konformes Interaktionsverhalten Der Highlighter arbeitet exakt nach den Anforderungen der Barrierefreiheit: 1. Interaktion → Fokus wird sichtbar 2. Interaktion → Aktion wird ausgeführt So wird verhindert, dass Nutzer unbeabsichtigt Links öffnen oder Buttons auslösen. Dieses zwei-stufige Verhalten ist Standard und wird im internationalen Accessibility-Regelwerk empfohlen. ✔ Zero-Setup – sofort einsatzbereit kein HTML anpassen keine IDs setzen keine Klassen ändern keine Templates umbauen kein CMS-Plugin notwendig Einfach zwei Codezeilen in den Footer einfügen – fertig. ✔ Universell kompatibel Funktioniert mit allen Systemen: PHP/HTML WordPress Joomla Typo3 Contao Drupal WooCommerce Shopware Laravel / Symfony HuMo-Genealogy Statische Seiten ✔ Elegantes Design Der Fokusrahmen ist modern, dezent, aber klar sichtbar, ohne das Layout zu zerstören. ✔ DSGVO-konform keine Cookies keine externen Quellen keine Datenübertragung rein clientseitig 🎁 Bonus Im Paket enthalten: Smart Focus Debug Mode → Zeigt per Tastendruck alle Elemente an, die fokussierbar sind (Entwickler-Tool). 💼 Ideal für: Unternehmenswebseiten Blogs Online-Shops Behörden & Kommunen Vereine & soziale Projekte Entwickler & Agenturen Barrierefreie Pflichtseiten 🎯 Produkt-CTA Machen Sie Ihre Webseite sofort barrierefreundlicher – mit nur einer einzigen Einbindung und ohne jede Änderung am bestehenden Design. 🔗 Branding-Hinweis Der integrierte Hinweis „Powered by TheCodeAtlas – Smart Focus Highlighter“ ist ein fester Bestandteil der Lizenz und darf nicht entfernt oder verdeckt werden.

Der A11y Form Checker ist ein leistungsstarkes Tool zur Analyse und Optimierung der Barrierefreiheit von Formularen. Er erkennt automatisch Probleme bei Eingabefeldern, Labels, Buttons, Pflichtfeldern, Kontrast, ARIA-Attributen und Form-Strukturen – und macht sie direkt im Dokument sichtbar. Mit nur einem Klick erhalten Sie: einen vollständigen Formular-Accessibility-Check einen A11y-Score (0–100) eine klare Liste aller Fehler & Hinweise Markierungen direkt im Formular Navigation per Klick zum Problemfeld Keine Server-Installation, kein Backend, keine Abhängigkeiten – der A11y Form Checker läuft in: ✔ HTML / PHP ✔ WordPress ✔ Joomla ✔ Typo3 ✔ Contao ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel, Symfony, Blade ✔ Twig / Smarty ✔ HuMo-Genealogy ✔ sogar in iframes (soweit erlaubt) Einfach einbinden – und direkt scannen. ✅ Haupt-Features 🔍 Automatische Formularanalyse fehlende Labels Placeholder statt Label Pflichtfelder ohne aria-required Buttons ohne Text / ohne aria-label Felder ohne ID oder mit doppelter ID schlechte Kontrastwerte Formulare ohne Submit-Button Strukturfehler (fieldset, legend, grouping) Tab-Reihenfolge / Fokus-Probleme (heuristisch) 🧭 Interaktive Fehlerliste Fehler (rot), Hinweise (gelb), Infos (blau) Klick öffnet das betroffene Feld betroffene Elemente werden optisch hervorgehoben Flash-Effekt zum schnellen Auffinden 📊 A11y Form Score (0–100) Automatische Bewertung: -5 Punkte pro Fehler -2 Punkte pro Hinweis minimal 0 Punkte zeigt Qualität und Optimierungsbedarf 💡 Universal Engine funktioniert auf allen Webseiten braucht kein Framework robust durch try/catch sicher vor Browser-Restriktionen funktioniert auch in dynamischen Seiten (AJAX / SPA) Fehlerresistent 🎁 Bonus: A11y Structure Scan Zusätzlich erkennt das Tool typische strukturelle Stolpersteine: doppelte IDs fehlende Submit-Elemente fehlende Gruppierungen (fieldset/legend) Buttons ohne sinnvolle Beschriftung autocomplete-Hinweise Perfekt für Entwickler, Agenturen und Qualitätskontrolle. 🧩 Kompatibilität System / CMS Kompatibel HTML / PHP ✔ 100% WordPress ✔ Typo3 ✔ Joomla ✔ Contao ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel / Symfony / Blade ✔ Twig / Smarty Templates ✔ HuMo-Genealogy ✔ (automatisch) Statische Webseiten ✔ 🔧 Technische Angaben CSS: ~4 KB JS: ~16 KB keine Cookies keine externen Fonts DSGVO-konform LocalStorage optional (nur der UI-Status) 📦 Einbau Nur zwei Zeilen vor </body> einfügen: <link rel="stylesheet" href="/a11y-form-checker/form-checker.css"> <script src="/a11y-form-checker/form-checker.js" defer></script> Fertig. Ein „FC“-Button erscheint unten rechts → Klick → Scanner starten. 🔗 Branding (Lizenzpflicht) Der Hinweis: „Powered by TheCodeAtlas – A11y Form Checker“ ist fester Bestandteil der Lizenz/Benutzungsbedingungen. ➡ Das Entfernen, Verstecken oder Manipulieren ist NICHT gestattet. Er muss sichtbar bleiben, unabhängig vom System. 💼 Ideal für Unternehmen Behörden & öffentliche Einrichtungen Entwickler & Agenturen Shops + E-Commerce Blogs private Webseiten Barrierefreiheits-Audits SEO- und Qualitätsprüfungen Formulare mit Kundenkontakt

Der moderne DSGVO-Hinweis für Webseiten ohne Cookies – leicht, elegant & 100% konform. Viele Webseiten setzen keine Tracking-Cookies oder nutzen ausschließlich technisch notwendige Funktionen. Trotzdem verpflichtet die aktuelle Rechtslage dazu, Besucher transparent darüber zu informieren. Normale Cookie-Banner sind dafür überdimensioniert – sie stören, verschlechtern die UX und sind häufig rechtlich falsch. Die Lösung: 💙 TheCodeAtlas Privacy Overlay – Cookie-Free Edition Ein ultraleichtes, dezentes Hinweis-Overlay speziell für Webseiten, Shops oder CMS, die keine Marketing-Technologien verwenden. 💡 Was macht das Privacy Overlay? ✔ zeigt einen eleganten, modernen DSGVO-Hinweis ✔ erklärt, dass keine Tracking-Cookies genutzt werden ✔ blendet sich automatisch beim Scrollen oder Klick aus ✔ erscheint pro Sitzung nur einmal (nicht bei jedem Seitenwechsel) ✔ rein informativ → keine Einwilligung nötig ✔ vollständig cookie-frei ✔ sehr leicht (< 5 KB total) Ideal für Webmaster, die einen dezenten, professionellen Datenschutzhinweis benötigen — ohne Banner-Monster, ohne Consent-Plugins. 🎯 Funktionen im Überblick 🧩 Elegantes DSGVO-Overlay moderner heller/dunkler Stil Text vollständig anpassbar mehrsprachig (DE/EN automatisch) 🧠 Smart Behavior nur 1× pro Besuch schließt bei Scroll (80 px) oder Klick Animationen dezent & sauber 🛡 100% Datenschutzkonform kein Cookie keine externen Dienste nur ein sessionStorage-Flag (juristisch unkritisch) vollständig lokal, keine Datenübertragung ⚙️ Universal-Kompatibilität Läuft stabil mit: ✔ HTML / PHP ✔ WordPress ✔ Joomla ✔ Typo3 ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel / Symfony ✔ HuMo-Genealogy ✔ Pagebuilder (Elementor, WPBakery etc.) Einfach vor </body> einfügen – fertig. 🎁 Bonus (inklusive) Im Paket enthalten sind zusätzlich: Version mit Verzögerung (3 Sekunden) Version mit 24-Stunden-Unterdrückung Damit kannst du dein Overlay perfekt an jede Seite anpassen. 💼 Ideal für Unternehmensseiten Shops ohne Tracking Blogs & Portfolios Vereine Behörden & Gemeinden DSGVO-sensible Projekte Agenturen & Entwickler