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.

Native Apps und Progressive Web Apps

Apps können auf unterschiedliche Weise entwickelt werden, je nachdem, wie und wo sie genutzt werden sollen. 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. 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

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

Progressive Web Apps barrierefrei entwickeln – Anleitung 2024

In diesem Blogartikel werden die Grundlagen erklärt, wie Sie progressive Web Apps entwickeln können.

Was sind Apps?

Apps sind Programme oder Anwendungen, die auf mobilen Geräten wie Smartphones oder Tablets installiert werden können. Apps dienen dazu, bestimmte Aufgaben zu erledigen, Informationen abzurufen oder Unterhaltung zu bieten. Man kann Apps aus dem entsprechenden App-Store herunterladen und auf seinem Gerät nutzen.

Was sind native Apps?

Native Apps sind spezielle Programme, die direkt für ein bestimmtes Betriebssystem wie Android oder iOS entwickelt wurden. Das bedeutet, sie sind genau auf die Funktionen und Eigenschaften des jeweiligen Systems zugeschnitten. Diese Apps werden über die App-Stores (Google Play Store oder Apple App Store) heruntergeladen und installiert. Native Apps können die Hardware und Software des Geräts optimal nutzen, wie die Kamera, GPS oder Push-Benachrichtigungen, wodurch sie in der Regel schnell und zuverlässig sind.

Einführung in progressive Web Apps (PWAs)

Eine progressive Web-App wird mit HTML, CSS und JavaScript programmiert. Sie ist eine Webseite, die sich wie eine App anfühlt. Sie funktioniert ähnlich wie eine normale App auf einem Smartphone oder Tablet, aber sie muss nicht aus einem App-Store installiert werden. Die App kann über einen Webbrowser aufgerufen werden. Progressive Web-Apps können auch offline genutzt werden und bieten eine schnellere Ladezeit. Progressive Web App wird abgekürzt mit PWA.

Für Anwender, im englischen User, ist die Nutzung eine progressive Web-Apps sehr einfach.

HTML, CSS und JavaScript – Was ist das?

HTML, CSS und JavaScript sind alle Programmiersprachen, die für die Entwicklung von PWAs verwendet werden. HTML (Hypertext Markup Language) wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren. Es wird verwendet, um Texte, Bilder, Links und andere Elemente auf einer Webseite anzuzeigen. CSS (Cascading Style Sheets) wird verwendet, um das Aussehen und das Layout einer Webseite zu gestalten. Mit CSS können Entwickler Schriftarten, Farben, Abstände und andere visuelle Eigenschaften einer Webseite festlegen. JavaScript wird verwendet, um interaktive Elemente einer Webseite zu erstellen. Mit JavaScript können Benutzeraktionen wie Klicks, Überfahren mit der Maus und Eingaben in Formularen verarbeitet werden, um dynamische und reaktionsschnelle Webseiten zu erstellen.

„Progressive Web Apps barrierefrei entwickeln – Anleitung 2024“ weiterlesen

Barrierefreie Quiz App programmieren – Anleitung

Ich in diesem Blogartikel erkläre ich wie Sie mit HTML, CSS und Javascript eine barrierefreie progressive Quiz App programmieren können.

Multiple Choice Quiz – Was ist das?

Kennen Sie die Fernsehsendungen „Wer wird Millionär?“, „Gefragt – Gejagt“ oder „Quizduell – Der Olymp“. In diesen Fernsehsendungen wird eine Frage gestellt und es gibt 3 oder 4 Antwortmöglichkeiten. Diese Art von Quiz nennt sich Multiple Choice Quiz. In diesem Blogartikel erkläre ich Ihnen wie Sie einen barrierefreien Multiple Choice Quiz mit HTML, CSS und Javascript programmieren können. Für Entwickler die Grundkenntnisse in der Programmiersprache Javascript besitzen, ist es sehr einfach mehrere Quiz-Apps mit unterschiedlichen Themen zu programmieren.

Was ist ein barrierefreies Quiz?

Ein barrierefreies Quiz ist ein Quiz dass auch von Menschen mit unterschiedlichen körperlichen Einschränkungen und Behinderung genutzt werden kann. In diesem Blogartikel wird gezeigt wie ein barrierefreies Quiz mit HTML, CSS und JavaScript programmiert wird.

Ziel des Blogartikels

