Barrierearmut

neues Angebot

bar­ri­e­re­ar­me Web­sites

Alle Infos hier

Barrierefreiheit

Umsetzung

Barrierearmes Webdesign

Tipps von Konstanze Gerhard (gerhard.media) und Anne Husemöller, Projektleitung „Inklusive LSBTIQ* Infrastruktur“ (rut-berlin.de), Stand September 2020

Dies sind ein paar Tipps, Webseiten barriereärmer zu gestalten:

  • Ãœbersichtlichkeit: Ein übersichtlicher Seitenaufbau strukturiert die Seite schon auf den ersten Blick.
  • Kontraste: Ein kontrastreiches Design (dunkel auf hell) hilft beim Erkennen von Schrift und Inhalt.
  • Standardtext: Fett- und Kursiv-Formatierung wird vom Screenreader oft nicht erkannt.
  • Wörter ausschreiben: Der Screenreader liest „z.B.“ wie „Zett Punkt Bee Punkt“. Schreiben Sie stattdessen „beispielsweise“.
  • Fotos und Grafiken im „Alt“-Text beschreiben: „Auf diesem Foto sehen Sie ein Portrait der Mitarbeiterin XY“. Bei Deko-Grafiken bleibt der „Alt“-Text leer.
  • Selbsterklärende Links und Buttons: Statt „Hier downloaden“ besser „Die Broschüre zum Thema XY können Sie hier als PDF herunterladen“ schreiben.
  • Responsives Design verwenden: Die Website wird auf allen Endgeräten (Smartphone, Tablet, Laptop, Desktop) sowohl im Hoch- als auch im Querformat korrekt dargestellt.

Bitte sprechen Sie mich einfach an!

Barriere­armut, Barriere­freiheit, barriere­freies Webdesign – was ist das eigentlich?

Über Barrierefreiheit zu sprechen, ist eine große Sache. Ich bevorzuge den Begriff Barrierearmut. Eigentlich sollte es selbstverständlich sein, dass alle Angebote im Internet barrierearm sind. Denn jeder Mensch sollte jederzeit die Möglichkeit haben, an allem teilzuhaben. So der Anspruch. Ich versuche, so viel wie möglich davon umzusetzen.

Umsetzung

Barrierearmes webdesign

Tipps von Konstanze Gerhard (gerhard.media) und Anne Husemöller, Projektleitung „Inklusive LSBTIQ* Infrastruktur“ (rut-berlin.de), Stand September 2020

Dies sind ein paar Tipps, Webseiten barriereärmer zu gestalten: 

  • Ãœbersichtlichkeit: Ein übersichtlicher Seitenaufbau strukturiert die Seite schon auf den ersten Blick.
  • Kontraste: Ein kontrastreiches Design (dunkel auf hell) hilft beim Erkennen von Schrift und Inhalt.
  • Standardtext: Fett- und Kursiv-Formatierung wird vom Screenreader oft nicht erkannt.
  • Wörter ausschreiben: Der Screenreader liest „z.B.“ wie „Zett Punkt Bee Punkt“. Schreiben Sie stattdessen „beispielsweise“.
  • Fotos und Grafiken im „Alt“-Text beschreiben: „Auf diesem Foto sehen Sie ein Portrait der Mitarbeiterin XY“. Bei Deko-Grafiken bleibt der „Alt“-Text leer.
  • Selbsterklärende Links und Buttons: Statt „Hier downloaden“ besser „Die Broschüre zum Thema XY können Sie hier als PDF herunterladen“ schreiben.
  • Responsives Design verwenden: Die Website wird auf allen Endgeräten (Smartphone, Tablet, Laptop, Desktop) sowohl im Hoch- als auch im Querformat korrekt dargestellt.

Bitte sprechen Sie mich einfach an!

Aktuelle Beispiele für barriere­armes Webdesign aus meiner Arbeit:

