Accessibility – Barrierefreie Informatik

HTML lernen leicht gemacht: Semantische HTML5-Elemente

In diesem Blogartikel erkläre ich, was semantische HTML5-Elemente sind und warum sie diese einsetzen sollten.

Semantische HTML5-Elemente: Strukturierende Elemente für eine bessere Web-Erfahrung

HTML5 hat die Webentwicklung revolutioniert, indem es neue, semantische Elemente eingeführt hat. Diese Elemente helfen nicht nur Entwicklern dabei, den Code klarer und besser strukturiert zu schreiben, sondern verbessern auch die Zugänglichkeit und das SEO-Ranking von Webseiten. In diesem Artikel werfen wir einen Blick auf die wichtigsten strukturierenden HTML5-Elemente und deren Bedeutung.

Was sind semantische Elemente?

Semantische HTML-Elemente sind spezielle Tags, die den Inhalt einer Webseite strukturieren und dabei eine klare Bedeutung vermitteln. Anders als generische Container wie <div> oder <span> beschreiben semantische Elemente den Zweck und die Rolle des Inhalts, den sie umschließen. Zum Beispiel deutet ein <header>-Element darauf hin, dass es sich um einen Kopfbereich handelt, während ein <article>-Element anzeigt, dass es sich um einen eigenständigen Inhalt oder Beitrag handelt.

Die Verwendung semantischer Elemente bringt mehrere Vorteile mit sich:

1. 1. Verbesserte Lesbarkeit und Wartbarkeit: Der Code wird für Entwickler verständlicher und leichter zu pflegen, da die Struktur und der Zweck der Inhalte klarer ersichtlich sind.
  2. Bessere Barrierefreiheit: Screenreader und andere Hilfstechnologien können die Struktur einer Webseite besser interpretieren und Nutzern mit Behinderungen eine bessere Navigation ermöglichen.
  3. SEO-Vorteile: Suchmaschinen können den Inhalt einer Webseite besser analysieren und indexieren, was zu einem höheren Ranking in den Suchergebnissen führen kann.

Tastatur mit einer Taste auf der Barrierefrei steht — Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Semantische HTML5-Elemente“ weiterlesen

HTML lernen leicht gemacht: Barrierefreiheit (Accessibility)

In diesem Blogartikel erkläre die Grundlagen der Barrierefreiheit bei Internetseiten.

Begrifflichkeiten

Barrierefreiheit und Accessibility bedeuten im Grunde dasselbe, sie beschreiben das Konzept, dass etwas für alle Menschen zugänglich und nutzbar sein sollte, unabhängig von möglichen Einschränkungen oder Behinderungen. Der Unterschied liegt hauptsächlich in der Sprache:

Barrierefreiheit:

- Dies ist der deutsche Begriff.
- Er beschreibt, dass keine Hindernisse oder Barrieren bestehen, die Menschen davon abhalten, eine Webseite, ein Gebäude oder einen Dienst zu nutzen.
- Beispiel: Eine Webseite ist barrierefrei, wenn sie für Menschen mit Sehbehinderungen oder motorischen Einschränkungen zugänglich ist.

Accessibility:

Dies ist der englische Begriff.
Er wird oft im internationalen Kontext und in technischen Dokumentationen verwendet.
Beispiel: In der Webentwicklung sprechen wir von „Web Accessibility“, wenn wir sicherstellen, dass Webseiten für alle Benutzer, einschließlich Menschen mit Behinderungen, zugänglich sind.

„HTML lernen leicht gemacht: Barrierefreiheit (Accessibility)“ weiterlesen

HTML lernen leicht gemacht: Textformatierung und Strukturierung

In diesem Blogartikel erkläre Textformatierung und Strukturierung mit HTML.

Überschriften <h1> bis <h6>

In HTML gibt es sechs verschiedene Überschriften-Tags, die von <h1> (die wichtigste und größte Überschrift) bis <h6> (die kleinste und am wenigsten wichtige Überschrift) reichen. Überschriften-Tags (<h1> bis <h6>) sind wichtig, um den Inhalt einer Webseite zu strukturieren und zu organisieren. Sie helfen nicht nur den Besuchern der Seite, den Inhalt besser zu verstehen, sondern sind auch für Suchmaschinen und Screenreader wichtig.
<h1>: Hauptüberschrift, die wichtigste Überschrift auf einer Seite.