Das Ziel des Blogartikels ist es, Ihnen eine Anleitung zu geben, mit der Sie sehr schnell barrierefreie progressive Quiz Apps selbst programmieren können mit unterschiedlichen Themen und unterschiedlichen Aussehen. Los geht es! So sieht die App aus die wir jetzt gemeinsam programmieren:

Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android
Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Quiz App programmieren – Anleitung“ weiterlesen

Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023

In diesem Blogartikel wird ausführlich erklärt wie Sie progressive Web Apps entwickeln bzw. erstellen können.

Technologische Grundlagen von PWAs

Hier kommt ein kurzer Überblick über die technischen Grundlagen von progressive Web Apps.
Der Entwickler muss HTML, CSS und JavaScript beherrschen. Damit die App bei allen Bildschirm bzw. Displaygrößen gut aussieht muss der Entwickler responsive Webdesign umsetzen können. Damit die PWA wie eine App aussieht, benötigt diese ein App-Manifest. Zur Technologie einer PWA gehört auch die Installierbarkeit. Die Offline-Fähigkeit ist eine wichtige technologische Grundlage. Ein Service Worker sorgt dafür, dass die App installierbar ist und auch offline genutzt werden kann. Die Plattformunabhängigkeit, die Fähigkeit auf unterschiedlichen Betriebssystemen eingesetzt werden können ist eine sehr wichtige Technologische Grundlage.

Auffindbarkeit

Leider können PWAs in App Stores nicht gefunden werden. Weder im App Store von Google, Apple oder Microsoft. Es muss dafür gesorgt werden, dass PWAs in Suchmaschinen gefunden werden. Allerdings muss auch erwähnt werden, dass die Stores für ungeübte Nutzer nicht einfach zu verstehen sind.

Aber wie kann eine PWA in Suchmaschinen gefunden werden? Die PWA kann bei Suchmaschinen indiziert werden. Sie können einen WordPress-Blogartikel für eine PWA schreiben und diesen für die Suchmaschine indizieren oder Sie erklären in einem YouTube-Video Ihre App und indizieren das Video. Aus meiner Sicht ist es für den Nutzer ein Vorteil, wenn er PWAs in der Suchmaschine suchen und finden kann. Wenn ich als Nutzer vor Endgeräten sitze, suche ich Apps lieber in der Suchmaschine wie in 3 unterschiedlichen App Stores.

Sind progressive Web Apps vollverwertige Apps?

progressive Web Apps, abgekürzt PWAs sind noch immer nicht so richtig in der Gesellschaft angekommen. Oft wird behauptet, dass PWAs eine „echten“ Apps sind. Es gibt Personen die behaupten, dass progressive Web Apps sind mobile Websites. Das ist falsch! Es gibt viele Unterschiede zwischen PWAs und mobile Websites. mobile Websites fehlt zum Beispiel die Installierbarkeit. PWAs besitzen ein umfangreiches, sehr gut durchdachtes Konzept. Viele Entwickler arbeiten sehr fleißig daran, die Möglichkeiten von PWAs stetig zu verbessern. Die Programmiersprache Javascript ist eine vollwertige Programmiersprache die dafür sorgt, dass PWAs nahezu alles können, was native Apps auch können. Es gibt ein paar wenige Fähigkeiten die nativen Apps können und PWAs nicht. Aber in vielen sind PWAs nativen Apps ebenbürtig. Ich möchte mit diesem Artikel versuchen Appentwickler von PWAs zu begeistern, jedoch sage ich auch ganz deutlich, dass native Apps auch toll sind. Auf jeden Fall möchte ich die Personen, welche behaupten, dass PWAs das gleich sind wie mobile Websites, davon überzeugen, dass eine PWA wesentlich mehr kann wie eine mobile Webseite! Die Entwicklung von progressive Web Apps ist kostengünstiger als die Entwicklung von native Apps. Eine PWA kann auf allen Betriebssystemen eingesetzt werden. Alle PWAs die ich programmiert habe können auf allen Endgeräten und Betriebssystemen eingesetzt bzw. installiert werden. Bei der Entwicklung von native Apps muss für jedes Betriebssystem eine eigene App programmiert werden. Eine native App kann nur in einem Betriebssystem installiert werden. Deswegen ist das programmieren von PWAs kostengünstiger. „Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023“ weiterlesen

Barrierefreie Appentwicklung als Progressive Web App – Fachartikel im windows .developer von Markus Lemcke

