Barrierefreiheit bei Visual Studio Code – Barrierefreiheit bei Entwicklungsumgebungen

In diesem Blogartikel untersuche ich ob die Entwicklungsumgebung Visual Studio Code barrierefrei ist.

Was ist eine Entwicklungsumgebung?

Eine Entwicklungsumgebung (auch IDE, kurz für Integrated Development Environment) ist so etwas wie ein digitaler Arbeitsplatz für Programmierer. Stellen Sie sich vor, Sie möchten ein Haus bauen. Anstatt jedes Werkzeug und Material einzeln zu suchen und zu benutzen, könnten Sie einen Werkzeugkasten haben, der alles, was Sie benötigen, an einem Ort bereithält.
Genau das macht eine Entwicklungsumgebung für Programmierer. Sie kombiniert verschiedene Tools, die benötigt werden, um Software zu schreiben, zu testen und zu debuggen. Das beinhaltet normalerweise einen Code-Editor, indem Sie Ihren Programmcode schreiben, einen Compiler oder Interpreter, der Ihren Code in ausführbaren Code umwandelt, und oft auch Debugging-Tools, mit denen Sie Fehler im Code finden und beheben können,
Die Entwicklungsumgebung hilft also dabei, den Prozess des Programmierens zu erleichtern, indem sie alle notwendigen Werkzeuge an einem Ort zusammenführt und so die Effizienz steigert. Es ist sozusagen wie ein spezieller Arbeitsplatz für Programmierer, um ihre Software zu erstellen.

Was ist Visual Studio Code?

Visual Studio Code (VS Code) ist eine kostenlose, benutzerfreundliche und leistungsstarke Code-Editor-Software, die von Microsoft entwickelt wurde. Sie ist besonders für das Schreiben, Bearbeiten und Debuggen von Computerprogrammen geeignet.
Ich nutze Visual Studio Code für Web-Programmierung, also Internetseiten und progressive Web Apps. Es ist aber auch möglich mit Visual Studio Code Python-Programme zu schreiben.

Die Entwicklungsumgebung Visual Studio Code mit der Webseiten und Python-Programme entwickelt werden können
Auf dem Bild ist die Entwicklungsumgebung Visual Studio Code mit der Webseiten und Python-Programme entwickelt werden können

Barrierefreiheit bei Visual Studio Code – Barrierefreiheit bei Entwicklungsumgebungen“ weiterlesen

Barrierefreiheit bei Colaboratory – Barrierefreiheit bei Entwicklungsumgebungen

In diesem Blogartikel untersuche ich ob die Entwicklungsumgebung Colaboratory barrierefrei ist.

Was ist eine Entwicklungsumgebung?

Eine Entwicklungsumgebung (auch IDE, kurz für Integrated Development Environment) ist so etwas wie ein digitaler Arbeitsplatz für Programmierer. Stellen Sie sic vor, Sie möchten ein Haus bauen. Anstatt jedes Werkzeug und Material einzeln zu suchen und zu benutzen, könnten Sie einen Werkzeugkasten haben, der alles, was Sie benötigen, an einem Ort bereithält.
Genau das macht eine Entwicklungsumgebung für Programmierer. Sie kombiniert verschiedene Tools, die benötigt werden, um Software zu schreiben, zu testen und zu debuggen. Das beinhaltet normalerweise einen Code-Editor, indem Sie Ihren Programmcode schreiben, einen Compiler oder Interpreter, der Ihren Code in ausführbaren Code umwandelt, und oft auch Debugging-Tools, mit denen Sie Fehler im Code finden und beheben können,
Die Entwicklungsumgebung hilft also dabei, den Prozess des Programmierens zu erleichtern, indem sie alle notwendigen Werkzeuge an einem Ort zusammenführt und so die Effizienz steigert. Es ist sozusagen wie ein spezieller Arbeitsplatz für Programmierer, um ihre Software zu erstellen.

Barrierefreiheit bei Colaboratory – Barrierefreiheit bei Entwicklungsumgebungen“ weiterlesen

Barrierefreiheit: Untertitel für YouTube – Wie KI Rechtschreib- und Tippfehler verbessern kann

In diesem Blogartikel erkläre ich, wie Sie mithilfe von ChatGPT innerhalb von 60 Sekunden Rechtschreib- und Tippfehler verbessern können.

Warum sind Untertitel in YouTube-Videos wichtig?

Es gibt Menschen, die gehörlos sind. Für sie ist es unmöglich, ein YouTube-Video anzusehen, in dem nur gesprochen wird, da sie gesprochene Worte nicht hören können. Ältere Menschen neigen dazu, beim Fernsehen den Untertitel einzublenden, da mit dem Alter die Hörleistung nachlässt. Es gibt also Personengruppen, die entweder gar nichts oder schlecht hören können. Untertitel sind für diese Gruppen bei YouTube-Videos wichtig.
Es existiert eine europäische Richtlinie für Barrierefreiheit bei Webseiten, Software, Apps und Hardware, genannt EN 301 549. Diese Richtlinie umfasst unter anderem den Prüfschritt 7.1.1, der die Wiedergabe von Untertiteln fordert. Gemäß dieser Richtlinie müssen Videos Untertitel bereitstellen.