Beispiel:

<h1>Dies ist eine Hauptüberschrift</h1>

<h2>: Unterüberschrift, weniger wichtig als <h1>.

Beispiel:

<h2>Dies ist eine Unterüberschrift</h2>
<h3>: Noch eine Ebene niedriger.</h3>

Beispiel:

<h3>Dies ist eine dritte Überschriftsebene</h3>

„HTML lernen leicht gemacht: Textformatierung und Strukturierung“ weiterlesen

HTML lernen leicht gemacht: Einführung in HTML

In diesem Blogartikel gibt es eine Einführung in HTML.

HTML steht für HyperText Markup Language. Es ist die grundlegende Sprache, die zum Erstellen von Webseiten verwendet wird.

Grundlage des Webs

HTML ist die Sprache, die das Grundgerüst jeder Webseite bildet. Jede Webseite, die Sie im Internet sehen, wird mit HTML erstellt.

HTML-Datei in Visual Studio Code erstellen

Starten Sie Visual Studio Code, indem Sie das Programm aus deinem Startmenü oder der Taskleiste öffnen.

Neues Projekt oder Ordner erstellen

Falls Sie ein neues Projekt beginnen möchten, können entweder ein neues Verzeichnis erstellen oder ein bestehendes Projekt öffnen. Gehen Sie dazu zu Datei > Ordner öffnen… und wähle Sie den Ordner aus, in dem Sie arbeiten möchtest.

Neue HTML-Datei erstellen

Klicken Sie im Datei-Explorer von Visual Studio Code mit der rechten Maustaste (oder drücken von Strg + N), um ein neues Dokument zu erstellen.
Geben Sie einen Dateinamen ein, der mit der Erweiterung .html endet. Zum Beispiel: index.html.

Aufbau des Dateinamens einer HTML-Datei

Name der Datei:
- Dies ist der eigentliche Name Ihrer Datei. Der Name kann nahezu beliebig gewählt werden, sollte aber aussagekräftig und leicht verständlich sein. Zum Beispiel: index, about, contact, etc.
- Vermeiden Sie Leerzeichen und Sonderzeichen im Dateinamen. Stattdessen können Sie Bindestriche oder Unterstriche verwenden, z.B. meine-seite oder meine_seite.
Erweiterung .html:
- Die Erweiterung .html zeigt an, dass es sich um eine HTML-Datei handelt. Diese Erweiterung ist notwendig, damit der Browser und andere Programme erkennen, dass es sich um eine Webseite handelt, die im HTML-Format geschrieben ist.

Beispiele:

- index.html: Hier ist index der Dateiname und .html die Erweiterung. Dies ist eine typische Bezeichnung für die Startseite einer Webseite.
- about.html: Hier ist about der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Informationen über Sie oder Ihr Unternehmen enthält.
- contact.html: Hier ist contact der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Kontaktdaten oder ein Kontaktformular enthält.

Markup Language

Eine Markup-Sprache verwendet spezielle Codes, sogenannte „Tags“, um den Inhalt einer Webseite zu strukturieren und zu formatieren. Diese Tags geben an, wie Text, Bilder, Links und andere Elemente auf der Seite angezeigt werden sollen.

Tags und Elemente

HTML verwendet Tags, die in spitzen Klammern (< >) stehen. Ein einfaches Beispiel ist das <p>-Tag, das für einen Absatz steht. Der Text, der innerhalb dieser Tags steht, wird als Absatz formatiert.

Beispiel:

<p>Das ist ein Absatz.</p>

„HTML lernen leicht gemacht: Einführung in HTML“ weiterlesen

Barrierefreie Apps – Was ist das und wie können diese gefunden werden?

In diesem Blogartikel wird erklärt, was barrierefreie Apps sind und wie diese gefunden werden können.

Was sind Apps bzw. mobile Apps?

