Barrierefreie Website

[inno]

Hallo, ist es möglich in Mobirise eine barrierefreie website zu erstellen. Das diese für manche Unternehmen ja ab Juni Pflicht sind?

[Tommy Herrmann]

Moin,

also ich habe mich jetzt auch damit bisher nur am Rande beschäftigt, weil das ja nun nur sehr wenige Dienstleister und Produkte betrifft und meist nicht ganz normale Firmen.

Ich hatte gerade erst hier etwas dazu geschrieben:

viewtopic.php?p=15779#p15779


… und ja - na klar kannst Du das alles mit Mobirise erreichen, genau wie mit jeder anderen Software, du musst eben nur auf bestimmte Richtlinien achten, die man meist mit CSS, also dem Style, erreichen kann:

Wir haben einige Beispiele für Barrieren auf Webseiten für Sie aufgelistet:

> zwischen dem Text und dem Hintergrund bestehen nur schwache Kontraste,

> Sie verwenden Farben und Schriftarten, die mit einer Sehschwäche nicht sichtbar/lesbar sind,

> Ihre Website ist nicht alleine mit der Tastatur bedienbar, hierzu zählt auch die Auswahlmöglichkeit beim Cookie-Banner,

> zu kleine Schriftgröße ohne Zoom-Option,

> Untertitel bei Bildern und Audiodeskriptionen fehlen,

> Texte, Formulare etc. können vom Screenreader nicht erkannt werden,

> komplizierte Sprache und verschachtelte Sätze.

[inno]

Danke dir! Schaue ich mir an!

[Tommy Herrmann]

Moin,

unten habe ich mal ein erstes Beispiel für Barrierefreiheit gemäß den WCAG – den Web Content Accessibility Guidelines, erstellt – gilt als internationaler Standard für die Umsetzung von Barrierefreiheit in der Webentwicklung.

https://www.barrierefreiheit-dienstekon ... -node.html

---

Guckt auch mal hier:

https://eye-able.com/de/blog/barrierefr ... e-weltweit

"Eye-Able" ist eine deutsche Firma (Web Inclusion GmbH) und hat da wohl auch eine Software entwickelt, die man als JavaScript sehr einfach einfügen kann. Was das kostet habe ich bisher nicht gefunden.


Hier ein Video von Eye-Able:

---

und auch hier:

https://www.netz-barrierefrei.de/wordpr ... efreiheit/

---

Zum Beispiel die:

Fokus-Hervorhebung

Der Fokus muss nach WCAG 2.2 mindestens folgende Anforderungen erfüllen:

> Er muss mindestens zwei Pixel breit sein.

> Er muss mindestens 3:1 zu angrenzenden Farben haben.

> Das fokussierte Element muss größtenteils sichtbar sein, d.h. das fokussierte Element darf nicht überwiegend außerhalb des Viewports sein.

> Der Fokus muss natürlich das Element umrahmen, das heißt, er darf nicht das Element überlagern, das fokussiert ist.


Man sollte in der Lage sein, mit der Tabulator-Taste durch die Seite zu navigieren und dabei den Fokus so klar zu erkennen, dass man jederzeit weiß, wo man sich befindet - um dann mit der Eingabetaste den hervorgehobenen Link auch aufrufen zu können.

Ich habe hier mal diese einfache CSS zur Fokus-Hervorhebung (hier in Rot) eingebaut. Hier in die:

> Site-Einstellungen > Global HTML Insert > Before </head> Code

Code: Alles auswählen

<style>
    /* WCAG Focus */
    *:focus-visible {
      outline: 2px solid red !important;
    }
</style>

Hier wird also die Pseudo-Class:

:focus-visible

mit einem * davor verwendet. Der Stern steht für alle Elemente. Würde man z.B. schreiben:

button:focus-visible

stände diese CSS nur für das Element "button". Man könnte so verschiedenen Elementen unterschiedliche Stile oder Farben zuweisen.


Gehe also mit der Tabulator-Taste durch die Seite (mit Shift + Tab geht es rückwärts):

https://www.mobirise-tutorials.com/

Ich habe heute auch Mobirise in deren Forum darauf aufmerksam gemacht:

https://forums.mobirise.com/discussion/ ... ebsites/p1

Unser Forum hat übrigens auch bereits diese Fokus-Hervorhebung.

[Bushisan]

Hallo zusammen,

muss ich auch eine Vereinsseite barrierefrei gestalten ?

Gruß aus der Oberpfalz
Hubert

[Bushisan]

Hab leider zu spät zu diesem Thema suchen lassen - hab das gefunden !

---

Ja, auch Vereinswebseiten können unter Umständen barrierefrei sein müssen, abhängig von verschiedenen Faktoren. Vereine, die Online-Dienstleistungen anbieten, wie z.B. Ticketverkauf oder Online-Shops, sind ab dem 28. Juni 2025 verpflichtet, ihre Webseite barrierefrei zu gestalten. Dies gilt insbesondere, wenn der Verein wirtschaftliche Tätigkeiten ausübt, die über die reine Vereinsarbeit hinausgehen.

Wann müssen Vereinswebseiten barrierefrei sein?

Wirtschaftliche Tätigkeiten: Wenn der Verein auf seiner Webseite entgeltliche Dienstleistungen anbietet, wie z.B. einen Online-Shop, Ticketverkauf, oder andere kostenpflichtige Angebote, ist eine barrierefreie Gestaltung in der Regel verpflichtend.

Ausnahmen:
Vereine mit weniger als zehn Beschäftigten und einem Jahresumsatz von unter 2 Millionen Euro sind vom Barrierefreiheitsstärkungsgesetz (BFSG) ausgenommen, auch wenn sie wirtschaftliche Tätigkeiten ausüben.

