1 Barrierefreies Webdesign – Barrierefreie Informatik

Digitale Barrierefreiheit – warum wird das bis 2025 wichtig?

In diesem Blogartikel wird erklärt, was digitale Barrierefreiheit ist und warum das im Jahr 2025 wichtig wird.

Digitale Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von ihren Fähigkeiten oder Einschränkungen, digitale Inhalte wie Webseiten, Apps und Software problemlos nutzen können. Dies ist wichtig, da immer mehr Menschen online arbeiten, kommunizieren und einkaufen. Ab 2025 wird dies besonders wichtig, da es gesetzliche Regelungen gibt, die Unternehmen dazu verpflichten, ihre digitalen Angebote barrierefrei zu gestalten.

Was ist digitale Barrierefreiheit?

Für eine inklusive Zukunft muss digital der Zugang für alle Menschen gewährleistet sein. Inklusion digital bedeutet, dass Personen mit und ohne Behinderung die gleichen Websites, Software und Apps nutzen.

Digitale Barrierefreiheit bedeutet, dass Webseiten, Software und Apps so entwickelt werden, dass sie für alle Menschen, auch für Menschen mit Behinderungen und anderen körperlichen Einschränkungen bedienbar sind. Dazu gehört zum Beispiel, dass blinde Menschen eine Webseite mit einem Screenreader lesen können oder dass Videos Untertitel haben, damit auch gehörlose Menschen den Inhalt der Videos wahrnehmen können.

Tastatur mit einer Taste auf der Barrierefrei steht — Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„Digitale Barrierefreiheit – warum wird das bis 2025 wichtig?“ weiterlesen

Barrierefreie Web-Entwicklung mit KI: HTML-Tabellen einfach programmiert

In diesem Blogartikel wird erklärt wie mit Unterstützung von künstlicher Intelligenz eine barrierefreie HTML-Tabelle programmiert werden kann.

Was ist HTML und CSS?

HTML ist die Abkürzung für „Hypertext Markup Language“ und bildet das Grundgerüst einer Webseite. Es handelt sich um eine Auszeichnungssprache, die verwendet wird, um den Inhalt einer Webseite strukturiert darzustellen. HTML definiert die verschiedenen Elemente einer Webseite, wie z.B. Überschriften, Absätze, Bilder, Links und Tabellen. Diese Elemente werden durch Tags gekennzeichnet, die in spitzen Klammern geschrieben sind, z.B.
<h1>,</h1>, <img />, <a>, </a> usw.

CSS steht für „Cascading Style Sheets“ und ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung einer Webseite zu gestalten. Während HTML den Inhalt strukturiert, erlaubt CSS es, diesen Inhalt zu designen und zu präsentieren. Mit CSS können verschiedene Stileigenschaften definiert werden, wie z.B. Farben, Schriftarten, Abstände, Positionierungen und vieles mehr. CSS-Regeln bestehen aus Selektoren (z.B. Elementnamen, Klassen oder IDs) und Deklarationen (Eigenschaften und Werte), die angeben, wie Elemente auf der Webseite dargestellt werden sollen.

Was ist Künstliche Intelligenz (KI)?

Künstliche Intelligenz, abgekürzt KI, bezieht sich auf Computerprogramme und Systeme, die entwickelt wurden, um Aufgaben auszuführen, die normalerweise menschliche Intelligenz erfordern würden. KI-Systeme können Daten analysieren, Muster erkennen, Probleme lösen und Entscheidungen treffen, ähnlich wie Menschen es tun würden, aber oft viel schneller und in größerem Umfang.
ChatGPT ist ein Beispiel für eine spezielle Art von Künstlicher Intelligenz, genannt Chatbot oder Conversational AI. ChatGPT, steht für „Chat Generative Pre-trained Transformer“. ChatGPT wurde trainiert, um natürliche Sprache zu verstehen und darauf basierend sinnvolle Antworten zu generieren.
Ich habe bei der künstlichen Intelligenz ChatGPT ein kostenloses Benutzerkonto.
„Barrierefreie Web-Entwicklung mit KI: HTML-Tabellen einfach programmiert“ weiterlesen

Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video im Jahr 2025

In diesem Artikel gibt es eine ausführliche Anleitung, wie Sie eine barrierefreie WordPress-Webseite erstellen im Jahr 2025.