Als App bzw. mobile App wird eine Anwendungssoftware für Mobilgeräte beziehungsweise mobile Betriebssysteme bezeichnet. Mobile Betriebssysteme sind zum Beispiel Android und IOS.
Obwohl sich der Begriff App bzw. bzw. mobile App auf jegliche Art von Anwendungssoftware bezieht, wird er im deutschen Sprachraum oft mit Anwendungssoftware für Smartphones, iPhones, iPads und Tablets gleichgesetzt. Bei mobile Apps wird zwischen nativen Apps, die nur auf einer Plattform funktionieren, und plattformunabhängigen Web-, Hybrid- und Cross-Plattform-Apps unterschieden.

Barrierefreie Apps – Definition

Apps sind dann barrierefrei, wenn sie so programmiert bzw. entwickelt wurden, dass sie von allen Menschen, auch von Menschen mit körperlichen Einschränkungen oder Behinderungen, uneingeschränkt bedient werden können.

Barrierefreie Apps – Behindertengleichstellungsgesetz – BGG

Im Behindertengleichstellungsgesetz – BGG § 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.
(7) Der Bund wirkt darauf hin, dass gewerbsmäßige Anbieter von Websites sowie von grafischen Programmoberflächen und mobilen Anwendungen, die mit Mitteln der Informationstechnik dargestellt werden, aufgrund von Zielvereinbarungen nach § 5 Absatz 2 ihre Produkte so gestalten, dass sie barrierefrei genutzt werden können.

Quelle: BGG § 12a Barrierefreie Informationstechnik

Das bedeutet, öffentliche Stellen des Bundes sind zum Einsatz von barrierefreien Apps verpflichtet und Unternehmen sollten barrierefreie Apps einsetzen.

„Barrierefreie Apps – Was ist das und wie können diese gefunden werden?“ weiterlesen

Samsung Galaxy A53 5G – Barrierefreiheit bei Android 12 – Anleitung

In diese Blogartikelreihe erkläre ich die Barrierefreiheit des Smartphones Samsung Galaxy A53 5G.

Was ist ein Smartphone?

Ein Smartphone ist eine Mischung aus Handy, Computer und Spiele-Konsole. Mit einem Smartphone kann telefoniert werden, deswegen ist es ein Handy. Mit einem Smartphone können Aufgaben erledigt werden, wie mit einem Computer.
Auf einem Smartphone können Spiele gespielt werden, deswegen ist es eine Spiele-Konsole.

Was ist Android?

Android ist ein Betriebssystem, das von Google entwickelt wurde. Google ist ein Weltunternehmen. Auf meinem Smartphone Samsung Galaxy A53 5G ist Android Version 12 installiert.

Was bedeutet Barrierefreiheit bei Smartphones?

Barrierefreiheit bei Smartphones bedeutet, dass Smartphones auch für Menschen mit Behinderungen und anderen körperlichen Einschränkungen bedienbar sind. Bei Smartphones gibt es Möglichkeiten, die Bedienung des Smartphones auf unterschiedliche Behinderungen anzupassen.

„Samsung Galaxy A53 5G – Barrierefreiheit bei Android 12 – Anleitung“ weiterlesen

Samsung Galaxy A53 5G – Barrierefreiheit bei Android 12 – Talkback – Der Screenreader von Android

In diesem Blogartikel erkläre ich den Screenreader Talkback bei Android 12 auf dem Smartphone Samsung Galaxy A53 5G bedient wird.

Was ist Android?

Android ist ein Betriebssystem, das von Google entwickelt wurde. Google ist ein Weltunternehmen. Auf meinem Smartphone Samsung Galaxy A53 5G ist Android Version 12 installiert.

Was bedeutet Barrierefreiheit bei Smartphones?

Barrierefreiheit bei Smartphones bedeutet, dass Smartphones auch für Menschen mit Behinderungen und anderen körperlichen Einschränkungen bedienbar sind.
Bei Smartphones gibt es Möglichkeiten, die Bedienung des Smartphones auf unterschiedliche Behinderungen anzupassen.

„Samsung Galaxy A53 5G – Barrierefreiheit bei Android 12 – Talkback – Der Screenreader von Android“ weiterlesen

Barrierefreiheit bei Computerspielen – Fachartikel im entwickler magazin von Markus Lemcke