So können in Youtube Untertitel eingegeben werden. Auf der Linken Seite die Texte, rechts die Zeiten.
Mit einem Mausklick auf „ALS TEXT BEARBEITEN“ wird der ganze Untertitel ohne Zeiten angezeigt.

„Barrierefreiheit: Untertitel für YouTube – Wie KI Rechtschreib- und Tippfehler verbessern kann“ 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

Smartphone Nutzung / Bedienung leicht gemacht

In diesem Blogartikel „Smartphone Nutzung / Bedienung leicht gemacht“  wird in leichter Sprache die Bedienung eines Android-Smartphones erklärt.

Warum dieser Blogartikel?

Im Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG) in § 12a Barrierefreie Informationstechnik 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.
(2) Die barrierefreie Gestaltung erfolgt nach Maßgabe der aufgrund des § 12d zu erlassenden Verordnung. Soweit diese Verordnung keine Vorgaben enthält, erfolgt die barrierefreie Gestaltung nach den anerkannten Regeln der Technik.
Quelle: Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG)

Die digitale Barrierefreiheit ist für alle Menschen mit Behinderungen. Auch für Menschen mit Lernbehinderung oder geistiger Behinderung. Deswegen gibt es jetzt meinen Kurs den ich regelmäßig in der Lebenshilfe Reutlingen gebe, Smartphone Nutzung / Bedienung leicht gemacht, jetzt auch als Blogartikel.
Selbstverständlich dürfen auch Senioren diesen Blogartikel lesen. Digitale Barrierefreiheit ist für alle Menschen die irgendeine körperliche Beeinträchtigung haben.

Dieser Blogartikel ist in leichter Sprache geschrieben

Ich habe diesen Blogartikel „Smartphone Nutzung / Bedienung leicht gemacht“ mit Unterstützung der künstlichen Intelligenz in leichter Sprache übersetzt. Ich hoffe, dass Menschen mit kognitiven Einschränkungen, dass auch so sehen, dass dieser Blogartikel sehr viel einfacher zu verstehen ist als meine anderen Blogartikel. Smartphone-Nutzung / Bedienung leicht gemacht“ in leichter Sprache. Das Ziel ist das Informatik Wissen so einfach erklärt wird, dass Menschen mit kognitiven Einschränkungen ebenfalls die Möglichkeit sich Informatik Wissen auf einfache Art anzuzeigen bzw. zu lernen.

Dieser Blogartikel hat viele Bilder, Videos und nur so viel Text wie nötig

Um Informatik-Wissen zur Bedienung eines Smartphones leicht verständlich zu machen, habe ich viele Bilder und Videos verwendet. Bilder und Videos sind einfacher zu verstehen als Text. Ich habe positive Erfahrungen mit dieser Methode gemacht, als ich einen Kurs zur Smartphone-Nutzung bei der Lebenshilfe Reutlingen geleitet habe.

Was ist ein Smartphone – Textbeschreibung

Ein Smartphone ist wie ein Telefon, ein Computer und ein Spielzeug zusammen. Mit einem Smartphone kann man telefonieren, deshalb ist es wie ein Telefon. Man kann Aufgaben mit einem Smartphone erledigen, so wie mit einem Computer. Und auf einem Smartphone kann man auch Spiele spielen, deshalb ist es wie ein Spielzeug.

So sieht ein Smartphone aus mit Betriebssystem Android
So sieht ein Smartphone aus mit Betriebssystem Android

„Smartphone Nutzung / Bedienung leicht gemacht“ 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

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>

„Barrierefreie Navigation für eine Webseite erstellen – Anleitung“ weiterlesen

Computer ohne Maus, nur per Tastatur bedienen – So arbeiten auch blinde Menschen

In meinen Vorträgen an Hochschulen und Universitäten und in meinen Blogartikeln und YouTube-Videos erkläre ich oft: „Blinde Menschen können keine Computermaus bedienen!“. Aber geht das überhaupt? Kann zum Beispiel das Betriebssystem Windows kann ohne Computermaus bedient werden? Genau das erkläre ich in diesem Blogartikel.

Mit der Tastaturmaus das Betriebssystem Windows bedienen

Die Tastaturmaus gibt es für Menschen die wegen einer Behinderung oder einer anderen körperlichen Einschränkung keine Computermaus, kein Mauspad und keinen Trackball bedienen können. Die Tastaturmaus finden Sie im Menü „Einstellungen“, „Barrierefreiheit“, „Maus“ in der Kategorie „Interaktion“.

Mausfunktion Tasten
Mauszeiger runter Taste 2
Mauszeiger links Taste 4
Mauszeiger rechts Taste 6
Mauszeiger hoch Taste 8
Linker Mausklick Taste 5 oder / und Taste 5
Rechter Mausklick Taste * und danach Taste 5
Doppeklick große Plustaste

Computer ohne Maus, nur per Tastatur bedienen – So arbeiten auch blinde Menschen“ weiterlesen

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

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