Barrierefreiheit im Internet

Fast jeder nutzt täglich das Internet, sei es bei der Arbeit, unterwegs oder in der Freizeit. Dabei stellt sich früher oder später die Frage, wie tun das die geistig und/oder körperlich Beeinträchtigte? Dafür gibt es seit 1999 Richtlinien, die immer wieder erneuert und angepasst werden. Im Juni 2018 wurde die aktuellste Version veröffentlicht. Diese Richtlinien geben vor, wann Barrierefreiheit im Internet gegeben ist.

Barrierefreiheit WCAG 1.0

WCAG (Web Content Accessibility Guidelines) sind in in 1.0 und 2.0 unterteilt, dabei bildet 1.0 die Basis für alle weiteren Richtlinien. In WCAG 1.0 steht, dass eine Website auf allen Endgeräten bedienbar sein soll. Deswegen muss auch bei der Backend-Programmierern darauf geachtet werden, dass die Website auf allen Geräten verfügbar, bedienbar und übersichtlich ist. Ebenfalls steht in diesen Richtlinien, dass HTML und CSS als Standard gelten.

Barrierefreiheit WCAG 2.0

In diesen Richtlinien steht deutlich mehr, da sich diese Richtlinien mit verschiedenen körperlichen und geistigen Beeinträchtigungen auseinandersetzen. Das bedeutet unter anderem, dass Screen Reader verwendet werden und die Website entsprechend darauf angepasst ist. Deshalb muss darauf geachtet werden, dass alle Nicht-Text Elemente eine Text-Alternative hinterlegt haben. Schrift sollte vergrößert und verkleinert werden können. Der Kontrast der Farben sollte standartmäßig schon stark sein, doch für alle Fälle sollte dies auch noch separat einstellbar sein. Diese Einstellungen sind meistens in einer Gruppe aus Buttons vorhanden, jedoch müssen diese selbst eingefügt und nutzbar gemacht werden.

Website mit Barrierefreiheit-Buttons

Was können Sie tun?

Um Barrierefreiheit im Internet zu erreichen müssen sie nicht viel tun. Nicht viel, bedeutet aber nicht, dass es einfach umzusetzen ist. Das Backend von TYPO3 bietet schon viele Möglichkeiten für Text-Alternativen an, doch die Buttons müssen selbst geschrieben und eingefügt werden. Zusätzlich muss dann noch ein Stylesheet angelegt werden, damit diese Buttons auch funktionieren.

Sie wissen nicht, wie sie das umsetzen sollen? All dies können auch unsere TYPO3-Experten für sie übernehmen.

Karte mit rotem Pin-Markierungsziel

Mega-Menü, klassisches Menü, Hamburger-Menü – Was passt am besten?

Webseiten-Menüs gehören zu den Dingen, die man als selbstverständlich ansieht – bis man ein schlechtes Menü navigieren muss. Im Idealfall erhalten Nutzer einen sofortigen Überblick über das Angebot einer Website und erreichen mit wenigen Klicks alle wichtigen Informationen. Im schlimmsten Fall gehen Nutzer verloren und sind frustriert, weil sie nicht das finden können, was sie suchen. Dieser Beitrag führt Sie durch die Grundlagen des Menüdesigns und hilft Ihnen zu verstehen, welche Optionen für Ihre Website am besten geeignet sind.

Was macht ein gutes Webseiten-Menü aus?

Ein gutes Webseiten-Menü sollte Links zu allen wichtigen Bereichen Ihrer Webseite enthalten. Es liegt letztendlich an Ihnen, was Sie darin unterbringen wollen. Aber egal, für welche Inhalte Sie sich entscheiden, es ist absolut wichtig, dass Ihr Menü benutzbar ist.

❌ Zu viele Menüpunkte hinzufügen

Eines der fatalsten Dinge, die Sie tun können, ist, Ihr Menü mit zu vielen Links zu überladen. Dadurch wirkt es unübersichtlich. Zudem müssen sich Nutzer anstrengen, um das zu finden, was sie brauchen. Und je nachdem, wie Sie Ihr Menü gestalten, könnten einige der Links unzugänglich werden, wenn Sie zu viele davon haben. Wenn Sie beispielsweise ein Dropdown-Menü verwenden, könnten Nutzer Schwierigkeiten haben, auf Links zuzugreifen, die nicht auf dem Bildschirm erscheinen.

✅ Selektiv sein oder alternative Navigationsoptionen verwenden

Am besten is es, wenn Sie selektiv vorgehen, was Sie in Ihr Menü aufnehmen; jedoch ist das bei größeren oder komplexeren Webseiten nicht immer möglich. Glücklicherweise gibt es auch andere Lösungen für ein überfülltes Menü.