Im entwickler magazin wurde in Ausgabe 3.2022 ein Fachartikel von mir veröffentlicht über Barrierefreiheit bei Computerspiele.

Entwickler magazin ist eine IT-Fachzeitschrift für Software-Professionals. Ich werde hier nicht den ganzen Artikel in Text veröffentlichen, sondern nur die Titel und die erste Seite der Artikels beides als Bilddatei.

Titelseite entwickler magazin. Eine Figur auf einem Surfbrett und darunter eine Welle — Titelseite entwickler magazin der Ausgabe 3.2022. Eine Figur auf einem Surfbrett und darunter eine Welle. Thema der Ausgabe ist Webentwicklung mit Go

„Barrierefreiheit bei Computerspielen – Fachartikel im entwickler magazin von Markus Lemcke“ weiterlesen

Barrierefreiheit bei Android

Ich möchte hier nochmal ein Grundlagen Artikel schreiben über die Barrierefreiheit beim Google-Betriebssystem Android, damit es Einsteiger einfacher haben sich in das Thema einzuarbeiten. Als Grundlage nehme ich mein Tablet mit Android-Version 12.

Was ist Android?

Bei Android handelt es sich um ein mobiles Betriebssystem, das vom Weltunternehmen Google entwickelt wurde. Android kommt hauptsächlich auf Smartphones und Tablets zum Einsatz. Offiziell ist Android seit dem 21. Oktober 2008 verfügbar.

Wie finde ich die Einstellungsmöglichkeiten für Barrierefreiheit in Android 12?

Leider ist der Begriff für die Barrierefreiheit nicht einheitlich. Auf meinem Smartphone von Samsung befindet sich die Barrierefreiheit in „Einstellungen“ und dann „Eingabehilfe“.
Auf meinem Tablet von Lenovo befindet sich die Barrierefreiheit in „Einstellungen“ und dann „Bedienungshilfen“.

Die Einstellungsmöglichkeiten zur Barrierefreiheit im Einzelnen?
Im Menü „Bedienungshilfen“ gibt es folgende Kategorien:

Heruntergeladene Apps
Bildschirm
Interaktionssteuerung
Untertitel
Audio
Allgemein

Ich erkläre jetzt die Einstellungsmöglichkeiten zur Barrierefreiheit bei Android 12 im Einzelnen.

Im Menü "Einstellungen", "Bedienungshilfen" befindet sich die Barrierefreiheit von Android 12 — Die Barrierefreiheit von Android 12 befindet sich im Menü „Einstellungen“, „Bedienungshilfen“

„Barrierefreiheit bei Android“ weiterlesen

Barrierefreiheit bei Windows 11

Ich habe gerade festgestellt, dass ich noch keinen Blogartikel über Barrierefreiheit bei Windows 11 geschrieben habe, deswegen hole ich das jetzt nach.

Barrierefreiheit im Betriebssystem Windows 11 – Allgemeines

Windows ist ein Betriebssystem des Weltunternehmens Microsoft.
Seit Windows 7 hießen die Einstellungsmöglichkeiten für Menschen mit Behinderungen im Betriebssystem Windows „Erleichterte Bedienung“. Seit Windows 11 heißen die Einstellungsmöglichkeiten für Menschen mit Behinderungen „Barrierefreiheit“.
Die Barrierefreiheit von Windows 11 ist in folgende Kategorien unterteilt:

Sehen
Hörvermögen
Interaktion

Die ganzen Einstellungsmöglichkeiten haben in der Übersicht eine kurze Beschreibung. Das ist neu und sehr sinnvoll. Somit hat der Anwender schon bevor er eine Einstellungsmöglichkeit mit der Computermaus anklickt, eine Vorstellung, was sich dahinter verbirgt.

Ziel der Einstellungsmöglichkeiten für Menschen mit Behinderungen ist es, dieser Personengruppe die Bedienung des Computers zu erleichtern.

Die Barrierefreiheit in Windows 11 finden Sie in „Einstellungen“ -> „Barrierefreiheit“.

Einstellungsmöglichkeiten zur Barrierefreiheit in Windows 11 — Einstellungsmöglichkeiten zur Barrierefreiheit im Betriebssystem Windows 11

„Barrierefreiheit bei Windows 11“ weiterlesen