Was ist WordPress?

WordPress ist ein praktisches Werkzeug, das es einfach macht, eigene Webseiten zu erstellen und zu verwalten. Man muss nicht programmieren können, um es zu nutzen. Es ist sehr benutzerfreundlich und lässt sich leicht verändern, sodass Sie Ihre eigenen Texte, Bilder und Videos hinzufügen und ändern können. Dank vieler verschiedener Designs und zusätzlicher Funktionen, die man hinzufügen kann, ist WordPress für alles Mögliche geeignet – von kleinen persönlichen Weblogs bis hin zu großen Firmenwebseiten.

Barrierefreies Webdesign – Definition und Umsetzung

Barrierefreies Webdesign bedeutet, dass Webseiten so erstellt bzw. programmiert werden, dass sie für alle Menschen, auch Menschen mit Behinderungen, bedienbar und wahrnehmbar sind. Eine solche Webpräsenz beinhaltet Features wie Alternativtexte für Grafiken, optimierte Farbkontraste sowie intuitive Menüführung und Navigation. WordPress unterstützt dies durch zahlreiche barrierefreie Plugins und Werkzeuge, die Konformität mit gesetzlichen Bestimmungen und Richtlinien gewährleisten. Barrierefreies Webdesign ist inzwischen selbstverständlich geworden. In guten Büchern über Webdesign gibt es regelmäßig ein eigenes Kapitel über barrierefreies Webdesign. Auf meinem ganzen Weblog ist barrierefreies Webdesign umgesetzt.

Ziel dieses Artikels

In diesem Artikel zeige ich Ihnen Schritt für Schritt, wie Sie Ihre WordPress-Webseite für alle Besucher einer Webseite benutzbar machen können, auch für jene mit verschiedenen Einschränkungen. Ich schätze WordPress sehr, denn es erlaubt jedem – auch ohne Programmierkenntnisse und unabhängig vom Budget – eine eigene Internetseite zu gestalten. Es ist mir ein besonderes Anliegen, dass wirklich jeder in der Lage ist, seine Ideen und Projekte online zu teilen. Indem wir unsere Webseiten barrierefrei gestalten, stellen wir sicher, dass sie von mehr Menschen gelesen und genutzt werden können.

Barrierefreiheit wird oft auch als Zugänglichkeit bezeichnet. Diesen Begriff werden Sie auch in diesem Artikel an der einen oder anderen Stelle finden.

Richtlinien für Barrierefreiheit

Die EN 301 549 ist in Deutschland und der EU maßgebend, international gelten die Web Content Accessibility Guidelines (WCAG) 2.2. Diese standardspezifischen Richtlinien bzw. Leitlinien sollen garantieren, dass eine WordPress-Website sämtliche Anforderungen zur Einbeziehung von Webseitenbesuchen mit Einschränkungen berücksichtigt.

In WordPress ist es möglich Bildern einen Alternativtext zuzuweisen. Dies ist für blinde Menschen wichtig — WordPress ermöglicht es, Alternativtexte für Bilder festzulegen, was für blinde Menschen sehr wichtig ist.

„Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video im Jahr 2025“ weiterlesen

Barrierefreie Farbkontraste bei Texten nach EN 301 549

In diesem Blogartikel wird erklärt wie barrierefreie Farbkontraste bei Webseiten, Software und Apps nach EN 301 549 realisiert werden können.

Was ist die EN 301 549 ?

Die EN 301 549 ist eine europäische Norm. Sie enthält Richtlinien für folgende Bereiche:

Barrierefreiheit bei Webseiten
Barrierefreiheit bei Software
Barrierefreiheit bei Apps
Barrierefreiheit bei Hardware

Für die barrierefreie Gestaltung von Webseiten, Software, Apps und Hardware gibt es viele Prüfschritte die erfüllt sein müssen.
In diesem Blogartikel geht es um den Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend

„Barrierefreie Farbkontraste bei Texten nach EN 301 549“ weiterlesen

Barrierefreie HTML-Tabellen erstellen

In diesem Blogartikel zeige ich, wie Sie eine HTML-Tabelle barrierefrei gestalten können nach der Richtlinie EN 301 549.

Der Prüfschritt für diesen Blogartikel in der EN 301 549 heißt: 9.1.3.1e. Datentabellen richtig aufgebaut.

Als erstes der HTML-Code:

<table>
  <thead>
    <tr>
      <th>Screenreader</th>
      <th>Betriebssystem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NVDA</td>
      <td>Windows</td>
    </tr>
    <tr>
      <td>Orca</td>
      <td>Ubuntu</td>
    </tr>
    <tr>
      <td>Voice Over</td>
      <td>IOS</td>
    </tr>
    <tr>
      <td>Talkback</td>
      <td>Android</td>
    </tr>
  </tbody>
</table>

„Barrierefreie HTML-Tabellen erstellen“ weiterlesen

Barrierefreie Navigation für eine Webseite erstellen – Anleitung

In diesem Blogartikel erkläre ich wie Sie eine barrierefreie Navigation für eine Webseite mit HTML und CSS erstellen können.

Barrierefreie Navigation – Was ist das

Sicherlich bist du bereits mit dem Konzept der Website-Navigation vertraut, das auch oft als Website-Menü bezeichnet wird. Dieses wichtige Element ist die horizontale Leiste, sie kann auch vertikal sein, die auf einer Webseite platziert ist und dir ermöglicht, mühelos zwischen verschiedenen Unterseiten zu navigieren. Hier findest du Links, auf die du klicken kannst, um direkt zu verschiedenen Zielseiten zu gelangen. Diese Leiste muss so programmiert sein, dass sie für Menschen mit unterschiedlichen Behinderungen oder anderen körperlichen Einschränkungen bedienbar ist.

Barrierefreie Navigation – Das HTML

Hier das HTML zur barrierefreien Navigation:


    <nav>
      <ul class="nav-list">
        <li>
          <a href="index.html" accesskey="s"><span class="buchstabe_unterstreichen">S</span>tartseite</a>
        </li>
        <li>
          <a href="index.html" accesskey="l">Dienst<span class="buchstabe_unterstreichen">l</span>eistungen</a>
        </li>
        <li>
          <a href="index.html" accesskey="ü"><span class="buchstabe_unterstreichen">&Uuml;</span>ber uns</a>
        </li>
        <li>
          <a href="index.html" accesskey="k"><span class="buchstabe_unterstreichen">K</span>ontakt</a>
        </li>
      </ul>
    </nav>

Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung

In diesem Blogartikel erkläre ich sehr ausführlich wie Sie Web Formulare barrierefrei programmieren / coden können.

Web-Formulare sind noch immer sehr wichtig. Leider ignorieren die gängigen Anleitungen wie man Web-Formulare programmieren soll, die Barrierefreiheit. Gemeindeverwaltungen, Landratsämter, Finanzämter und Regierungspräsidien sind aber nach § 12a Barrierefreie Informationstechnik Behindertengleichstellungsgesetz – BGG zur digitalen Barrierefreiheit verpflichtet. Deswegen zeige ich in diesem Blogartikel wie ein barrierefreies Web-Formular mit HTML und CSS programmiert wird nach der europäischen Norm 301 549.

„Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung“ weiterlesen

8 Gründe warum Untertitel bei Videos wichtig sind

In diesem Artikel erkläre ich, warum Untertitel bei Videos wichtig sind.

Was sind Untertitel?

Untertitel sind Texte. Die Texte beschreiben, was in einem Video, Fernsehfilm oder Kinofilm zu sehen ist.
Untertitel sind für die Barrierefreiheit wichtig
Für gehörlose Menschen ist es wichtig, dass Videos, Fernsehfilme und Kinofilme Untertitel haben, damit sie deren Inhalt mitbekommen.
In der europäischen Norm 301 549 gibt es in Kapitel 7 mehrere Prüfungsschritte, bei denen es um Untertitel geht.
In diesem Blogartikel möchte ich jedoch nicht die Barrierefreiheit in den Mittelpunkt stellen, sondern 8 allgemeine Gründe angeben, warum Untertitel bei Videos wichtig sind.

Das Bild zeigt einen Untertitel bei einem Youtube-Video — Untertitel bei YouTube-Videos helfen zum Beispiel gehörlose Menschen.

„8 Gründe warum Untertitel bei Videos wichtig sind“ weiterlesen

Barrierefreies Webdesign nach der europäischen Norm EN 301 549

In diesem Artikel erkläre ich was die europäische Norm EN 301 549 für barrierefreies Webdesign ist und warum ich mich freue, dass sie nun auch in Deutschland gilt.