Eine Lösung besteht darin, Hub-Seiten oder Kategorien zu erstellen und diese stattdessen in das Menü mit aufzunehmen. Dann können Nutzer zu der entsprechenden Kategorie oder dem Hub navigieren und von dort aus den Weg zu spezifischeren Inhalten finden.

Eine zweite Lösung ist das Hinzufügen von Untermenüs. Dies sind zusätzliche Menüoptionen, die nur erscheinen, wenn Nutzer mit dem Mauszeiger über einen bestimmten Menübereich fährt oder darauf klickt. Untermenüs können praktisch sein, aber sie können auch unübersichtlich und schwer zu bedienen werden. Wenn Sie also Untermenüs verwenden, dann am besten in Maßen.

Die dritte Möglichkeit besteht darin, eine Suchleiste in Ihr Navigationsmenü aufzunehmen. Wenn ein Nutzer in Ihrem Menü nicht findet, was er sucht, kann er auf diese Weise auf Ihrer Webseite nach dem gewünschten Inhalt suchen. Eine Suchleiste ist eine großartige Funktion, egal ob Ihr Menü zu unübersichtlich ist oder nicht. Nehmen Sie sich die Zeit, Ihre Suchfunktion gut zu konfigurieren, denn sonst ist sie nicht wirklich hilfreich.

❌ Menü nur für Desktop entwerfen

Es ist leicht, mobile Nutzer zu vergessen, wenn Sie Ihre Webseite auf einem Desktop-Computer erstellen. Aber das sollten Sie auf keinen Fall tun, vor allem wenn es um die Gestaltung Ihres Webseiten-Menüs geht. Ein Menü, das auf dem Desktop gut aussieht und funktioniert, kann auf einem Smartphone oder Tablet völlig unbrauchbar sein. Da immer mehr Menschen mit Smartphones unterwegs sind, ist es sehr wichtig, das Menüdesign sowohl für den Desktop als auch für mobile Geräte zu berücksichtigen.

✅ Menü für die mobile Ansicht optimieren

Es gibt zwei Möglichkeiten, um ein Menü zu erstellen, das sowohl auf dem Desktop als auch auf dem Handy funktioniert. Zum einen können Sie ein responsives Menü mit einem Layout hinzufügen, das sich an die verwendete Bildschirmgröße anpasst. Alternativ dazu können Sie ein spezielles Menü für die mobile Version Ihrer Webseite erstellen. Für welche Lösung Sie sich auch entscheiden, testen Sie das auf einigen verschiedenen Bildschirmgrößen; so stellen Sie sicher, dass das Endergebnis benutzerfreundlich ist.

Gängige Designs für Webseiten-Menüs

Es gibt viele verschiedene Arten von Menüs, aus denen man wählen kann. Hamburger-Menüs, Dropdown-Menüs und Seitenleistenmenüs sind einige bekannte Beispiele. Es gibt auch einige sehr abstrakte und kreative Menüs in freier Wildbahn! Wie auch immer: Die Art und Weise, wie Sie diese Stile implementieren, hat einen großen Einfluss auf den Gesamteindruck und Benutzerfreundlichkeit.

Hier sind einige der Standardoptionen:

Minimalistisches Menü

Wenn Sie eine einfache Webseite und nur wenige Online-Ziele haben, ist es sinnvoll, ein minimalistisches Menüdesign zu wählen. Behance zum Beispiel ist ein “Netzwerk zur Präsentation und Entdeckung kreativer Arbeiten” und braucht daher kein kompliziertes Menü. Es gibt nur 3 Menüoptionen: Entdecken, Livestreams und Aufträge. So können sich Nutzer auf das Suchfeld und die angezeigten kreativen Arbeiten konzentrieren.

Minimalistisches Menü auf behance.net

Einige Webseiten verwenden ein eher minimalistisches Menü für mobile Nutzer. Ein Hamburger-Menü (das so aussieht: ☰) ist eine beliebte minimalistische Wahl für mobile Webseiten, da es nur sehr wenig Platz auf dem Bildschirm einnimmt. Auf der mobilen Version vom ECONSOR TYPO3 gibt es zum Beispiel ein Hamburger-Menü. Wenn Sie auf diese Navigation klicken, wird es erweitert und zeigt die verfügbaren Unterseiten der Webseite an. Lösungen wie diese können auf mobilen Geräten sehr gut funktionieren.

Hamburger-Menü auf typo3werk.com

Klassische Seitenmenüs

