Anleitung – Barrierefreie Informatik

Barrierefreie Appentwicklung – Anleitung 2025

Barrierefreiheit in der digitalen Welt wird immer wichtiger. Apps, die für alle zugänglich sind, schaffen nicht nur ein besseres Nutzererlebnis, sondern erfüllen auch rechtliche Vorgaben und soziale Verantwortung. Doch wie gelingt barrierefreie Appentwicklung? In diesem Artikel erkläre ich die Grundlagen und gebe Ihnen wertvolle Tipps um Apps barrierefrei entwickeln zu können. Jede neue App sollte von Anfang an mit dem Gedanken der Zugänglichkeit konzipiert werden.

Native Apps und Progressive Web Apps

Apps können auf unterschiedliche Weise entwickelt werden, je nachdem, wie und wo sie genutzt werden sollen. Ein durchdachtes Design ist hierbei entscheidend, um die Benutzerfreundlichkeit von Anfang an zu gewährleisten. Zwei wichtige Ansätze sind native Apps und Progressive Web Apps (PWA).

Native Apps: Diese Apps werden speziell für ein bestimmtes Betriebssystem wie Android oder iOS entwickelt. Sie nutzen die Programmiersprachen und Werkzeuge, die für das jeweilige Betriebssystem vorgesehen sind (z. B. Java oder Kotlin für Android, Swift oder Objective-C für iOS). Native Apps bieten die beste Leistung und können auf alle Funktionen des Geräts zugreifen, wie Kamera, GPS oder Benachrichtigungen.
Progressive Web Apps (PWA): PWAs sind Webseiten, die sich wie Apps verhalten. Sie laufen im Browser, können aber auch auf dem Startbildschirm eines Geräts installiert werden. PWAs sind plattformübergreifend und benötigen keine separate Entwicklung für verschiedene Betriebssysteme. Sie sind jedoch oft in ihren Funktionen eingeschränkt, da sie nicht denselben Zugriff auf die Gerätehardware haben wie native Apps. Dennoch kann eine PWA eine kostengünstige und effektive Lösung für viele Anwendungsfälle sein. Progressive Web Apps werden mit HTML, CSS und Javascript programmiert.

Die barrierefreie App Marlems Schiebepuzzle auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Appentwicklung – Anleitung 2025“ 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>

Progressive Web Apps barrierefrei entwickeln – Kurzanleitung

Progressive Web Apps (abgekürzt PWAs) sind plattformunabhängig und es ist sehr einfach eine Progressive Web-App barrierefrei zu entwickeln. In diesem Artikel gibt es eine kurze Anleitung wie progressive Web Apps entwickelt werden.

Inhaltsverzeichnis

Was ist eine App?

App ist die Abkürzung für Application. Application ist englisch und heißt auf deutsch Anwendung. Eine App ist also eine Anwendungen. Früher konnten Apps nur auf Smartphones und Iphones installiert werden. Dann wurden das Tablet und Ipad erfunden. Auf diesen Geräten ist es auch möglich Apps zu installieren. Inzwischen wird Software für Desktop-Betriebssysteme auch Apps genannt. Apps sind die Zukunft.

Gesetzliche Verpflichtung für Öffentliche Stellen des Bundes

Im Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik Absatz 1 steht:

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen, einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei. Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.

Quelle: Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik

Es gibt also für den Staat eine gesetzliche Verpflichtung, dass nur Apps eingesetzt werden dürfen, die barrierefrei sind.

Progressive Web App – Definition

Progressive Web Apps, sind Apps die mit

HTML5
CSS ( Cascading Style Sheets )
Javascript / jQuery

Programmiert werden.

Oft wird die Abkürzung PWA für progressive Web-App verwendet.

Progressive Web Apps sind plattformunabhängig, das bedeutet, sie funktionieren auf allen Betriebssystemen. Sie können auch auf allen Geräten wie Laptop, PC, Smartphone, Iphone, Tablet, Ipad eingesetzt werden.

jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek und vereinfacht die Programmierung von progressive Internetapps.
Es ist sehr einfach Progressive Web Apps zugänglich zu entwickeln. Hierfür müssen die gleichen Richtlinien umgesetzt werden, wie wenn eine Internetseite behindertengerecht entwickelt werden soll.

5 barrierefreie progressive Web Apps entwickelt von Markus Lemcke im Betriebssystem IOS

„Progressive Web Apps barrierefrei entwickeln – Kurzanleitung“ weiterlesen