Barrierefreie Softwareentwicklung mit HTML, CSS und JavaScript nach EN 301 549 und WCAG 2.2 – Anleitung 2024

In diesem Blogartikel erkläre ich die barrierefreie Softwareentwicklung mit HTML,CSS und der Programmiersprache JavaScript

Betriebssystem, Entwicklungsumgebung, Programmiersprache, Framework

Softwareumgebung Im Einsatz
Betriebssystem Windows 11
Entwicklungsumgebung Visual Studio Code Version 1.89
Programmiersprache Javascript
Framework –

Barrierefreie Softwareentwicklung mit JavaScript: Was erwartet Sie in diesem Artikel?

In diesem Blogartikel erfahren Sie, wie Sie barrierefreie Softwarelösungen mithilfe von JavaScript entwickeln können. Als Experte teile ich wertvolle Tipps und Techniken mit Ihnen, um sicherzustellen, dass Ihre Anwendungen für alle Benutzer zugänglich und nutzbar sind. Entdecken Sie bewährte Praktiken für barrierefreie Softwareentwicklung und erfahren Sie, wie JavaScript Ihnen dabei helfen kann, die Benutzererfahrung für alle zu verbessern. Starten Sie jetzt und gestalten Sie Ihre Anwendungen inklusiver!

Barrierefreie Softwareentwicklung – Eine Einführung

Barrierefreie Softwareentwicklung bedeutet, dass Software so gestaltet wird, dass sie von allen Menschen genutzt werden kann, unabhängig von etwaigen Behinderungen oder körperlichen Einschränkungen. In diesem Blogartikel geht es um barrierefreie Softwareentwicklung mit der Programmiersprache JavaScript.

Wichtige Fakten zur Programmiersprache JavaScript

JavaScript ist eine äußerst vielseitige und weit verbreitete Programmiersprache, die hauptsächlich für die Entwicklung von dynamischen Webseiten und Webanwendungen verwendet wird. Hier sind einige wichtige Fakten, die JavaScript zu einer führenden Wahl für die Webentwicklung machen:

Clientseitige Skriptsprache: JavaScript wird hauptsächlich im Webbrowser ausgeführt und ermöglicht die Interaktion mit HTML-Dokumenten. Es ist die Sprache der Wahl für die Entwicklung von interaktiven und reaktiven Benutzeroberflächen.

Plattformunabhängigkeit: JavaScript ist plattformunabhängig und wird von den meisten modernen Webbrowsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Entwickler können JavaScript für verschiedene Betriebssysteme und Geräte schreiben, ohne den Code anpassen zu müssen.

Leicht zu erlernen: JavaScript hat eine einfache und flexible Syntax, die leicht zu erlernen ist. Es ähnelt anderen Programmiersprachen wie Java und C, was die Einstiegshürden für Entwickler senkt.

Dynamische Typisierung: JavaScript ist dynamisch typisiert, was bedeutet, dass Variablen keine spezifischen Datentypen haben und zur Laufzeit Typen automatisch konvertiert werden können. Dies erleichtert die Entwicklung, kann aber auch zu Fehlern führen, wenn nicht sorgfältig programmiert wird.

Eventbasierte Programmierung: JavaScript basiert auf einem ereignisgesteuerten Modell, das es ermöglicht, auf Benutzerinteraktionen wie Mausklicks und Tastatureingaben zu reagieren. Dies macht JavaScript ideal für die Entwicklung interaktiver Webanwendungen.

Umfangreiche Ökosysteme: JavaScript verfügt über ein großes Ökosystem von Frameworks und Bibliotheken wie React, Angular, Vue.js und Node.js. Diese Tools ermöglichen die Entwicklung von komplexen Anwendungen für Frontend-, Backend- und sogar mobile Plattformen.

Asynchrone Programmierung: JavaScript unterstützt asynchrone Programmierung mit Promises und async/await, was die Effizienz verbessert, indem Blockaden bei der Ausführung von Code vermieden werden.