Im windows .developer wurde in Ausgabe 8.2023 ein Fachartikel von mir veröffentlicht über Barrierefreie Appentwicklung als Progressive Web App.

Von September bis Dezember 2021 habe ich auf der Webseite Udemy den Kurs gemacht „Web-Apps mit Javascript und jQuery selber programmieren“. Parallel dazu habe ich das Buch von Christian Liebel über Progressive Web-Apps durchgearbeitet.

Dezember 2022: Ein Fachartikel von mir über Barrierefreie Appentwicklung als Progressive Web-App wird im entwickler magazin veröffentlicht und das Thema landet auf der Titelseite!

Gestern Abend hatte ich Post von der IT-Fachzeitschrift windows .developer .
Mein Fachartikel der im entwickler magazin Ausgabe 1.2023 veröffentlicht wurde, wird jetzt in der Ausgabe 8.2023 in der IT-Fachzeitschrift windows .developer in voller länge veröffentlicht.

Hier die Titelseite der Ausgabe:

Titelseite der IT-Fachzeitschrift windows .developer
Titelseite der IT-Fachzeitschrift windows .developer Ausgabe 8.2023

Hier die erste Seite des Artikels:

Seite 1 des Fachartikels "progressive Web Apps barrierefrei entwickeln" von Markus Lemcke in der IT-Fachzeitschrift windows .developer
Titelseite der IT-Fachzeitschrift windows .developer

Ich freue mich sehr.

Vielen Dank an die IT-Fachzeitschrift windows .developer .

Schlussbemerkung

Es geht voran … die Apps werden barrierefrei !!!
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Marlems Schiebe-Puzzle App – neue barrierefreie progressive Web App

Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Schiebe-Puzzle. Die App heißt „Marlems Schiebe-Puzzle“.

Progressive Web App – Was ist das?

Eine Progressive Web App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für Progressive Web App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass Progressive Web Apps ohne Internetverbindung genutzt werden können. Mit Hilfe einer Manifest-Datei ist es möglich, dass eine Progressive Web App genauso aussieht wie eine Native App. Progressive Web Apps sind plattformunabhängig, dass bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

Progressive Web Apps im Browser ausführen

Progressive Web Apps können im Browser ausgeführt werden oder installiert werden. Da progressive Web Apps von Google entwickelt wurden, bietet sich der Browser Google Chrome an. Im Betriebssystem IOS empfehle ich den Browser Safari. Die Web-Adresse vom Marlems Schiebe-Puzzle ist www.marlems-schiebe-puzzle.de .

Wie werden progressive Web-Apps „installiert“?

Alle Browser von Desktop und Mobilgeräten, egal ob im Betriebssystem Windows, Ubuntu, Android oder im Betriebssystem IOS haben ein Menü „App installieren“ oder „Zum Startbildschirm hinzufügen“ oder „Zum Home-Bildschirm“. Mit dieser Funktion kann eine Progressive Web App als Symbol auf den Startbildschirm angelegt werden.
Progressive Web-Apps können auch auf PCs oder Laptops in Browsern aufgerufen werden. Wenn eine progressive Web-App bestimmte Anforderungen erfüllt, dann gibt es im Browser Google Chrome und im Browser Edge ein Menü „… installieren“ oder „App installieren“.
In diesem Blogartikel wird erklärt, wie Sie eine progressive Web App in unterschiedlichen Betriebssystemen installieren können:
Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS

Die App kann auch ohne Internet genutzt werden. Wenn Sie die App zum ersten Mal starten benötigen Sie über WLAN oder Funk eine Internetverbindung. Beim ersten Starten der App werden alle notwendigen Dateien in ein Browserspeicher geladen. So bald alle Dateien im Browserspeicher sind, können Sie die App nutzen, auch wenn Ihr Smartphone,IPhone, Tablet oder IPad gar keine Internetverbindung hat.

Was ist Schiebe-Puzzle?

