Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz (KI) – Anleitung

Barrierefreiheit im Web ist wichtig – denn alle Menschen sollen das Internet nutzen können, unabhängig von körperlichen Einschränkungen. In diesem Artikel zeige ich, wie man mit Hilfe künstlicher Intelligenz (KI) eine barrierefreie Navigation für eine Website erstellen kann. Schritt für Schritt erkläre ich, was eine Webseiten-Navigation ist, warum sie barrierefrei sein sollte und wie ein sogenannter KI-Prompt aussieht. Anschließend sehen wir uns den automatisch generierten HTML- und CSS-Code an. So kann jeder nachvollziehen, wie moderne Technik bei der Webentwicklung hilft – ganz ohne Programmierkenntnisse.

Was ist eine Webseiten-Navigation?

Die Navigation ist ein zentrales Element jeder Website. Sie dient dazu, den Besucher:innen Orientierung zu geben
und ihnen zu ermöglichen, sich schnell und gezielt durch die Inhalte zu bewegen. Typischerweise besteht sie aus Links
wie „Startseite“, „Über uns“, „Kontakt“ oder weiteren Unterseiten und ist meist im Kopfbereich oder in der Seitenleiste
einer Website zu finden.

Eine gut strukturierte Navigation verbessert nicht nur die Nutzerfreundlichkeit, sondern ist auch entscheidend für die
Zugänglichkeit – besonders für Menschen mit Behinderungen.

Warum ist die Webseiten-Navigation barrierefrei?

Eine barrierefreie Navigation stellt sicher, dass alle Menschen – unabhängig von körperlichen oder technischen Einschränkungen – eine Website bedienen können. Dazu zählen u.?a.:

  • Tastaturbenutzer:innen, die nicht mit der Maus navigieren können
  • Screenreader-Nutzer:innen, die sich Inhalte vorlesen lassen
  • Menschen mit Sehbehinderungen, die auf visuelle Kontraste und Fokusanzeigen angewiesen sind

Eine barrierefreie Navigation erfüllt daher bestimmte Kriterien:

  • Sie ist per Tastatur zugänglich (z.B. mit der Tabulatortaste)
  • Sie nutzt semantisch korrektes HTML (z.B. <nav>, <ul>, <li>)
  • Sie verwendet sichtbare Fokusanzeigen für Orientierung
  • Sie unterstützt Screenreader mit entsprechenden ARIA-Labels
  • Sie nutzt ggf. Tastenkürzel für schnellere Bedienung
Ein Männchen, eine Webseite mit barrierefreier Navigation, ein KI-Prompt, ein Lautsprecher und eine Wolke in der AI steht
Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz

„Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz (KI) – Anleitung“ weiterlesen

HTML lernen leicht gemacht: Links und Navigation

In diesem Blogartikel erkläre ich was Links bzw. Hyperlinks sind. Ebenso wird erklärt was eine Navigation ist.

Links bzw. Hyperlinks (<a href=““>)

Links bzw. Hyperlinks sind grundlegende Elemente in HTML, die es ermöglichen, von einer Seite zu einer anderen zu wechseln. Sie werden mit dem <a>-Tag erstellt. Der href-Attribut gibt die Adresse (URL) an, zu der der Link führt.

Eine URL (Uniform Resource Locator) ist eine Zeichenfolge oder eine Adresse, die verwendet wird, um Ressourcen im Internet zu identifizieren und zu lokalisieren. Sie dient dazu, spezifische Inhalte wie Webseiten, Bilder, Videos oder Dateien im Netzwerk zu finden.

Beispiel:

<a href="https://www.beispielseite.de">Besuche Beispielseite</a>

„HTML lernen leicht gemacht: Links und Navigation“ weiterlesen

Smartphone-Navigation für Blinde und Sehbehinderte wird entwickelt

Das neuartige Navigationssystem für Blinde und Sehbehinderte mit dem Namen „m4guide“ wird in Berlin entwickelt.

Der Beauftragte der Bundesregierung für die Belange behinderter Menschen hat heute die Entwicklung einer neuen Smartphone-Navigation für Blinde und Sehbehinderte begrüßt. „Es gibt bereits erste ermutigende Erfahrungen bei der Entwicklung von Navigationsmöglichkeiten von Smartphones für Menschen mit Behinderungen. So greift das Projekt Erfahrungen aus dem westfälischen Soest auf und wird sie weiterentwickeln“, so Hubert Hüppe.

Dass Bundesministerium für Wirtschaft und Technologie hat die Stadt Berlin beauftragt diese Smartphone-Navigation für Blinde und Sehbehinderte zu entwickeln. Die Smartphone-Navigation „m4guide“ navigiert Menschen mit einer Sehnehinderung und Blinde zu Fuß und mit öffentlichem Verkehr zum Ziel. Dies soll auch innerhalb von Bahnhöfen funktionieren.

Neuerungen in dieser App sind:
– eine punktgenaue Ortung im Blindenstockradius,
– eine Ortung und Navigation auch innerhalb von Bahnhöfen und öffentlichen Gebäuden,
– die Berücksichtigung von Hindernissen und Gefahrenstellen

Diese App wird das Leben von Blinden und Sehbehinderten enorm erleichtern.
Leider konnte ich nicht herausfinden ob es die App auch für Android gibt. Ich werde Sie auf dem laufenden halten.