Ständige Weiterentwicklung: Die JavaScript-Community ist äußerst aktiv und treibt die Sprache kontinuierlich voran. Neue Standards wie ES6 (ECMAScript 2015) bringen regelmäßig neue Funktionen und Verbesserungen in die Sprache.

JavaScript ist eine unverzichtbare Sprache für die moderne Webentwicklung und wird zunehmend auch außerhalb von Webbrowsern eingesetzt. Mit seinen vielfältigen Anwendungsmöglichkeiten und dem großen Entwickler-Ökosystem ist JavaScript eine ausgezeichnete Wahl für die Erstellung ansprechender und interaktiver Webanwendungen.

Was Programmieren wir?

Wir programmieren eine Eingabemaske, in die der Anwender folgende Daten eingeben kann:

  • Vorname
  • Nachname
  • Strasse
  • Postleitzahl
  • Ort
  • Telefonnummer
  • E-Mailadresse

Eingabemaske für Postanschrift, Telefonnummer und Mailadresse einer Person programmiert mit HTML, CSS und Javascript

Nach welchen Richtlinien programmieren wir barrierefrei?

Was sind Richtlinien für barrierefreie Programmierung? Damit eine Software, egal mit welcher Programmiersprache sie entwickelt wird, barrierefrei programmiert werden kann, bedarf es Richtlinien. Die Richtlinien sorgen dafür, dass Menschen mit unterschiedlichen Behinderungen oder anderen körperlichen Einschränkungen eine Software bedienen können.

Wenn eine Software für ein europäisches Land barrierefrei programmiert wird, sollte die Richtlinie EN 301 549 verwendet werden. Hier ein Link zu den Prüfschritten der EN 301 549: BITV-Test / EN 301 549 (Web)Prüfschritte

Wenn eine Software für ein nicht europäisches Land barrierefrei programmiert werden soll, sollte die Richtlinie WCAG 2.2 verwendet werden. Hier ein Link zu den Prüfschritten der WCAG 2.2: Web Content Accessibility Guidelines (WCAG) 2.2

Weil die EN 301 549 Menschen mit bestimmten körperlichen Beeinträchtigungen ausschließt, verwenden wir beide Richtlinien für unsere barrierefreie JavaScript-Software.

Barrierefreie Softwareentwicklung mit HTML, CSS und JavaScript – einzelne Prüfschritte im Code umgesetzt

Für Menschen die lieber ein Video anschauen als Text zu lesen gibt es dieses YouTube-Video von mir: 

Screenreadertauglichkeit

Die Screenreadertauglichkeit wird explizit in der EN 301 549 nicht erwähnt, ist aber wichtig, damit blinde Menschen eine Web-Anwendung bedienen können. Die JavaFX Bedienoberfläche muss Texte enthalten, die beschreiben, was auf der Oberfläche zu sehen ist. Diese Texte werden dann von einem Screenreader vorgelesen.

Bei Bedienelementen müssen Sie mit dem Attribut aria-label einen Text hinterlegen der dem blinden Anwender beschreibt, welche Funktion das Bedienelement hat.

HTML-Code:

<input type="text" id="edt_vorname" name="vorname" placeholder="Bitte geben Sie einen Vornamen ein"  aria-label="Bitte geben Sie einen Vornamen ein"/>

<button type="submit" aria-label="Eingaben abschicken">Abschicken</button>

Tastaturbedienbarkeit

EN 301 549 Prüfschritt 9.2.1.1 „Ohne Maus nutzbar“. Für eine barrierefreie Bedienung von JavaFX-Anwendungen durch blinde und sehbehinderte Menschen ist es wichtig, dass alle Bedienelemente mithilfe der Tastatur erreichbar sind. Eine weitere Verbesserung der Tastaturbedienbarkeit kann durch die Nutzung von Tastenkombinationen für Eingabefelder erreicht werden. In dieser Web-Anwendung habe ich die Tastaturkürzel mit Javascript festgelegt

