Einbindung von SimplifyMe.js – Komplette Webdesigner-Dokumentation

1. Grundsätzliche Einbindung

Um SimplifyMe auf Ihrer Website einzubinden, fügen Sie folgenden Code in Ihre Seite ein:

<script src="https://service.simplifyme.work/client/simplify.js?parameter1=value1[&...]"></script>

Alle Einstellungen werden über die URL-Parameter gesteuert. Diese Parameter folgen dem ? im Link und werden durch & getrennt.

2. Verfügbare Parameter und Beispiele

2.1 autorun

Bestimmt, ob der Assistent automatisch beim Laden der Seite startet (true) oder erst beispielsweise nach einem Klick auf einen Menüpunkt oder auf einen Button.

Beispiel: Autorun deaktivieren

<script src="https://service.simplifyme.work/client/simplify.js?autorun=false"></script>

Beispiel: SimplifyMe über einen Menüpunkt starten

Der Assistent wird mit Hilfe der Funktion toggleSimplifyMeAssistant() geöffnet bzw. geschlossen.

<div id="popupMenu"
    style="display: none; position: absolute; top: 50px; right: 0; background-color: #f9f9f9; z-index: 1;">
    <a href="#" class="menu-item">Menüpunkt 1</a>
    <a href="#" class="menu-item">Menüpunkt 2</a>
    <a onclick="toggleSimplifyMeAssistant()" class="menu-item">Simplify</a>
</div>

2.2 position

Legt fest, wo der Assistent auf der Seite erscheinen soll:

Als ID eines HTML-Elements, z.B. position=meinWrapper
Oder als feste Position: top, bottom, left, right

Beispiel: Assistent in ein eigenes DIV platzieren

<div id="meinWrapper"></div>
<script src="https://service.simplifyme.work/client/simplify.js?position=meinWrapper"></script>

Beispiel: Assistent unten auf der Seite einfügen

<script src="https://service.simplifyme.work/client/simplify.js?position=bottom"></script>

2.3 showButton

Gibt an, ob ein sichtbarer Button zum Öffnen des Assistenten eingeblendet wird.

Beispiel: Button ausblenden

<script src="https://service.simplifyme.work/client/simplify.js?showButton=false"></script>

2.4 buttonPosition

Positioniert den Button an einer festen Stelle auf dem Bildschirm:

0 = Links oben
1 = Links 25% Höhe
2 = Links 50% Höhe
3 = Links 75% Höhe
4 = Links unten
5 = Rechts oben
6 = Rechts 25% Höhe
7 = Rechts 50% Höhe
8 = Rechts 75% Höhe
9 = Rechts unten

Beispiel: Button rechts unten platzieren

<script src="https://service.simplifyme.work/client/simplify.js?buttonPosition=9"></script>

2.5 zIndex

Legt die Stapelreihenfolge des Buttons fest. Wichtig, wenn andere Elemente über dem Button liegen.

Beispiel: Button in den Vordergrund bringen

<script src="https://service.simplifyme.work/client/simplify.js?buttonPosition=5&zIndex=9999"></script>

2.6 individual

Lädt ein eigenes CSS-Design. Die Datei muss im Format simplify-me-[Name].css verfügbar sein. Beispiel: simplify-me-kundenname.css.

Beispiel: Individuelles Kunden-Design verwenden

<script src="https://service.simplifyme.work/client/simplify.js?individual=kundenname"></script>

2.7 localServer (nur für SimplifyMe-Entwickler vorgesehen)

Nutzt eine lokale Entwicklerversion statt der Live-Umgebung.

Beispiel: Lokalen Server aktivieren

<script src="https://service.simplifyme.work/client/simplify.js?localServer=true"></script>

2.8 devUniverseServer (nur für SimplifyMe-Entwickler vorgesehen)

Schaltet auf ein spezielles Testsystem um (nur für Entwicklung und Tests relevant).

Beispiel: Testsystem verwenden

<script src="https://service.simplifyme.work/client/simplify.js?devUniverseServer=true"></script>

3. Eigene Gestaltung mit dem Parameter "individual" (CSS-Override)

Wenn Sie ein eigenes Design verwenden möchten, erstellen Sie eine CSS-Datei nach folgendem Schema:

/* simplify-me-kundenname.css */
.simplifyme-logo-button {
    background-color: #7b120f;
    border-color: #7b120f;
    width: 55px;
    height: 55px;
}

Wichtig: Der Dateiname muss exakt dem Wert des Parameters individual entsprechen!

Die Datei wird automatisch geladen und überschreibt das Standarddesign von SimplifyMe.

4. Komplettes Einbindungsbeispiel

So könnte eine vollständige Implementation von SimplifyMe auf Ihrer Webseite aussehen:

<div id="meinWrapper"></div>
<script src="https://service.simplifyme.work/client/simplify.js?autorun=false&position=meinWrapper&showButton=true&buttonPosition=9&individual=kundenname"></script>

Grundlagen zu WCAG

Die Web Content Accessibility Guidelines (WCAG) sind internationale Richtlinien, die sicherstellen sollen, dass Webseiten und digitale Inhalte für alle Menschen zugänglich sind – unabhängig von körperlichen oder kognitiven Einschränkungen. Entwickelt vom World Wide Web Consortium (W3C), bieten die WCAG klare Kriterien und Empfehlungen, um Barrieren im Internet abzubauen und eine inklusive Nutzung zu ermöglichen.

Die WCAG basieren auf vier grundlegenden Prinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Diese Prinzipien helfen Entwicklern und Designern, Webseiten so zu gestalten, dass sie für eine möglichst breite Nutzergruppe zugänglich sind, einschließlich Menschen mit Seh-, Hör-, Mobilitäts- oder Lernbehinderungen. Die Richtlinien sind in verschiedenen Konformitätsstufen (A, AA und AAA) organisiert, die unterschiedliche Anforderungen an die Barrierefreiheit definieren.

A, AA und AAA - wer braucht was?

Die WCAG unterscheiden drei Stufen der Barrierefreiheit: A, AA und AAA. Jede Stufe baut auf der vorherigen auf und stellt höhere Anforderungen an die Zugänglichkeit.

Stufe A umfasst die grundlegendsten Anforderungen, die unbedingt erfüllt werden müssen, damit Inhalte überhaupt zugänglich sind. Branchen wie kleine lokale Hotels, kleine Gastronomiebetriebe und Handwerksbetriebe profitieren bereits erheblich davon, wenn sie diese Mindeststandards einhalten.

Stufe AA ist die am häufigsten angestrebte Konformitätsstufe und wird oft von Gesetzen oder öffentlichen Ausschreibungen verlangt. Sie sorgt dafür, dass Webseiten für eine viel größere Bandbreite von Nutzerinnen und Nutzern ohne größere Hürden bedienbar sind. Typische Branchen, die AA-Standards erfüllen sollten, sind große Hotelketten, Bildungseinrichtungen und öffentliche Verwaltungen.

Stufe AAA ist die höchste Stufe der Barrierefreiheit und enthält Anforderungen, die für bestimmte Zielgruppen besonders wichtig sein können, aber nicht immer für alle Webseiten praktikabel sind. AAA-Standards werden häufig von spezialisierten Anbietern, wie exklusiven Wellness- und Boutique-Hotels, Websites von Behindertenverbänden oder hochspezialisierten medizinischen Plattformen angestrebt.

SimplifyMe und WCAG

SimplifyMe unterstützt zahlreiche WCAG-konforme Funktionen, beachten Sie aber dennoch:

Nicht alle Anforderungen dieser Guidelines sind alleine mit einem extern eingebundenen Tool wie SimplifyMe möglich.
Im Gegenzug liefert SimplifyMe zahlreiche Funktionen, die nicht durch WCAG gefordert sind, jedoch Menschen mit Behinderungen signifikant unterstützen.
Außerdem bietet SimplifyMe auch Funktionen für Menschen, die keine Behinderung aufweisen. Das Tool orientiert sich an der Anforderung der Inklusion, die seitens des European Accessibility Acts verpflichtend eingefordert wird, während dies im Bereich von WCAG eher eine technische Rolle spielt.

Ein Überblick über die drei Stufen und die Abdeckung mit Hilfe von SimplifyMe:

Vollständige Dokumentation: Einbindung von SimplifyMe.js