[Tommy Herrmann]

Hallo Hubi,

danke für diesen Beitrag

Du kannst übrigens die eigenen Beiträge 60 Minuten lang am Bleistift-Symbol auch selbst ändern.


Ich hatte bereits zu diesem Thema recherchiert und einiges dazu oben geschrieben.

Auch die KI "ChatGPT" habe ich bereits zu diesem Thema befragt:


Welche Anpassungen muss man an einer gewöhnlichen HTML Webseite vornehmen, damit diese barrierefrei wird?

Eine barrierefreie HTML-Webseite ermöglicht es Menschen mit unterschiedlichen Behinderungen (z. B. Seh-, Hör- oder motorische Einschränkungen), die Inhalte zu verstehen und zu nutzen. Hier sind die wichtigsten Anpassungen, die vorgenommen werden sollten:

1. Semantisches HTML verwenden

Richtige HTML-Elemente verwenden (z. B. <header>, <nav>, <main>, <footer>, <article>, <section>).

Überschriftenhierarchie einhalten: <h1> bis <h6> in logischer Reihenfolge verwenden.

Listen (<ul>, <ol>, <li>) und Tabellen (<table>, <thead>, <tbody>, <th>) korrekt einsetzen.

2. Alternativtexte für Bilder

Jedes Bild braucht ein beschreibendes alt-Attribut:

<img src="bild.jpg" alt="Beschreibung des Bildes">

Ist ein Bild rein dekorativ, alt="" setzen, damit Screenreader es überspringen.

3. Tastaturnavigation sicherstellen

Alle interaktiven Elemente müssen mit der Tabulatortaste erreichbar sein.

Keine Funktionen dürfen ausschließlich mit der Maus bedienbar sein.

Fokusindikatoren (:focus) visuell erkennbar machen.

4. Formulare zugänglich gestalten

Felder mit <label> korrekt verbinden (for="id" und id="..."):

<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">

Fehlerhinweise klar und sichtbar machen, auch für Screenreader.

5. Farben und Kontraste beachten

Ausreichender Kontrast zwischen Text und Hintergrund (mindestens 4.5:1 für normalen Text).

Inhalte nicht nur durch Farbe unterscheiden (z. B. nicht „grün = gut, rot = schlecht“ allein).

6. Aria-Rollen (wenn nötig)

WAI-ARIA nutzen, wenn semantisches HTML nicht ausreicht:

<div role="button" tabindex="0">Mehr anzeigen</div>

Aber nicht überverwenden – wenn HTML es allein kann, ist das besser.

7. Multimedia-Inhalte barrierefrei anbieten

Videos: Untertitel, Transkripte und ggf. Audiodeskriptionen bereitstellen.

Audioinhalte: Transkription bereitstellen.

8. Verständliche Sprache und Struktur

Kurze, klare Sätze und einfache Sprache, besonders für behördliche oder öffentliche Inhalte.

Navigations- und Inhaltselemente klar und konsistent benennen.

9. Responsives Design und Zoom

Die Seite muss auch bei 200% Zoom les- und bedienbar bleiben.

Inhalte sollen sich responsiv an Bildschirmgrößen anpassen.

10. Zugänglichkeit testen

Mit Screenreadern (z. B. NVDA, VoiceOver) testen.

Mit Tastatur navigieren.

Tools wie:

WAVE

axe DevTools

Lighthouse


Wenn du willst, kann ich auch ein Beispiel einer barrierefreien HTML-Seite zeigen oder deine vorhandene Seite überprüfen.

[Bushisan]

Hallo Tommy,

ja - Danke! Mich hat an dieser Stelle eher interessiert, ob ich unsere Vereinsseite diesbezüglich etwas überarbeiten muss. Da wir keine kostenpflichtigen Angebote machen, ein kleiner Verein sind und auch den entsprechenden Umsatz nicht haben müssen wir wohl nichts ändern!

Ich wünsche Euch allen einen schönen Tag !!

[Rancher]

10 Beschäftigte habt Ihr wahrscheinlich auch nicht.

[Bushisan]

Hallo Ellen,

nee Du - sind froh wenn wir 10 erwachsene Mitglieder haben
Am Umsatz arbeiten wir aktuell noch

Schöne Tach noch

[AnnaHertwig]

Also ich prüfe auch als erstes bei meinen Kunden, ob sie das überhaupt haben müssen.
1.) 10 oder mehr Mitarbeiter oder 2 Mio Jahresumsatz
2.) Angebot von digitalen Leistungen (Onlineshop & Co.)

Dann prüfe ich im Page-Speed Test von Google und zeige, dass sie eh schon gut aufgestellt sind - wenn man schon bei Erstellung auf ausreichend Kontraste und SEO-mäßig sowas wie logische Reihenfolge von H-Tags verwendet, liegt man meist schon weit vorn. Die meisten meiner Kundenwebseiten sind bei 80+ Punkten.
Zeigt es dort grobe Fehler an, weiß man ja, wo anzusetzen ist.

Ich arbeite mit Legal Cockpit, da kann ich eine Barrierefreiheitserklärung erstellen, ähnlich wie ein Datenschutzerklärungs-Generator. Dann ist aus meiner Sicht das wichtigste getan.
Wenn Vorraussetzungen 1 und 2 nicht gemeinsam gegeben sind, braucht es nach meinem aktuellen Verständnis auch keine Erklärung.

Hat da jemand andere Erkenntnisse oder handhabt das anders? Würde mich sehr interessieren :-)

[Tommy Herrmann]

Hallo Anna,

danke dir für das Feedback

Übrigens in dem Zusammenhang ganz wichtig zu wissen, dass Mobirise nun mit dem neuesten Update 6.1.0 BETA auch die <h> Tags editierbar gemacht hat.