--- title: "kojo: Ein Website-Theme für mehr Barrierefreiheit & Performance" url: "https://www.toujou.de/blog/kojo-das-neue-toujou-theme/" description: "Barrierefrei, performant & mehr redaktioneller Flexibilität: Das ist kojo! Das 5. toujou-Theme auf TYPO3-Basis nach toujou, hissu, tabi und medatsu. Jetzt informieren!" image: "https://www.toujou.de/_assets/processed/rSGoi5y0JsUwH50m08l75DihWGw0MemiaHNR-qOz2UI/q:85/w:1366/h:768/fn:Y3NtX3Jlc3NvdXJjZXMtbWVldC1rb2pvXzlhYjBjMWRkMDk:t/cb:4fc1e0495d5eda9aa014003f7fec4175f3056706/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9yZXNzb3VyY2VzLW1lZXQta29qby5wbmc" date: 2024-12-18 modified: 2025-03-18 categories: - Website Qualität - Unternehmen --- # kojo: Ein Website-Theme für mehr Barrierefreiheit & Performance 1. [Home](https://www.toujou.de/) 2. [Blog](https://www.toujou.de/blog/) 3. [kojo: Das neue toujou-Theme](https://www.toujou.de/blog/kojo-das-neue-toujou-theme/) Jérôme Grad 17.03.2025- Unternehmen - Website Qualität Lesezeit: **向上 –** kojo ============= Ein Website-Theme für Performance, Barrierefreiheit & Flexibilität ---------------------------------------------------------------------- **Modern, aufgeräumt und technisch optimiert – goutiert mit allen Annehmlichkeiten einer CMS-Website auf TYPO3-Basis. Dafür steht** ***kojo*****. So rückt dieses Website-Theme die Themen Barrierefreiheit, Performance und redaktionelle Flexibilität in den Vordergrund und bietet Agenturen für Ihre Kunden-Projekte und Unternehmen für ihre Corporate Website eine professionelle Basis für einen individuell-gelungenen Web-Auftritt.** [Auf einer *kojo*-Seite umschauen](https://meet-kojo.toujou.net/) [*kojo* kostenlos testen](https://www.toujou.de/typo3-demo/#c1006221) Auf dieser Seite [kojo testen](https://www.toujou.de/typo3-demo/#c1006221) kojo: Verbesserung für alle --------------------------- Die Welt steht bekanntermaßen nicht still. Und die Welt des Internets erst recht nicht. Die Anforderungen an Websites entwickeln sich ständig weiter – und so auch die Anforderungen an Themes. Logisch also, dass auch die [Websites-Themes](https://www.toujou.de/features/toujou-themes/) von toujou mit den neuesten Entwicklungen Schritt halten. Herausgekommen ist ein neues Theme: *kojo*. Der Name ist in der toujou-Tradition dem Japanischen entlehnt und lässt sich am besten mit Verbesserung / Verfeinerung übersetzen. Eine Weiterentwicklung sozusagen für **redaktionelle Anwendungen** als auch für **technische Grundlagen** einer Website, in die die Erfahrungen der vergangenen Themes gepaart mit der Expertise aus über 20 Jahren Webentwicklung eingeflossen sind. Alle User erreichen mit barrierefreier Website ---------------------------------------------- Eine barrierefreie – oder zumindest barrierearme – Website wird in Deutschland nicht nur durch das Barrierefreiheitsstärkungsgesetz, das Mitte 2025 in Kraft tritt, relevant. Es lassen sich auch mehr Menschen erreichen und so die Zielgruppe vergrößern und die Userzahl erhöhen. Mit *kojo* nutzen Sie ein Theme, das Basis und Tools für barrierearme Websites nach WCAG-Kriterien bietet. ### Technische Grundlagen Zur [technischen Basis](https://meet-kojo.toujou.net/barrierefreiheit/#technische-grundlagen) von *kojo* gehören eine Reihe von Punkten, die Ihnen toujou bereitgestellt: - **Trennung von HTML und CSS:** Für weniger Barrieren und eine klare Struktur. - **Tastatur-Navigation:** Bedienung der Topbar, Navigationsreiter, Links, Schaltflächen und Formulare auch via Tastatur möglich. - **Skalierbare Schriftgrößen:** Texte passen sich an das jeweilige Endgerät an und bleiben lesbar. - **Browser-Kompatibilität:** Ihre Website funktioniert in aktuellen Versionen der gängigen Browser. Zudem werden User Preferences, z.B. reduced motion, berücksichtigt. - **Freifläche**: Ausreichend Freifläche und Abstand zwischen den Zeilen und Texten. Für eine bessere Lesbarkeit. ### Redaktionelle Hilfsmittel Zudem stehen Ihnen in *kojo* – und allen anderen toujou-[Themes](https://www.toujou.de/features/toujou-themes/) – mehrere Hilfsmittel beim redaktionellen Bearbeiten für eine barrierearme Website zur Verfügung. Neben der **Lesbarkeitsanalyse** via [Yoast SEO](https://www.toujou.de/tutorials/yoast-seo/#c1002424), die Verbesserungsvorschläge für leicht verständliche Sprache bereithält, sind das vor allem die **Farbkontraste** und **Alt-Tags**: ![](https://www.toujou.de/fileadmin/Images/Themes/color-contrast-2.svg) #### Sorgen Sie für Farbkontraste - Definieren Sie der Website zugrundeliegende Farben für Hintergrund, Schrift sowie eine Primär- und Sekundärfarbe im [Setup](https://www.toujou.de/service/toujou-setup/) – samt jeweils hellen und dunklen Abstufungsvarianten. - Testen Sie via [Farbkontrast-Checker](https://www.toujou.de/service/toujou-setup/farben-festlegen/) alle gewählten Farben und passen Sie den Kontrast bei Bedarf an. ![Grafik zu Barrierefreiheit bei Videos mit Titel, Untertitel, Alt-Tags und Beschreibung](https://www.toujou.de/fileadmin/Images/Themes/accessibility-image-video-3.svg) #### Gestalten Sie Medien barrierefrei - Hinterlegen Sie einmalig Alt-Tags und Video-Untertitel über die jeweilige Datei im [Fileadmin](https://www.toujou.de/tutorials/dateiliste/). - Profitieren Sie von den hinterlegten Einstellungen bei jeder Nutzung des Mediums auf der gesamten Website. Diese globalen Einstellungen lassen sich jederzeit für ein bestimmtes Element editieren. Parallax-Effekte Für optische Abwechslung auf der Website sorgen mittels eines Parallax-Effekts. Einfach entsprechendes Bild im Backend hochladen, gewünschte Einstellungen treffen und ganz ohne Programmierkenntnisse diesen imposanten Effekt nutzen. Mehr redaktionelle Flexibilität beim Website-Gestalten ------------------------------------------------------ Für mehr redaktionelle Freiheit bei der Gestaltung einer CMS-Website erhalten Redakteurinnen und Anwender neben dem [Parallax-Effekt](#c1018067) die Möglichkeit, [**Hintergrundfarben**](#c1018071) samt **Schriftfarbe** sowie Abstände **für einzelne Seitenabschnitte** zu definieren. Möglich im [Chapter-Element](https://www.toujou.de/service/elementbibliothek/widgets/chapter/#c1017927) und ganz ohne Programmierkenntnisse. Weitere Individualisierungen via CSS bleiben jederzeit in gewohnter Manier möglich. Dazu stehen natürlich auch die bisherigen **redaktionellen Mittel** für die **individuelle Website** zur Verfügung. Als da wären: - 150+ [Elemente](https://www.toujou.de/service/elementbibliothek/), mit u.a. Teaser, Medien, Slider, Texte, Schaltflächen und zahlreichen Widgets - [toujou-Setup](https://www.toujou.de/service/toujou-setup/) mit Auswahlmöglichkeit von Theme, Schrift und Farben - Zahlreiche [Features](https://www.toujou.de/features/) wie Multisite, Mehrsprachigkeit, Formulare, Blog, Events und Consent-Management - Element Design, das eine optische Anpassung eines Elements mit einem Klick in primary, secondary oder inverted design erlaubt. **Hintergrund in dunkler Primärfarbe mit Schriftfarbe in Hintergrundfarbe** **Hintergrund in heller Sekundärfarbe mit Schriftfarbe in Schriftfarbe** **Hintergrund in heller Schriftfarbe mit Schriftfarbe in Primärfarbe** ![Icon einer blauen Rakete](https://www.toujou.de/fileadmin/Images/Themes/icon-performance.svg) Boost your website (performance) --------------------------------- Page Speed, sauber gehaltener und aktueller Code sowie Extensions-Expertise für schnelle Ladezeiten. Allesamt essenziell für den Erfolg Ihrer Website. Denken Sie zum Beispiel an User Experience und SEO. Das Website-Theme *kojo* stellt Ihnen die Basis, damit Sie durchstarten können. Sie profitieren dabei von allen CMS-Vorteilen mit TYPO3, kombiniert mit den toujou-Annehmlichkeiten. ### Page Speed toujou-Websites profitieren vom umfangreichen **Caching**, dass das erneute Laden von Ressourcen verringert. Der **imgproxy** wandelt im Backend hochgeladene Bilder im Frontend in eine effizientes Format um. Qualität, Effizienz und Funktionalität der Dateien werden so verbessert. Ebenfalls ein Vergnügen: **lazy loading**, das die Ladezeit einer Webseite im Sinne der Website-Performance verringert. ### Upgrades, HTML, CSS & Javascript Die im toujou-Tarif inkludierten **TYPO3-Upgrades** sorgen für eine stets unterstützte und damit aktuelle TYPO3-Version, aktuelle php-Version und Server-Unterstützung für HTTP/2 inklusive. Die **Trennung** von **HTML und CSS** sowie **minimale Javascript-Verwendung** verringert ebenfalls die Ladezeit. ### CDN, Extensions & Expertise Die Ladezeiten für User auf der ganzen Welt werden mittels **Content Delivery Network** (CDN) optimiert. TYPO3-Konfigurationen werden erst nach Prüfung ins System übernommen, sodass **keine unnötigen Extensions** und kein unnötiger Code bestehen. Integrierte Extensions werden zugleich gewartet. Dritt-Extensions und [**Systemintegrationen**](https://www.toujou.de/features/extensions/systemintegrationen/) bleiben gleichzeitig möglich. ![Ansicht verschiedener Endgeraete für das Website-Theme kojo](https://www.toujou.de/_assets/processed/Rwv0RAwrxha3gLd2Xmd44KFNfuHI5UJZrHlwvXs5gTY/q:85/w:433/h:145/fn:Y3NtXzIzMTB4Nzc0X2tvam8tc2NyZWVuZGVzaWduX2M3NWJjNjZjYzE:t/cb:99ea76e1b03937628547c9ca8e75e266b9731d18/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzIzMTB4Nzc0X2tvam8tc2NyZWVuZGVzaWduLnBuZw) [Auf einer *kojo*-Seite inspirieren lassen](https://meet-kojo.toujou.net/) [Kostenlos *kojo* testen](https://www.toujou.de/typo3-demo/#c1006221) Funktionen für alle Themes verfügbar ------------------------------------ In der Tradition von toujou stehen die aufgeführten Elemente und Features wie Parallax und Hintergrundfarben in den anderen Website-Themes ebenfalls zur Verfügung. Sie müssen also keinesfalls auf diese Möglichkeiten verzichten, wenn *tabi*, *hissu* oder *medatsu* besser zu Ihren Vorstellungen und Inhalten passt. Natürlich können Sie in *kojo* alle [**individuellen Einstellungen**](https://www.toujou.de/service/toujou-setup/) wie die Schriftart und die CI-Farben jederzeit selbst **editieren**. Auch der Theme-Switch ist jederzeit möglich. Unter Umständen kann es allerdings zur optischen Notwendigkeit von Nachbesserungen bei einzelnen Elementen kommen. [ ![Screenshot zur Theme-Auswahl im toujou-Backend](https://www.toujou.de/_assets/processed/1t7HRa4SkUHCWMYn0WgLskZCCbKwuIKJgLSlBq0SCfM/q:85/w:433/h:217/fn:Y3NtX3RvdWpvdS10aGVtZS1rb2pvLWF1c3dhaGxfYjM1ZmFkOTAzYQ:t/cb:5d110bb9f85e9f3bb079f18543395a54c6c45c2a/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC90b3Vqb3UtdGhlbWUta29qby1hdXN3YWhsLnBuZw) ](https://www.toujou.de/fileadmin/user_upload/toujou-theme-kojo-auswahl.png) Hinweis für toujou-Kunden, die mit Ihrer Website bereits online sind: Von einer Live-Umstellung auf *kojo* raten wir dringend ab. Bitte kontaktieren Sie uns bei Interesse, bevor Sie das Theme umstellen. Unsere neuesten Blogbeiträge ---------------------------- Lesen Sie mehr zu toujou und TYPO3, warum SEO gar nicht so schwer ist, goldene Regeln für die Kommunikation und immer wieder Tipps & Tricks für Ihre Website. [alle Artikel](https://www.toujou.de/blog/) - ![KI-generiertes Bild, das einen Schreibtisch, Stuhl und Laptop zeigt, auf dem Icons zum Thema Website in KI-Zeiten zu sehen sind, im Hintergrund steht ein buntes Bücherregal und ist ein Fenster mit Bäumen zu sehen](https://www.toujou.de/_assets/processed/xtJtyrsvQwAt-hbzUwMBzprckGTm8DeNO6IIy-wTCP0/q:85/w:2671/h:1536/fn:Y3NtX0RyZWktRGluZ2UtZnVlci1XZWJzaXRlcy1pbi1LSS1aZWl0ZW5fOWJlMDE0M2Y5ZQ:t/cb:361f01a06ddc62ad372fe47cbabb7dd9213d32d2/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjYvRHJlaS1EaW5nZS1mdWVyLVdlYnNpdGVzLWluLUtJLVplaXRlbi5wbmc) Website Qualität Yoast SEO ### 3 wesentliche Dinge für Websites in Zeiten von KI 11.05.2026 Was Websites in Zeiten von weniger Klicks weiter ausmacht. [ Weiterlesen ](https://www.toujou.de/blog/3-wesentliche-dinge-fuer-websites-in-zeiten-von-ki/) - ![](https://www.toujou.de/_assets/processed/QvU-UJAzNrIgLz7ZNWpkh5dPiW1fF96msXEUD2GBaBQ/q:85/c:1418.8116173728:798.08153477218:fp:0.5085:0.49880095923261/rt:force/w:1419/h:798/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV9lOGY4MjRmMmU5:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n) Tutorials Website Qualität ### Neue Element-Anordnung 09.02.2026 Neue Gruppen, umgezogene Elemente in andere Gruppen und eine verbesserte Element-Vorschau. Die Neuerungen im toujou-Backend. [ Weiterlesen ](https://www.toujou.de/blog/neue-element-anordnung/)