zum Inhalt
 

Das LILAC-media Barrierefrei-Bedien-Panel

Eine barrierefreie Homepage zu gestalten bedeutet, die Website so zu konzipieren, dass sie für alle Menschen – auch jene mit Einschränkungen – uneingeschränkt nutzbar ist.

Bei allen Seiten, die wir mit dem LILAC-CMS erstellen, legen wir großen Wert auf die vier zentralen Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
Darüberhinaus haben wir das Barrierefrei-Bedien-Panel geschaffen, in dem wir verschiedene Funktionen bündeln, die die Bedienung einer Homepage noch weiter erleichtern.

Merkmale einer barrierefreien Homepage

Wahrnehmbarkeit  

Unsere Designs bieten durchgehend gute Farbkontraste, sodass Inhalte klar und deutlich auf jedem Bildschirm dargestellt werden. Darüber hinaus versehen wir alle bildbasierten und rein visuellen Elemente mit aussagekräftigen Alternativtexten, um diese über unterstützende Technologien wie Screenreader oder Braillezeilen zugänglich zu machen.

Bedienbarkeit

Alle unsere Seiten lassen sich vollständig über die Tastatur bedienen – eine Maus ist nicht erforderlich. Interaktive Elemente sind klar beschriftet und erhalten einen deutlich sichtbaren Fokus, sobald sie ausgewählt werden. Zudem verzichten wir bewusst auf flackernde Inhalte und unnötige Animationen, die potenziell epileptische Anfälle auslösen könnten. Sollte der Einsatz von Animationen dennoch erforderlich sein, stellen wir sicher, dass alle damit verbundenen Informationen auch auf alternative Weise zugänglich sind.

Verständlichkeit

Wir strukturieren unsere Inhalte klar und nachvollziehbar, indem wir sie sinnvoll in Überschriften und Absätze gliedern. Die Texte entwickeln wir in enger Zusammenarbeit mit unseren Kunden, um eine optimale Verständlichkeit zu gewährleisten. Auf Wunsch erstellen wir zudem Versionen in Leichter Sprache.

Robustheit

Für uns ist es selbstverständlich, sauberen HTML-Code zu erzeugen, der von sämtlichen Browsern und unterstützenden Technologien problemlos verarbeitet wird. Mit gezielt eingesetzten ARIA-Attributen verbessern wir die Zugänglichkeit einzelner Elemente, und durch den Einsatz von Responsive Design gewährleisten wir, dass unsere Seiten auf allen Endgeräten optimal dargestellt werden.

Das Lilac-Barrierefrei-Panel

Bedienung

Das Barrierefrei-Bedien-Panel ist sowohl über die Tastatur als auch mithilfe der Maus zugänglich. Um das Panel zu öffnen, drückt man die TAB-Taste. Ein einfacher Klick auf das Symbol   in der linken unteren Ecke genügt, um es mit der Maus zu aktivieren. Das Panel bietet einerseits eine Auswahl an Einträgen, die den schnellen Zugriff auf verschiedene Bereiche der Seite ermöglichen. Andererseits können unterschiedliche Hilfsfunktionen aktiviert werden.

Tastaturnaviagtion

Das Barrierefrei Einstell Panel lässt sich durch das Drücken der TAB-Taste aktivieren. In diesem Panel finden Sie Funktionen, die es Ihnen ermöglichen, zu unterschiedlichen Bereichen der aktuellen Seite zu navigieren und zu anderen Seiten der Website zu gelangen.

  Barrierefreies Menü: Hier wird das Menü der kompletten Website gezeigt, durch das Sie mit der TAB-Taste navigieren können.

  Zum Seiteninhalt springen: Damit gelangen Sie direkt zum Beginn des Inhaltsbereiches und überspringen damit den Kopfbereich, in dem häufig allgemeine Infos zu finden sind.

  Inhaltselemente anzeigen: Dieser Punkt wird angezeigt, wenn der Seiteninhalt durch Überschriften in mehrere Blöcke unterteilt wird. Damit gelangen Sie auf langen Seiten direkt zum gewünschten Bereich.

  Zur Fußzeile springen: Damit gelangen Sie ganz ans Ende der Seite. dort befinden sich häufig die Adresse und wichtige Informationen sowie Links zu anderen wichtigen Bereichen der Homepage

  Suche: Geben Sie hier einen Suchbegriff ein und durchsuchen Sie die Site.