Schiebepuzzle ist ein Spiel, bei dem man versucht, durch Verschieben von Kacheln ein Bild oder eine Form wiederherzustellen. Das Spiel besteht aus einer quadratischen oder rechteckigen Schachtel, in der sich mehrere rechteckige Kacheln befinden. Jede Kachel ist mit einem Teil eines Bildes oder einer Form bedruckt.
Zu Beginn des Spiels sind die Kacheln in einer zufälligen Reihenfolge angeordnet, sodass das Bild oder die Form nicht erkennbar ist. Ziel des Spiels ist es, die Kacheln durch Verschieben so anzuordnen, dass das Bild oder die Form wiederhergestellt wird.
Das Verschieben der Kacheln erfolgt, indem man eine Kachel auswählt und sie in eine freie Position schiebt, um Platz für andere Kacheln zu schaffen. Man kann eine Kachel nur in eine Position schieben, die sich in unmittelbarer Nähe befindet und leer ist.
Das Spiel kann in verschiedenen Schwierigkeitsstufen gespielt werden, indem man die Anzahl der Kacheln erhöht oder die Anzahl der möglichen Bewegungen begrenzt. Schiebepuzzle sind in der Regel ein Einzelspieler-Spiel und können auf Papier oder mit einem Computer oder mobilen Gerät gespielt werden.

Die barrierefreie App Marlems Schiebepuzzle auf einem Smartphone mit Betriebssystem Android
„Marlems Schiebe-Puzzle App – neue barrierefreie progressive Web App“ weiterlesen

Marlems Hangman Spiel – neue barrierefreie progressive Web App

Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Hangman. Die App heißt „Marlems Hangman-Spiel“.

Progressive Web App – Was ist das?

Eine Progressive Web App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für Progressive Web App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass Progressive Web Apps ohne Internetverbindung genutzt werden können. Mit Hilfe einer Manifest-Datei ist es möglich, dass eine Progressive Web App genauso aussieht wie eine Native App. Progressive Web Apps sind plattformunabhängig, dass bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

Progressive Web Apps im Browser ausführen

Progressive Web Apps können im Browser ausgeführt werden oder installiert werden. Da progressive Web Apps von Google entwickelt wurden, bietet sich der Browser Google Chrome an. Im Betriebssystem IOS empfehle ich den Browser Safari. Die Web-Adresse vom Marlems Hangman-Spiel ist www.marlems-hangman-spiel.de .

Die App-Oberfläche der barrierefreien App Marlems Hangman-Spiel im Betriebssystem Android
Die App-Oberfläche der barrierefreien App Marlems Hangman-Spiel im Betriebssystem Android

„Marlems Hangman Spiel – neue barrierefreie progressive Web App“ weiterlesen

Jahr 2022: Entwickler-Magazin veröffentlicht 2 Fachartikel über digitale Barrierefreiheit von Markus Lemcke

Im Jahr 2022 veröffentlicht die IT-Fachzeitschrift Entwickler-Magazin 2 IT-Fachartikel über digitale Barrierefreiheit von Markus Lemcke.

Titelseiten von 2 Hefte des Entwickler-Magazins in denen Fachartikel von Markus Lemcke veröffentlicht wurden
Titelseiten von 2 Hefte des Entwickler-Magazins in denen Fachartikel zur digitalen Barrierefreiheit von Markus Lemcke veröffentlicht wurden

„Jahr 2022: Entwickler-Magazin veröffentlicht 2 Fachartikel über digitale Barrierefreiheit von Markus Lemcke“ weiterlesen

Barrierefreie Appentwicklung als Progressive Web App – Fachartikel im entwickler magazin von Markus Lemcke

Im entwickler magazin wurde in Ausgabe 1.2023 ein Fachartikel von mir veröffentlicht über Barrierefreie Appentwicklung als Progressive Web App.

Von September bis Dezember 2021 habe ich auf der Webseite Udemy den Kurs gemacht „Web-Apps mit Javascript und jQuery selber programmieren“. Parallel dazu habe ich das Buch von Christian Liebel über Progressive Web-Apps durchgearbeitet.

Logbuch: Dezember 2022: Ein Fachartikel von mir über Barrierefreie Appentwicklung als Progressive Web-App wird im entwickler magazin veröffentlicht und das Thema landet auf der Titelseite!

Titelseite der IT-Fachzeitschrift entwickler magazin mit Hinweis auf den Artikel PWA Barrierefreiheit auf allen Plattformen
Titelseite der IT-Fachzeitschrift entwickler magazin mit Hinweis auf den Artikel PWA Barrierefreiheit auf allen Plattformen (=Betriebssystemen)

„Barrierefreie Appentwicklung als Progressive Web App – Fachartikel im entwickler magazin von Markus Lemcke“ weiterlesen