Klassische Menüs sind wahrscheinlich am einfachsten zu handhaben. Sie konzentrieren sich auf die Auswahl der Hauptkategorien oder -bereiche der Website und verwenden Schaltflächen mit Textbeschriftungen, um Nutzer an die richtige Stelle zu führen. Eine horizontale Navigationsleiste ist der häufigste Typ eines klassischen Menüs. Manchmal haben solche Menüs auch ein paar Dropdown-Optionen unter den Hauptmenüpunkten. WordPress verwendet auf seiner Desktop-Site ein klassisches Menüdesign. Zwei der Menüpunkte haben eine Dropdown-Schaltfläche, um weitere Optionen anzuzeigen: Support und Mitmachen.

Klassisches Menü auf wordpress.org

Ein weiterer klassischer Menüstil ist die Seitenleiste. Sie können diese Art von Menü in Aktion auf Google Maps sehen. Normalerweise können solche Menüs mit einer Hamburger-Menü-Schaltfläche geöffnet und mit der x-Schaltfläche wieder geschlossen werden. Dies ist eine gute Möglichkeit, Inhalte im Vollbildmodus anzubieten, da die Navigation die meiste Zeit ausgeblendet ist.

Seitenleiste auf maps.google.de

Mega-Menü

Mega-Menüs sind eine Art Dropdown-Navigation, aber statt einer einzigen Spalte mit Links unter jedem Hauptmenüpunkt gibt es Platz für mehrere Spalten. Diese Menüs sind bei größeren und komplexeren Websites beliebt, da sie Platz für viel mehr Links bieten als andere Menüstile. Theoretisch können Sie also weniger wählerisch sein, welche Links Sie aufnehmen.

Dieser vermeintliche Vorteil kann zum Verhängnis von Mega-Menüs werden. Auch wenn alle Links hineinpassen, kann zu viel Inhalt in Ihrer Navigation für Nutzer überwältigend sein. Wenn Sie sich jedoch auf eine moderate Anzahl von Menülinks beschränken, kann ein Mega-Menü eine gute Option für Ihre Website sein.

Mega-Menü von econsor.de

Andere Navigationsoptionen

Sie können viel mit Ihrem Webseiten-Menü machen, aber es ist nicht die einzige Navigationsoption. Viele Webseiten fügen zusätzliche Navigationslinks in der Kopf- oder Fußzeile der Webseite ein. Dort finden Sie oft Optionen zum Einloggen oder zum Ändern der Sprache der Webseite. Wenn Sie sich jedoch für Links in der Fußzeile entscheiden, müssen Sie das unendliche Scrollen deaktivieren, sonst können Ihre Nutzer die Fußzeile nicht erreichen.

Eine andere Möglichkeit besteht darin, eine Sitemap-Seite zu erstellen, auf die die Benutzer zugreifen können. Diese zeigt eine strukturierte Liste aller Seiten Ihrer Webseite an. Diese werden zwar immer seltener verwendet, können aber immer noch ein leistungsfähiges Instrument für die Seitennavigation sein.

Fazit

Generell ist es eine gute Idee, Ihr Menü so einfach wie möglich zu halten. Vor allem für kleinere Webseiten und solche, die gerade erst anfangen, sollte ein klassisches oder minimalistisches Menü gut geeignet sein. Wenn Sie eine riesige Website haben, müssen Sie mehr darüber nachdenken, was Ihre Nutzer sehen wollen und wie Sie diese Inhalte am besten darstellen.

Unsere TYPO3-Experten stehen Ihnen bei Fragen gerne zur Verfügung und beraten Sie ausführlich zu Ihren Anforderungen.

Neuer Frontend-Editor für TYPO3: Bessere Benutzererfahrung für Redakteure

TYPO3 ist für seinen leistungsstarken Backend-Editor und seinen verständlichen Quellcode bekannt geworden. Der neue Frontend-Editor schafft neue Möglichkeiten, Elemente und ihre Inhalte, auf eine Weise zu verwalten. Eine übersichtliche und benutzerfreundliche Oberfläche ermöglicht es, dass Ihre Website immer Up-to-Date sein kann.

Im TYPO3-Backend: Menüpunkt des Frontend-Editors
Im TYPO3-Backend: Menüpunkt des Frontend Editors

Die Vorteile des Frontend-Editors sind überzeugend:

  • leicht zu bedienende Benutzeroberfläche
  • in TYPO3 integrierte Verwaltung Ihrer Inhalte
  • auch für TYPO3-Anfänger zugänglich
  • saubere Trennung von Inhalt und Struktur

Und gerade der letzte Punkt ist im Vergleich zwischen TYPO3 und dem Marktführer WordPress sehr überzeugend: Der TYPO3-Frontend-Editor liefert einfach verständlichen Quellcode, weil er sich an die technischen Standards von TYPO3 hält. Inhalte mit Spaghetti-Code, wie es in WordPress bei der Mehrheit der Editoren leider Standard ist, gehören der Vergangenheit an. Und dadurch auch aufgeblähter Quellcode und lange Ladezeiten.