Javascript-Code:

document.addEventListener('keydown', function(event) {
    const key = event.key.toLowerCase();
    
    // Map accesskey to input field id
    const inputMap = {
        'v': 'edt_vorname',
        'n': 'edt_nachname',
        's': 'edt_strasse',
        'p': 'edt_plz',
        'o': 'edt_ort',
        't': 'edt_telefon',
        'e': 'edt_email'
    };
    
    // Check if the key pressed is mapped to an input field
    if (inputMap.hasOwnProperty(key)) {
        const inputId = inputMap[key];
        const inputField = document.getElementById(inputId);
        
        if (inputField) {
            inputField.focus(); // Set focus on the input field
            event.preventDefault(); // Prevent default behavior of the accesskey
        }
    }
});

Damit für den Anwender sichtbar ist, dass es Tastenkürzel gibt, werden die Anfangsbuchstaben der Labels unterstrichen dargestellt. Dies kann mit CSS umgesetzt werden.

CSS-Code:

label::first-letter {
   text-decoration: underline;    
}

Aktuelle Position des Fokus deutlich

EN 301 549 Prüfschritt 9.2.4.7 Aktuelle Position des Fokus deutlich. Für Menschen mit einer Sehbehinderung ist es wichtig, dass sehr gut sichtbar ist, welches Bedienelement den Eingabefokus hat. Dies kann erreicht werden, indem das aktive Bedienelement eine gelbe Hintergrundfarbe bekommt.

CSS-Code:

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
button:focus {
  color: #000;
  background-color: yellow;
}

Kontraste von Texten ausreichend

EN 301 549 Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend. Für Menschen mit einer Farbfehlsichtigkeit ist es wichtig, dass genug Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe besteht. In der JavaFX-Anwendung musste keine Farbanpassung gemacht werden, da die Standardfarben barrierefrei sind. Dies kann mit der Kostenlosen Software Colour Contrast Analyzer (CCA) Link: Colour Contrast Analyzer (CCA) überprüft werden. Hier ein Video von mir wie der Colour Contrast Analyzer eingesetzt werden kann: In der Web-Anwendung musste keine Farbanpassung gemacht werden. Die Standardfarben sind barrierefrei.

Mindestgröße für Bedienelemente

In der Richtlinie EN 301 549 fehlt dieser Prüfschritt, wodurch bestimmte Menschen ausgeschlossen werden. Hingegen ist dieser Prüfschritt in der WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) enthalten und auch in den Google-Richtlinien „Apps barrierefrei gestalten“ unter dem Prüfschritt „Große, einfache Steuerelemente verwenden“ zu finden. Besonders für Menschen mit eingeschränkter Handfunktion, beispielsweise nach einem Schlaganfall, ist es wichtig, dass Schaltflächen eine Mindestgröße haben. Die WCAG empfehlen eine Größe von 24×24 Pixeln, während Google eine Mindesthöhe von etwa 3,5 REM (Fontgröße) empfiehlt. Diese Richtlinien setze ich bei der Entwicklung meiner barrierefreien Progressive Web Apps um, und sie haben sich in der Praxis bewährt. In dieser Web-Anwendung haben die Bedienelemente eine Höhe von 3.5rem. Dies wird mit CSS umgesetzt.

CSS-Code:

input[type="text"],
input[type="tel"],
input[type="email"],
button {
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    height: 3.5rem;
}

Text auf 200% vergrößerbar + Benutzerdefinierte Einstellungen

Menschen mit einer Sehbehinderung passen bei einer Web-Anwendung mit dem Zoom im Browser die Schriftgröße an. Mit CSS muss darauf geachtet werden, dass nach einstellen des Browser-Zooms auf 200 alle Bedienelemente und Beschriftungen gut sichtbar sind und es keine Überlappungen gibt.

