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

Wie kann überprüft werden ob ein Farbkontrast barrierefrei ist?

Im Prüfschritt steht, dass eine Sichtprüfung durchgeführt werden kann. Einer von vielen unsinnigen Texten die in der EN 301 549 stehen. Ich habe eine Farbfehlsichtigkeit. Wenn ich mit meiner Farbfehlsichtigkeit eine Sichtprüfung mache, dann wird es für alle die Menschen die keine Farbfehlsichtigkeit haben nicht lustig!
Deswegen meine Empfehlung: Verwenden Sie die kostenlose Software Colour Contrast Analyzer (CCA) um einen Farbkontrast auf Barrierefreiheit zu überprüfen.
In folgendem Video zeige ich wie der Contrast Analyzer funktioniert:

Vorschläge für barrierefreie Farbkontraste bei Texten

Grundsätzlich möchte ich keine Vorschriften machen welche Farben auf Webseiten, Software und Apps vorkommen dürfen. Immer wenn die kostenlose Software Colour Contrast Analyzer anzeigt, der Farbkontrast ist barrierefrei dürfen diese Farben verwendet werden.
Für Menschen die sich mit diesem Thema schwertun, mache ich in diesem Abschnitt Vorschläge. Es ist nur eine Auswahl von barrierefreien Farbkontrasten.

Schriftfarbe: #000000 | Hintergrundfarbe: #ABEBC6

Schriftfarbe: #FFFFFF | Hintergrundfarbe: #154360

Schriftfarbe: #FFFFFF | Hintergrundfarbe: #922B21

Schriftfarbe: #000000 | Hintergrundfarbe: #DCDCDC

Schriftfarbe: #000000 | Hintergrundfarbe: #FFFFFF

Schriftfarbe: #ffffff | Hintergrundfarbe: #DB1317

Schriftfarbe: #000000 | Hintergrundfarbe: #EFDCB4

Schriftfarbe: #000000 | Hintergrundfarbe: #AFD7F7

Schriftfarbe: #000000 | Hintergrundfarbe: #8BF83A

Schlussbemerkung

Barrierefreie Farbkontraste sind bei Webseiten, Software und Apps ein sehr wichtiges Thema, es ist aber keine Wissenschaft und es soll niemand davon abgehalten werden Farben bei der Programmierung von Webseiten, Software und Apps einzusetzen.

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 .

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

Marlem spielt Schach

In diesem Blogartikel geht es um das Brettspiel Schach. Ich erkläre Schachregeln und die Grundideen dieses tollen Brettspiels.

Wer ist Marlem?

Ich bin Marlem. Marlem setzt sich zusammen aus Markus Lemcke. Die ersten 3 Buchstaben von meinem Vornamen und die ersten 3 Buchstaben von meinem Nachnamen.

Ich wohne und arbeite in Dußlingen im Landkreis Tübingen und fange im Alter von 53 Jahren wieder an Schach zu spielen.

Warum gibt es diesen Blogartikel?

Ich habe auf meinem YouTube-Kanal eine Schach-Playlist „Marlem spielt Schach“. Youtube-Videos sind eine tolle Sache, aber für blinde Menschen nicht! Weil ich auch blinden Menschen die Möglichkeit geben möchte, Schach spielen zu lernen, gibt es diesen Blogartikel.

Ich bin mit meinem Anliegen nicht alleine. Folgende Webseite zeigt, dass auch der deutsche Schachbund ein Interesse das blinde Menschen dass Schachspielen lernen können:
„BLIND“ SCHACH SPIELEN – ABER WIE GEHT DAS?

Ich werde dennoch meine YouTube-Videos hier einfügen, dann ist dieser Blogartikel auch für Menschen die sehen können interessant!

„Marlem spielt Schach“ 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