Barrierefreies Webdesign: Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie von allen Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, wahrgenommen und bedient werden kann.

Barrierefreies Webdesign: Die Entwicklungsgeschichte

Das Thema barrierefreies Webdesign hat in Deutschland angefangen mit dem Inkrafttreten des Gesetzes zur Gleichstellung von Menschen mit Behinderungen am 1. Mai 2002.
Damals in §11 jetzt in § 12a Barrierefreie Informationstechnik werden öffentliche Stellen des Bundes dazu verpflichtet, bei Internetseiten von Behörden, barrierefreies Webdesign umzusetzen.
Am 24. Juli 2002 trat die Barrierefreie-Informationstechnik-Verordnung (BITV) in Deutschland in Kraft. Die Barrierefreie-Informationstechnik-Verordnung ist die deutsche Richtlinie um Webseiten barrierefrei zu gestalten. In der Barrierefreie-Informationstechnik-Verordnung waren Prüfungsschritte die durchgeführt werden müssen, um herauszufinden, ob eine Webseite barrierefrei ist oder nicht.
WCAG 1.0 wurde seit Mai 1999 empfohlen. Die Version WCAG 2.0 wurde nach mehr als neunjähriger Beratung am 11. Dezember 2008 verabschiedet, inzwischen liegt eine autorisierte deutsche Übersetzung vor. Im Juni 2018 hat die WAI die WCAG 2.1 verabschiedet. Die Web Accessibility Initiative (WAI) ist ein Bereich innerhalb des W3C, in der sich mehrere Arbeitsgruppen und Interessengruppen mit dem barrierefreien Zugang zum Web und seinen Inhalten beschäftigen. Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der Techniken im World Wide Web.
Nun gab es seit 11. Dezember 2008 zwei Richtlinien um barrierefreies Webdesign zu realisieren. Eine nationale, BITV, und eine Internationale, WCAG.
Im Jahr 2011 trat die BITV 2.0 in Kraft. Noch immer war Deutschland nicht gewillt, barrierefreies Webdesign nach europäischen oder internationalen Richtlinien zu verwirklichen.
Ab März 2021 gilt jetzt in Deutschland der HARMONISED EUROPEAN STANDARD Accessibility requirements for ICT products and services. In diesem harmonisierten europäischen Standard geht es um Anforderungen von Barrierefreiheit bei Hardware, Webseiten und Software. Dieser Standard heißt EN 301 549.

ETSI – Harmonisierter europäischer Standard Zugänglichkeitsanforderungen für ICT-Produkte und -Dienstleistungen

Anmerkung von Markus Lemcke

18 Jahre nach in Krafttreten des Behindertengleichstellungsgesetz gibt es hier im Landkreis Reutlingen / Tübingen noch sehr viele Behörden die sich kategorisch weigern Webseiten und Apps barrierefrei entwickeln zu lassen. Ich wünsche mir, dass die Bundesregierung die Behörden dazu zwingt dass Behindertengleichstellungsgesetz umzusetzen und somit Webseiten, Software und Apps zugänglich gestalten.

„Barrierefreies Webdesign nach der europäischen Norm EN 301 549“ weiterlesen

Web Content Accessibility Guidelines 2.1 / WCAG 2.1

In diesem Artikel erkläre ich was die Web Content Accessibility Guidelines 2.1, abgekürzt WCAG 2.1, sind und warum diese für barrierefreies Webdesign wichtig sind.

Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie von allen Menschen, auch von Menschen mit Behinderungen und anderen körperlichen Einschränkungen, bedient und wahrgenommen werden kann.

Was sind die Web Content Accessibility Guidelines?

Die Web Content Accessibility Guidelines (WCAG; englisch für „Richtlinien für barrierefreie Webinhalte“) sind ein internationaler Standard zur barrierefreien Gestaltung von Internetangeboten. Einfach ausgedrückt, die Web Content Accessibility Guidelines sind Richtlinien in denen festgehalten ist, welche Schritte umgesetzt werden müssen, damit eine Internetseite barrierefrei ist.

Web Content Accessibility Guidelines (WCAG 2.1) — Internationale Richtlinien zur Gestaltung barrierefreier Internetseiten

„Web Content Accessibility Guidelines 2.1 / WCAG 2.1“ weiterlesen