Barrierefreie Website für Handicap International

Handicap International unterstützt Menschen mit Behinderung weltweit mit unterschiedlichen Projekten. Für die beiden Projekte „Crossroads | Flucht. Migration. Behinderung.“ und „Phase 2 – Leave no one behind!“ sollte es nun eigene Webseiten geben. Dort werden die Projekte detailliert vorgestellt, um die jeweils eigene Zielgruppe direkt anzusprechen. Und das alles selbstredend: barrierefrei. Die Webseite findet sich unter www.hi-deutschland-projekte.de.

ZIELFORMULIERUNG:

Barrierefrei + schnell die richtigen Informationen finden + im Corporate Design von Handicap International bleiben.

Designentwicklung

Da das Projekt im Corona-Sommer 2020 begonnen hat, sind alle Meetings und Workshops mit dem Handicap International Team online verlaufen – so sind Sitemap und Wireframes entstanden. Bei der Struktur der Seite wurde genau auf die Zielgruppe geachtet: Wie finden alle Personen genau das was sie suchen? Am besten möglichst schnell und ohne viele Umwege.

Im Wireframe-Prozess haben dann die Kund*innen auch schon Inhalte selbst in den fertigen Klickdummy eingepflegt. Dabei haben wir auch schon erste Weichen für die Barrierefreiheit gestellt.

Im Screendesign haben wir uns an das bestehende Corporate Design von Handicap International gehalten: Wir haben aus den CI-Farben jeweils ein Farbsystem pro Projekt ausgewählt, mit primären, sekundären und tertiären Farben. Bei diesen Kombinationen wurde natürlich auch schon auf den Kontrast geachtet, welcher natürlich für barrierefreies Gestalten wichtig ist.

Das ganze wurde dann in einem modulartigen Kastensystem aufgebaut – so bleiben die Elemente flexibel anwendbar und passen in den weiteren Außenauftritt der Marke.

»Danke für die tolle Umsetzung und die exzellente Kommunikation – wir freuen uns über das wunderbare Ergebnis und auf die nächsten Projekte mit Euch.«

Dr. Susanne Schwalgin | Handicap International e.V. Projektleiterin Flucht und Behinderung

Portraitfoto Susanne Schwalgin

© Catharina Tews

Barrierefreiheit

Handicap-international-Webdesign-barrierefrei-FORMLOS-Berlin-Icons

Um Webseiten barrierefrei – oder eigentlich korrekter: barrierearm – zu programmieren, müssen einige Dinge beachtet werden müssen: Auf eine korrekt angewendete Überschriften-Hierarchie muss sehr viel Augenmerk gelegt werden – ganz unabhängig davon wie groß oder auffällig die Schrift selbst ist. Denn: wenn die Seite von jemanden genutzt wird, der einen Screenreader verwendet um sich die Webseite vorlesen zu lassen, muss diese in der richtigen, logischen Reihenfolge vorgelesen und bedient werden. Das ist aber nur die Basis für eine barrierefreie Webseite.

Außerdem müssen z. b. Bilder gekennzeichnet werden und wenn sie wichtig für das Verständnis des Inhaltes sind, müssen diese wiederum beschrieben werden.

Dann gibt es noch eine Seite, auf der das Projekt, deren Zweck und Nutzung der Webseite in Leichter Sprache und einmal in Gebärdensprache als Video erklärt wird.

Kontrast

Hinzukommen Möglichkeiten wie: Kontrast-Erhöhen auf höchste Kontraststufe und Schriftgrößen anpassen zu können.

Schrftgröße

Außerdem gibt es die Möglichkeit die Schriftgrößen per Knopfdruck zu vergrößern.

© Laura Thomas

© Laura Thomas

»Ein ganz herzliches Dankeschön für die Planung, Erstellung und den Launch der Website. Es ist ein tolles Gefühl, die neue barrierefreie Website vor sich zu haben! Sie ist wirklich klasse geworden.«

Sabrina Ebert | Handicap International e.V. Projektreferentin Phase 2

Responsive Webdesign

Mobile Optimierung

Mobile Optimierung von einer Webseite ist heutzutage keine Frage mehr – es ist einfach ein Muss. Natürlich ist die Nutzung immer zielgruppenabhängig. Auch hier konnten wir eine Mischnutzung schon bei der Sitemap Erstellung feststellen: Die Zielgruppe „Politiker*innen und Organisationen“ wird die Webseite meist aus dem Office (also mit Desktop-Rechnern) besuchen. Aber Privatpersonen, die sich über das Projekt informieren wollen sind eben höchstwahrscheinlich deutlich mehr mit dem Smartphone unterwegs.