Schlagwort: HTML

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 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

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 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.

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
5 barrierefreie progressive Web Apps entwickelt von Markus Lemcke im Betriebssystem IOS

„Progressive Web Apps barrierefrei entwickeln – Kurzanleitung“ weiterlesen

Barrierefreie Softwareentwicklung mit HTML, CSS und Javascript für die Cloud von Marlem-Software

In diesem Blogartikel erkläre ich, warum Marlem-Software barrierefreie Softwareentwicklung mit HTML, CSS und Javascript für die Cloud anbietet.

Was ist Cloud-Software?

Software die auf einer Webseite ausgeführt wird, nennt sich Cloud-Software. Google Docs und Google Drive sind gute Beispiele für eine Cloud-Software.

Cloud-Software ist plattformunabhängig

Dadurch dass Cloud-Software auf einer Webseite ausgeführt wird, kann sie auf allen Betriebssystemen ausgeführt werden. Diese Eigenschaft nennt sich plattformunabhängig. Cloud-Software ist plattformunabhängig.

Javascript ist eine Programmiersprache geworden

Javascript wurde entwickelt um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren auf Internetseiten. Inzwischen ist Javascript eine Programmiersprache geworden, weil die damalige Scriptsprache stark erweitert wurde. In Ranglisten von Programmiersprachen ist Javascript sogar vor der Microsoft Programmiersprache C#.
Da Javascript so umfangreich geworden ist, kann Cloud-Software mit:

  • HTML
  • CSS
  • Javascript

entwickelt werden.

Plattformunabhängige, barrierefreie Softwareentwicklung für die Cloud

Wer Erfahrung hat Internetseiten mit HTML und CSS barrierefrei zu entwickeln ( Barrierefreies Webdesign ), der kann auch plattformunabhängige Cloud-Software barrierefrei entwickeln.

„Barrierefreie Softwareentwicklung mit HTML, CSS und Javascript für die Cloud von Marlem-Software“ weiterlesen

barrierefreie Appentwicklung: Progressive Web Apps

Seit September 2016 steht im Gleichstellungsgesetz für Menschen mit Behinderungen dass staatliche Einrichtungen dazu verpflichtet sind, mobile Anwendungen, umgangssprachlich App, barrierefrei zu gestalten. In diesem Artikel erkläre barrierefreie App-Entwicklung anhand von Progressive Web Apps.

Barrierefreie Appentwicklung – Gleichstellungsgesetz für Menschen mit Behinderungen

Im Gleichstellungsgesetz für Menschen mit Behinderungen steht seit September 2016 in § 12a Barrierefreie Informationstechnik Absatz 1 folgendes:

(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: Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG)

Mobile Anwendungen sind Apps. Somit sind staatliche Einrichtungen dazu verpflichtet, wenn sie Apps einsetzen, darauf zu achten, dass diese Apps barrierefrei sind.

So sieht Marlems Sprechassistent auf einem Android Smartphone aus:
Marlems Sprechassistent auf einem Android Smartphone

„barrierefreie Appentwicklung: Progressive Web Apps“ weiterlesen

Barrierefreies Webdesign nach BITV 2.0: was bedeutet valides HTML?

In diesem Artikel erkläre ich was HTML ist, was „valide“ bedeutet und warum das für barrierefreies Webdesign eine wichtige Rolle spielt.

Bevor ich zu barrierefreies Webdesign komme, möchte ich für alle nichtfachmenschen die zu verwendeten Begiffe erklären. HTML (HyperText Markup Language) ist eine Dokumentbeschreibungssprache. HTML besitzt Kommandos, die sogenannten Tags, mit denen Webseiten geschrieben(=entwickelt) werden.

Was bedeutet „valide“? Statt valide könnte auch das Wort „gültig“ verwendet werden. Valides HTML bedeutet dass die Schreibweise der HTML-Tags gewisse „Schreibregeln“ entspricht und somit gültig ist. Wenn Sie jetzt Ihre Webseite auf valides HTML überprüfen möchten, können Sie das mit dem HTML-Validator durchführen. Wenn Ihre Webseite oder eine Unterseite bei der Überprüfung Errors(=Fehler) enthält ist Ihre Webseite nicht valide und somit auch nicht barrierefrei! Warum ist das so?

Menschen mit Behinderungen surfen nicht immer mit dem Microsoft Browser „Internet Explorer“ nur weil dieser standardmäßig installiert ist. Behinderte suchen sich den Browser aus, der aufgrund Ihrer körperlichen Einschränkung am besten geeignet ist. Wenn eine Webseite valides HTML enthält, ist meistens(leider nicht immer) gewährleistet dass diese Webseite in jedem Browser korrekt dargestellt wird. Wenn Webentwickler nicht validen HTML-Code erstellen weil es bei den aktuellen Browsern funktioniert, kann es ein „böses“ erwachen geben, wenn die Browser ihre Bereitschaft „fehlerhaftes HTML richtig anzuzeigen“ verändern.

Ein weiterer Grund warum valides HTML für barrierefreies Webdesign wichtig ist, sind Screenreader . Blinde und Sehbehinderte Menschen verwenden einen Screenreader um überhaupt einen Computer / Laptop bedienen zu können. Der Screenreader kann den Inhalt einer Webseite nur dann korrekt „lesen“ wenn die Webseite valides HTML enthält.
Damit Sie jetzt nicht einfach sagen „es gibt so wenig Blinde das lohnt sich nicht“ würde ich mich sehr freuen, wenn Sie diesen Link gründlich studieren „Blindheit und Sehbehinderung in Deutschland“ .

Dadurch das viele Menschen mit Behinderungen in Heime, Sonderkindergärten und Sonderschulen untergebracht sind, ist es vielen Menschen gar nicht klar wie viel behinderte Menschen in Deutschland leben.

Die BITV 2.0  schreibt valides HTML zwingend vor! Das bedeutet, wenn Ihre Webseite barrierefrei nach BITV 2.0 sein soll, muss sie valides HTML enthalten.

Zum Schluss möchte ich noch einen persönlichen Grund anführen warum ich schon immer auf valides HTML geachtet habe. Für mich ist es ein Qualitätsmerkmal! So wie ein Aufsatz ohne Rechtschreibfehler zeigt, dass der Autor des Aufsatzes die Rechtschreibregeln perfekt beherrscht, so zeigt eine Webseite die valides HTML enthält, dass der Entwickler die HTML-Syntax beherrscht. Wenn Ihre Webseite HTML-Valide ist, zeigen Sie, dass Sie Ihr „Handwerk“ verstehen.

Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Accessibility by WAH