Hilfsfunktionen

Unsere Homepages bieten die Möglichkeit, verschiedene Funktionen, die für Sehbehinderte interessant sein können, zu aktivieren:

  Modus für Sehbhinderte: Der Kontrast zwischen Schrift und Hintergrund wird vergrößert. Die Schrift wird in gelb auf schwarzem Hintergrund gezeigt

  Nachtmodus: Hintergrungfarbe wird auf schwarz gestellt und etwaige Hintergrundbilder verschwinden. Die Schrift wird auf weiß gesetzt

 Bilder ausblenden: blendet alle Bilder aus, um Ablenkungen zu vermindern

  Mauszeiger vergrößern: Der Mauszeiger wird in doppelter Größe dargestellt

  Lesbare Schrift aktivieren: Schmuckschriften werden entfernt und stattdessen eine einfache serifenlose Schrift ersetzt

  Überschriften hervorheben: Überschriften erster und zweiter Stufe (H1- und H2) werden in schwarz vor gelbem Hintergrund dargestellt

  Hyperlinks hervorheben: Alle Verweise (Links und andere klickbare Elemente) werden in schwarzer Schrift vor gelbem Hintergrund angezeigt

Weitere Informationen zum Thema Barrierefreiheit auf Websites haben wir in diesem Blogbeitrag zusammengestellt.

  
  
Barrierefreiheit Optionen ( erneutes Öffnen über die Tasten: Shift + b ) Barrierefreies Menü öffnen Zum Seiteninhalt springen Inhaltselemente anzeigen Zur Fußzeile springen
Modus für Sehbehinderte aktivieren Nachtmodus aktivieren Alle Bilder ausblenden Mauszeiger vergrößern Lesbare Schrift aktivieren Überschriften hervorheben Hyperlinks hervorheben
Barrierefreies Menü ( erneutes Öffnen über die Tasten: Shift + m ) Homepage 1 Webagentur 1.1 Über uns 1.2 Das lilac-media-Team 1.3 Mehr als 20 Jahre - Firmenchronik 1.4 Nachhaltigkeit und Engagement 1.5 Unser Blick auf's Ganze 1.6 Wir möchten Sie kennenlernen 1.7 Kontakt 1.8 Anfahrt 2 Website-Erstellung 2.1 Homepageerstellung vom Profi 2.2 Konzeption 2.3 Webdesign – wir gestalten Ihre Homepage 2.4 Responsive Webdesign 2.5 Redesign und Relaunch 2.6 Texte für Ihre Homepage 2.7 Rechtliches und DSGVO 2.8 Was kostet eine Website? 2.9 Website-Erstellungspreis Kalkulator 2.10 Website-Pflege 2.11 Das Lilac-cms 2.12 Jobs-Modul 2.13 Barrierefrei Bedien-Panel 3 Programmierung 3.1 Websoftware programmieren lassen 3.2 Wann lohnt sich das? 3.3 Agile Arbeitsweise 3.4 Eigene Software-Entwicklungen 3.5 Digitalisierung und digitale Kommunikation 3.6 Keine Angst vor Komplexität 4 Referenzen 4.1 Neue Websites von lilac-media 4.2 Referenzen nach Branchen 4.3 Kundenstimmen 5 Blog 6 FAQ 6.1 FAQ Grundlegendes 6.2 FAQ E-Mail 6.3 FAQ Projektablauf 6.4 FAQ CMS-Bedienung 6.5 FAQ Bilder und Dokumente 6.6 FAQ News-Modul 6.7 FAQ Referenzen-Modul 6.8 FAQ Gimp Impressum Datenschutz
Inhaltselemente dieser Seite ( erneutes Öffnen über die Tasten: Shift + i ) Merkmale einer barrierefreien Homepage Das Lilac-Barrierefrei-Panel