Bei dieser Webanwendung habe ich den Browser-Zoom mit 200% getestet und alles war gut sichtbar.

Der ganze Code: HTML, CSS und Javascript

Der ganze Code: HTML, CSS und Javascript

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Barrierefreie Softwareentwicklung mit HTML, CSS und Javascript</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <header>
        <h1>Barrierefreie Softwareentwicklung mit HTML, CSS und Javascript</h1>
    </header>
    
    <main>
        <form>
            <label for="edt_vorname">Vorname:</label>
            <input type="text" id="edt_vorname" name="vorname" placeholder="Bitte geben Sie einen Vornamen ein"  aria-label="Bitte geben Sie einen Vornamen ein"/>
            
            <label for="edt_nachname">Nachname:</label>
            <input type="text" id="edt_nachname" name="nachname" placeholder="Bitte geben Sie einen Nachnamen ein"  aria-label="Bitte geben Sie einen Nachnamen ein"/>
            
            <label for="edt_strasse">Straße:</label>
            <input type="text" id="edt_strasse" name="strasse" placeholder="Bitte geben Sie einen Straßennamen ein" aria-label="Bitte geben Sie einen Straßennamen ein"/>
            
            <label for="edt_plz">PLZ:</label>
            <input type="text" id="edt_plz" name="plz" placeholder="Bitte geben Sie eine Postleitzahl ein"  aria-label="Bitte geben Sie eine Postleitzahl ein"/>
            
            <label for="edt_ort">Ort:</label>
            <input type="text" id="edt_ort" name="ort" placeholder="Bitte geben Sie einen Ortsnamen ein" aria-label="Bitte geben Sie einen Ortsnamen ein"/>
            
            <label for="edt_telefon">Telefon:</label>
            <input type="tel" id="edt_telefon" name="telefon" placeholder="Bitte geben Sie eine eine Telefnummer ein" aria-label="Bitte geben Sie eine eine Telefnummer ein"/>
            
            <label for="edt_email">E-Mail:</label>
            <input type="email" id="edt_email" name="email"  placeholder="Bitte geben Sie eine E-Mailadresse ein" aria-label="Bitte geben Sie eine E-Mailadresse ein"/>
            
            <button type="submit" aria-label="Eingaben abschicken">Abschicken</button>
            <button type="button" aria-label="Programm beenden">Beenden</button>
        </form>
    </main>
    <script src="app.js" defer></script>
</body>
</html>

CSS-Code

html {
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
      Arial, sans-serif, "Apple Color Emoij", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  

body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
button {
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    height: 3.5rem;
}

button {
    background-color: #0000ff;
    color: #fff;
    border: none;
    cursor: pointer;
}

/*     B a r r i e r e f r e i h e i t  */

label::first-letter {
   text-decoration: underline;    
  }
  
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
button:focus {
  color: #000;
  background-color: yellow;
}

Javascript-Code

document.addEventListener('keydown', function(event) {
    const key = event.key.toLowerCase();
    
    // Map accesskey to input field id
    const inputMap = {
        'v': 'edt_vorname',
        'n': 'edt_nachname',
        's': 'edt_strasse',
        'p': 'edt_plz',
        'o': 'edt_ort',
        't': 'edt_telefon',
        'e': 'edt_email'
    };
    
    // Check if the key pressed is mapped to an input field
    if (inputMap.hasOwnProperty(key)) {
        const inputId = inputMap[key];
        const inputField = document.getElementById(inputId);
        
        if (inputField) {
            inputField.focus(); // Set focus on the input field
            event.preventDefault(); // Prevent default behavior of the accesskey
        }
    }
});

Schlussbemerkung

Mit der Programmiersprache JavaScript und HTML, CSS ist es möglich, eine barrierefreie Software als Web-Anwendung zu entwickeln nach der EN 301 549 und der WCAG 2.2 .

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 .

Zum Weiterlesen

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.