Was macht den TYPO3-Frontend-Editor aus?

Neben der klaren Trennung von Inhalt und Struktur gibt es weitere Vorteile, auf die wir als TYPO3-Agentur gerne setzen:

  1. Es kann als separates Plugin auf Nutzerebene an- oder ausgeschalten werden.
  2. Der Frontend-Editor kann in alle TYPO3-Templates eingespielt werden.
  3. Alle Plugins und Blöcke, die im Backend zur Verfügung stehen, greifen mit den selben Workflows und Berechtigungen auch im FE-Editor.
  4. Er verfügt über eine einfache und strukturierte Benutzeroberfläche, die ihn zur perfekten Lösung für TYPO3-Anfänger macht. Der Frontend-Editor ermöglicht so auch Editoren, die nur unregelmäßig oder ganz neu TYPO3 nutzen, Inhalte zu verwalten.
  5. Der Frontend-Editor entspricht den technischen Standards von TYPO3, was einfachen Quellcode und optimalen Web-Kernwerten zur Folge hat.

Unsere Empfehlung für TYPO3-Portale und -Internetseiten

Wenn bei Ihrem TYPO3-Projekt mehrere Redakteure arbeiten, die über unterschiedliches TYPO3-Know-how verfügen, ist der neue TYPO3-Frontend-Editor eine ideale Ergänzung für Ihre Installation. Wenn Sie auf der Suche nach einem Editor sind, der fortschrittlich ist und gleichzeitig einfachen Quellcode liefert, dann ist der TYPO3-Frontend-Editor die perfekte Lösung für Sie. 

Fazit zum TYPO3-Frontend-Editor

Der neue Frontend-Editor ist eine großartige Ergänzung des TYPO-Arsenals und wird Ihnen helfen, Ihre Website mit minimalem Aufwand Up-to-Date zu halten. 

Die Entwickler haben zuvor noch keinen Frontend-Editor einprogrammiert gehabt. Die Projektleiter des Frontend-Editors haben selbst an der Fehlerbehebung, der Performance und einer optimierten User Experience gearbeitet und zeigen sich zuversichtlich, lassen allerdings noch Luft nach oben:

Wir haben heute einen produktionsbereiten Frontend Editor, aber wir sind erst am ersten Meilenstein auf einer viel längeren Reise.

TYPO3 Community

Die 3 Hauptziele des TYPO3-Frontend-Editors

Der Frontend-Editor von TYPO3 soll drei Hauptziele unterstützen, die auf Veränderung, Fehlerbehebung und eine Verringerung des Wartungsaufwands abzielen.

Hauptziel 1: Frontend Editing im Backend-Modul

Schon die letzte Version von TYPO3 war reaktionsschnell und das Backend hat es ermöglicht, fast die gesamte Benutzeroberfläche auszublenden. Und um die gesamte Frontend-Seite anzuzeigen, können Sie die Modulliste einfach minimieren und den Seitenbaum ausblenden. Das hat die Vorteile, dass Sie keine separate Seitenbaumimplementierung verwalten müssen und vorhandene Benutzeroberflächendesigns und Konventionen verwenden können. Auch lädt Ihre Webseite schneller und hat weniger benutzerdefinierte Ressourcen. Darüber hinaus denkt TYPO3 auch an seine Entwickler und möchte diesen auch ein bestmögliches Bearbeitungserlebnis verschaffen.

Hauptziel 2: Einfacher Code

Ein schlanker Code ist schneller und einfacher in der Wartung. Die Bereinigung geht weiter dahin, dass Debuggen durch die Aufteilung von Klassenmethoden erleichtert wird.

Hauptziel 3: Verbesserte Testabdeckung und CI-Workflow

Der Frontend Editor wird in die TYPO3-API eingebunden. Momentan ist das Hinzufügen des Frontend Editors noch mit einigem Aufwand verbunden, führt leicht zu Fehlern und kann somit seine angestrebte Magie noch nicht voll entfalten. Hier kommt auch wieder der Cleaner-Code ins Spiel und erleichtert Unit- und Funktionstests. Mit einem neuen und umfassenden Testverfahren können Sie zukünftig Probleme im CI-Workflow viel leichter erkennen und auch beheben. Die Resultate liegen bei einer besseren Stabilität und in einem geringeren Zeitaufwand bei der Behebung von Fehlern.

Unsere TYPO3-Experten stehen Ihnen bei Fragen gerne zur Verfügung und beraten Sie ausführlich zu Ihren Anforderungen.