Screenshot der Website von Petra Bernhardt aus Frankfurt. Die Seite hat ein auffälliges Design mit schwarzen und orangefarbenen Elementen. Oben befindet sich eine orangefarbene Leiste mit den Kontaktdaten, einschließlich Telefonnummer und E-Mail-Adresse. Die Navigationsleiste enthält Links zu den Seiten Start, Über mich, Themen, Aktuelles, Qualifikation, Aufträge und Kontakt. Der Hauptbereich zeigt den Namen "Petra Bernhardt" in großen, weißen Buchstaben auf schwarzem Hintergrund. Darunter stehen die Begriffe "Beratung | Fortbildung | Moderation | Projektbegleitung | Seminare" und der Standort "Frankfurt". Unter einer Trennlinie befindet sich der Text "Pädagogische Beratung und Fachberatung für Kitas, Krippen und Krabbelstuben". Rechts im Hauptbereich ist ein Porträt von Petra Bernhardt zu sehen, das sie lächelnd in einem orangefarbenen Oberteil zeigt. Unter dem Porträt befindet sich ein Button mit der Aufschrift "Qualifikation".
Screenshot der Website der i-PÄD Kompetenzstelle für intersektionale Pädagogik. Die Seite hat ein schlichtes Design mit grünen Akzenten. Oben befindet sich eine grüne Leiste mit den Kontaktdaten, einschließlich Telefonnummer und E-Mail-Adresse. Das Logo der i-PÄD Kompetenzstelle ist links oben zu sehen. Die Navigationsleiste enthält Links zu den Seiten Start, Aktuell, Unser Angebot, Downloads, Kinderbücher, Presse & Medien und Glossar. Auf der linken Seite sind Symbole für soziale Medien (Facebook, Instagram) vertikal angeordnet. Der Hauptbereich zeigt das Logo der i-PÄD Kompetenzstelle und den Begrüßungstext "Willkommen i-PÄD Kompetenzstelle intersektionale Pädagogik". Darunter steht eine Beschreibung des Projekts, das seit August 2011 existiert und die Anerkennung der Komplexität von Identitäten in der Pädagogik fördern soll. Es geht um die Identitäten von Kindern und Jugendlichen sowie um die Identitäten der Lehrer_innen, Erzieher_innen und aller anderen Menschen, die mit Kindern und Jugendlichen zusammenarbeiten. Ein grüner Button mit der Aufschrift "Aktuell" befindet sich unter dem Text. Rechts am Bildschirmrand ist ein Symbol für Barrierefreiheit sichtbar.
Screenshot der Website der Medienscouts Schleswig-Holstein (SH). Die Seite hat ein modernes Design mit einer weißen Hintergrundfarbe und blauen sowie orangefarbenen Akzenten. Oben befindet sich eine Navigationsleiste mit Links zu den Seiten Start, Was sind Medienscouts?, Medienscouts in SH und Ausbildung in SH. Im Hauptbereich steht in großen, blauen Buchstaben der Titel "MEDIENSOUTS SH". Links davon sind zwei abgerundete Bildausschnitte: einer zeigt eine Hand, die ein Notizbuch hält, und der andere zeigt eine Hand, die ein Tablet bedient. Über den Bildausschnitten befindet sich ein kleiner orangefarbener Kreis und darunter ein kleiner grauer Kreis mit einem Punktemuster. Unter dem Titel befindet sich ein kurzer Beschreibungstext: "medienscouts-sh.de — eine Plattform der Aktion Kinder- und Jugendschutz (AKJS) e.V. und der Initiative MEDIENSCOUT-NETZWERK SH".
Screenshot der Website "Young & Queer" Berlin. Die Seite hat ein ansprechendes Design mit einem lachsfarbenen Hintergrund und dunkelblauen Akzenten. Oben befindet sich eine Leiste mit den Kontaktdaten, einschließlich Telefonnummer und E-Mail-Adresse, sowie Symbolen für soziale Medien (Facebook und Instagram). Die Navigationsleiste enthält Links zu den Seiten Start, Programm, Über uns, Beratung, Queere Orte und Kontakt. Der Hauptbereich zeigt den Titel "Young & Queer Gruppe" in großen, weißen Buchstaben. Darunter befindet sich ein Button mit der Aufschrift "Programm". Links unten ist eine Illustration von sechs jungen, diversen Personen zu sehen, die sich umarmen und lachen. Rechts im Hauptbereich befindet sich ein dunkelblaues Feld mit einem Zitat: "Hier kann ich Leute kennen lernen, denen es ähnlich geht." Darunter steht: "Gruppe für junge queere Menschen zwischen 16 und 27 Jahren der Lesbenberatung Berlin EINMAL PRO WOCHE." Am rechten Bildschirmrand ist ein Symbol für Barrierefreiheit sichtbar.

Sprechen wir über Ihren Bedarf 

Schreiben Sie mir oder rufen Sie mich an: 0431 719 49 338.

3 + 14 =

*Pflichtfeld und Hinweis zum Datenschutz:
Ich benötige Ihre Daten wie Ihren Namen und Ihre E-Mail-Adresse, um Sie korrekt ansprechen und Kontakt zu Ihnen aufnehmen zu können. Ihre Daten werden zum Zwecke der Verarbeitung gespeichert und verarbeitet. Selbstverständlich werden diese vertraulich behandelt und nicht an Dritte weitergeben.
Sie erklären sich damit einverstanden, dass ich die Angaben zur Kontaktaufnahme verwenden darf. Sie finden weitere Informationen in der Datenschutzerklärung.

Consent Management Platform von Real Cookie Banner
Zur Sitemap im Footer-Widget springen