Bunte Küchenabenteuer

Angespornt von dem Barrierefreiheitsstärkungsgesetz (BSFG) was seit dem 28. Juni 2025 in Kraft getreten ist, habe ich mich Anfang des Jahres mit der Barrierefreiheit meines Blogs beschäftigt.

Dieses Gesetz „gilt für alle digitalen Produkte und Dienstleistungen, die ab diesem Datum in Deutschland bereitgestellt oder in Verkehr gebracht werden“. (https://de.wikipedia.org/wiki/Barrierefreiheitsst%C3%A4rkungsgesetz)
Die Bestimmungen dieses Gesetzes gelten zwar nicht für Blogs oder Webseiten von Privatpersonen und auch Kleinstunternehmen sind ausgenommen. Sollte im Blog oder auf der Webseite aber ein Onlineshop eingebunden sein und sich dediziert an Konsumenten richten, dann sieht die Sache schon wieder anders aus.

Kurz, für meinen Blog bin ich da eigentlich fein raus und müsste mich nicht darum kümmern. Aber mir gefällt die Idee, dass jeder der möchte meinen Blog auch lesen kann unabhängig von eventuell vorhandenen Einschränkungen.
Daher bemühe ich mich hier darum den Blog barrierearm zu gestalten. Wenn du noch Ideen hast, die mir helfen in diesem Punkt helfen können, dann schreib sie mir hier gerne in die Kommentare.

Nun ist das Thema „Inklusion auf deinem Blog: Wie machst du deine Inhalte für alle zugänglich?“ Teil des Bloggerschnacks aus dem Bloghexen-Forum. Eine optimale Gelegenheit mal darauf aufmerksam zu machen, was ich dafür bisher hier am Blog so gemacht habe.
Unterhalb meines Beitrags findest du auch die Beiträge der anderen Teilnehmer zu diesem Thema.

Die technische Umsetzung

Ein barrierefreies Theme

Als ich zu WordPress umgezogen bin war der erste Schritt wohl der wichtigste: die Auswahl eines Themes.
Wenn man sich bei den kostenfreien Themes bedient, die bei WordPress zur Verfügung stehen, dann kann man diese nach diversen Kriterien filtern. Beispielsweise auch nach der Barrierefreiheit.
Im Moment verwende ich das Theme Mesa WPEX von WPExplorer.

Hierarchie der Überschriften

Weiter ging es dann mit der Anpassung der Blogbeiträge. Optimalerweise sind die Überschriften der Seiten als solche entsprechend formatiert und hierarchisch angeordnet. H1, also die größte Überschrift, ist in dem aktuellen Design immer die erste Überschrift einer Seite oder eines Blogbeitrags. Es sollte auf der gleichen Seite des Blogs, dann keine weiteren H1 Überschriften geben.
Überschriften im Text beginnen also dann mit der nächst kleineren Ebene H2 und von da an absteigend.

Kennzeichnung von Listen

Neben der Eindeutigen Hierarchie der Überschriften ist es auch wichtig, dass Listen tatsächlich auch mit den entsprechenden html Tags als solche definiert sind. Dabei kommt es besonders auf die li-Tags an. Ob das ganze dann eine Liste mit Aufzählungspunkten (ul) oder mit einer Nummerierung (ol) ist, ist dabei nicht relevant.

<ul>
  <li>Listeneintrag 1</li>
  <li>Listeneintrag 2</li>
  <li>Listeneintrag 3</li>
</ul>

Der ALT-Text zu Bildern

Dass man alternative Text zu Bildern pflegt ist eigentlich schon lange Standard, wenn man sich im Web bewegt und selbst Inhalte erstellt.
Aber hinsichtlich der Barrierefreiheit gewinnt diese Möglichkeit nochmal mehr an Bedeutung.
Immer dann, wenn das jeweilige Bild, aus welchen Gründen auch immer, nicht geladen werden kann, wird anstelle des Bildes der alternative Text erscheinen. Und so bedienen sich auch Screenreader an dieser Information und lesen diesen alternativen Text vor.
Im allgemeinen setze ich einen entsprechenden alternativen Text zu den Bilder. Aber es gibt durchaus Beiträge bei denen ich bisher etwas faul war. Diese Faulheit begrenzt sich auf ein paar wenige Artikel auf diesem Blog.

Kontrasteinstellung und Schriftgröße

Außerdem setze ich noch ein Plugin (WP Accessibility) ein, welches eine Möglichkeit bietet den Blog in einer starken Kontrasteinstellung ansehen zu können und auch die Schriftgröße zu verändern. Auf kleinen Bildschirmen, wie beispielsweise meinem Smartphone ist diese kleine Werkzeugleiste meist aber eher störend als hilfreich, welch hab ich sie nur auf etwas größeren Bildschirmen anzeigen lassen.

Während meiner Zeit als ich mich mehr mit dem Berufsbild des Tower- oder Centerlotsen beschäftigt hatte, habe ich auch etwas über die Dauerbelastung der Augen durch Bildschirme gelernt. Die Monitore der Lotsen für die Flugraumüberwachung sind so eingestellt, dass man lange ermüdungsfrei an ihnen arbeiten kann. So ist die Hintergrundfarbe ein sehr dunkles Grau und die Farbe der Linien und Markierungen sind dann in DFS‑Blue 600 und DFS‑Green 400 gehalten.
Wie du siehst, verwende ich hier als Hintergrundfarbe einen Beigeton und auch die Schriftfarbe ist kein Schwarz sondern tatsächlich ein sehr dunkles Grün. Das ergibt ein Kontrastverhältnis von 13,96:1. Im Vergleich dazu ergibt ein klares Schwarz auf Weißem Hintergrund ein Verhältnis von 21:1. Beide Werte sind hinsichtlich der Barrierefreiheit vollkommen ausreichend und übersteigen bei weitem den Mindestwert von 4,5:1.

Welches Kontrastverhältnis deine Hintergrund- und Vordergrundfarben haben, kannst du dir beispielsweise auf folgender Webseite ermitteln lassen: https://webaim.org/resources/contrastchecker/

Die Target Size von anklickbaren Elementen

Alles in allem sagen mir diverse Analysen im Web, dass mit all dem der Blog hinsichtlich der Barrierefreiheit ganz gut da steht. Zu Beginn haben mir diese Analysen aber immer mal wieder gezeigt wo ich noch nachbessern sollte. So beispielsweise bei dem „Target Size“. Das war mir vollkommen unbekannt. Aber tatsächlich gibt es in den Web Content Accessibility Guidelines (WCAG) einen Abschnitt dazu: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum

Dieser Abschnitt besagt grob beschrieben, dass ein anklickbares Element entweder ein Mindestmaß von 24px x 24px haben soll oder aber der Abstand zwischen zwei anklickbaren Elementen 24px betragen soll.
Mit der Umsetzung davon bin ich noch nicht vollkommen zufrieden. So präferiere ich beispielsweise, dass da unten die Seitenzahlen anstelle von einem „Vor“ und „Zurück“ stehen. Bei einem „Vor“ und „Zurück“ wäre der Abstand gegeben, bei den Seitenzahlen ist er das nicht. Und auch die Links der Schlagwörter bei den Beiträgen sind eigentlich zu dicht aneinander.
Immerhin habe ich nun letztens erst die Seitennavigation zum Einen entzerrt und zum Anderen aufgeteilt. Spaßiges Zeug oben, Rechtliches Zeug unten.

Barrierefreie Schriftarten

Diesen Hinweis habe ich nach Veröffentlichung des Beitrags erhalten. Es gibt barrierefreie Schriftarten, die entsprechend optimiert sind um besonders gut bei entsprechenden Einschränkungen zu lesen sind. Bisher dachte ich ja schlicht, dass es eine serifen-lose Schriftart tun würde, beispielsweise wie Arial, Tahome und Verdana oder Inter. Aber da steckt mehr dahinter.

Es geht auch darum, dass die Zeichen sich grundsätzlich voneinander unterscheiden. So sollten also die Buchstaben und Zahlen wie „I“, „l“ und „1“ und „O“, „0“ nicht identisch aussehen, was bei meiner bisherigen Wahl aber genau der Fall war. Außerdem sollte das Lesen mit der gewählten Schrift nicht unnötig überfordern sein und sogenannten Lesestress erzeugen.
Lesestress bezeichnet die kognitive oder visuelle Überforderung beim Lesen. Die Überforderung führt dazu, dass das „Leseerlebnis“ als anstrengend, ermüdend und frustrierend wahrgenommen werden kann. Das kann bei allen Menschen unabhängig einer Einschränkung oder Erkrankung auftreten.

Zwischen ein paar Empfehlungen habe ich mich dann letztendlich für die Schriftart „Lexend“ entschieden und hoffe damit eine gute Wahl getroffen zu haben.

Die Sprache

Das war nun alles bezüglich der eher technischen Umsetzung mit einer Werkzeugleiste, bestimmten Formatierungen und der Theme-Wahl.
Zur Inklusion gehört aber auch die richtige Wahl der Sprache.
Ich meine, dass ich hier eine einfache Sprache verwende. Fremdwörter gibt es selten, Abkürzungen und Zahlen bis zwölf werden in Texten außerhalb der Rezeptangaben ausgeschrieben.
Manchmal neige ich dazu eigene Wortschöpfungen zu verwenden. Aus dem Kontext heraus ist dann aber klar was gemeint ist. Allerdings sind diese Wortschöpfungen wahrscheinlich nicht so geeignet für Personen, die sich die Texte übersetzen lassen oder sich mit dem Lesen und Verstehen von Texten generell schwer tun.
Genauso, das siehst du auch an diesem Text hier gerade, mag ich Nebensätze und Verschachtelungen… Es tut mir leid, aber das ist bereits die entschärfte Variante von dem was mein Hirn sich da immer so ausdenkt was meine Finger nun gefälligst tippen sollen.

Fazit

Insgesamt bin ich relativ weit gekommen hinsichtlich der technischen Umsetzung. An der Sprache kann man noch arbeiten und grundsätzlich ist da immer noch Platz für Verbesserung oder Änderungen um den Blog und dessen Inhalte noch barriereärmer zu gestalten.
Ehrlich gesagt bin ich aber recht zufrieden mit dem was ich da bisher so hinbekommen habe.

Und nun lasse ich mich mal davon inspirieren, was andere Blogger dafür so unternehmen.

In diesem Thread des Forums kannst du die Diskussion zum Thema mitverfolgen.

Ansonsten haben bisher folgende Blogger sich beteiligt:

• MSBlogPlus.de – Bloggerschnack 07-2025
• EDELINESHEALTHYTHINGS – Bloggerschnack im Sommer 2025: Was würdest du Neulingen zum Blog-Start empfehlen? & Wie viel Inklusion ist auf meinem Blog?
• Heldenhaushalt – Bloggerschnack im Juli: Inklusion auf deinem Blog
• Lorenzos Welt – Bloggerschnack – Inklusion auf deinem Blog: Wie machst du deine Inhalte für alle zugänglich?
• flying thoughts – Wie barrierefrei ist mein Blog?
• Blogissimo – Der optimale Alt-Text