Barrierefreie Softwareentwicklung mit Java und JavaFX nach EN 301 549 und WCAG 2.2 – Anleitung 2024

In diesem Blogartikel erkläre ich die barrierefreie Softwareentwicklung mit der Programmiersprache Java und dem  Framework JavaFX, das die plattformunabhängige Entwicklung von Anwendungen unterstützt.

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

Java ist eine Programmiersprache, mit der Software entwickelt werden kann. Diese Software ist plattformunabhängig, was bedeutet, dass sie auf allen Desktop-Betriebssystemen verwendet werden kann. In diesem Artikel wird erklärt, wie man barrierefreie Software mit Java entwickeln kann. Erfahren Sie in diesem Blogartikel, wie Sie barrierefreie Softwarelösungen mithilfe von JavaFX 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 die bewährten Praktiken für barrierefreie Softwareentwicklung und erfahren Sie, wie JavaFX 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 Java.

Wichtige Fakten zur Programmiersprache Java

Abschnitt: Wichtige Fakten zur Programmiersprache Java

Java ist eine äußerst populäre und weit verbreitete objektorientierte Programmiersprache, die von Sun Microsystems entwickelt wurde und heute von Oracle weiterentwickelt wird. Hier sind einige wichtige Fakten, die Java zu einer erstklassigen Wahl für die Softwareentwicklung machen:

Plattformunabhängigkeit: Java-Programme werden in Bytecode kompiliert, der auf der Java Virtual Machine (JVM) ausgeführt wird. Dadurch sind Java-Anwendungen auf verschiedenen Plattformen wie Windows, macOS und Linux lauffähig, ohne dass der Code neu geschrieben werden muss.

Einfache und klare Syntax: Java wurde entwickelt, um einfach zu lernen und zu lesen zu sein. Die Syntax ähnelt C++, was sie für viele Entwickler leicht verständlich macht.

Umfangreiche Standardbibliothek: Java bietet eine umfangreiche Standardbibliothek (Java Standard Edition), die viele nützliche Klassen und Funktionen für die Entwicklung verschiedenster Anwendungen enthält, von Desktop- über Web- bis hin zu mobilen Anwendungen.

Objektorientierte Programmierung: Java ist eine vollständig objektorientierte Sprache, was bedeutet, dass alles in Java ein Objekt ist. Dies fördert die Modularität, Flexibilität und Wiederverwendbarkeit des Codes.

Robust und sicher: Java verfügt über Mechanismen wie Garbage Collection und Ausnahmebehandlung, die zur Erstellung stabiler und sicherer Anwendungen beitragen. Java-Anwendungen sind weniger anfällig für Speicherlecks oder undefiniertes Verhalten.

Breite Einsatzbereiche: Java wird in verschiedenen Anwendungsbereichen eingesetzt, darunter Unternehmensanwendungen, Webanwendungen (mit Java EE), mobile Anwendungen (mit Android) sowie im Bereich der Spieleentwicklung.

Aktive Community und Unterstützung: Java hat eine riesige Entwicklergemeinschaft, die laufend neue Bibliotheken, Frameworks und Werkzeuge entwickelt. Es gibt zahlreiche Ressourcen, Tutorials und Foren, die Entwicklern helfen, ihre Java-Kenntnisse zu vertiefen.

Java ist eine vielseitige Sprache, die sowohl für Anfänger als auch für erfahrene Entwickler attraktiv ist. Durch seine Eigenschaften eignet sich Java gut für die Erstellung robuster, skalierbarer und plattformunabhängiger Anwendungen in verschiedenen Bereichen der Softwareentwicklung.

Betriebssystem, Entwicklungsumgebung, Java-Version, JavaFX

Softwareumgebung Im Einsatz
Betriebssystem Windows 11
Entwicklungsumgebung IntelliJ IDEA 2024.1 (Community Edition)
Programmiersprache Java Version 22.0.1
Framework JavaFX
Eingabemaske programmiert mit der Programmiersprache Java und dem Framework JavaFX um Daten zu einer Person einzugeben. Zu sehen sind 7 Eingabefelder und 2 Schaltflächen
Eingabemaske programmiert mit der Programmiersprache Java und dem Framework JavaFX um Daten zu einer Person einzugeben.

Was Programmieren wir?

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

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

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

Barrierefreie Softwareentwicklung mit Java und JavaFX – einzelne Prüfschritte im Code umgesetzt

Für Menschen die lieber ein Video anschauen, als den Blogartikel zu lesen, gibt es hier ein Video:

Screenreadertauglichkeit

Die Screenreadertauglichkeit wird explizit in der EN 301 549 nicht erwähnt, ist aber wichtig, damit blinde Menschen eine Java-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.

Die Screenreader lesen den Text vor, der mit setAccessibleText gesetzt wurde.

Java-Code

txtProperty.setAccessibleRole(AccessibleRole.TEXT_FIELD);
  txtProperty.setAccessibleText(fieldDescriptions[i]);
  btnSubmit.setAccessibleRole(AccessibleRole.BUTTON);
  btnSubmit.setAccessibleText("Inhalt des Formulares senden!");

Tastaturbedienbarkeit

EN 301 549 Prüfschritt 9.2.1.1 „Ohne Maus nutzbar“. Für eine barrierefreie Bedienung von Java-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.

Code Labels mit Eingabefelder verknüpfen

label = QLabel(prop)
line_edit = MyLineEdit()
label.setBuddy(line_edit)  # Verknüpfung von Label und Eingabefeld

Labels per Tastaturkürzel erreichbar machen

String[] properties = {"_Vorname", "_Nachname", "_Straße", "_PLZ", "_Ort", "_Telefon", "_E-Mail"};

Nach Drücken der Alt-Taste können die Labels mithilfe der entsprechenden Tastenkürzel angewählt werden. Durch die Verknüpfung mit den Eingabefeldern erhält das zugehörige Eingabefeld automatisch den Fokus. JavaFX-Buttons sind von Haus aus so, dass sie mit der Taste Enter ausgeführt werden können.

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.

Java-Code:

btnSubmit.getStyleClass().add("my-button"); 
txtProperty.getStyleClass().add("my-text-field");

CSS-Code:

.my-text-field:focused {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}
.my-button:focused {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}

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 Java-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 Java-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 Java-Anwendung haben die Bedienelemente eine Höhe von 3.5em was ausreichend ist.

Java-Code:

btnSubmit.getStyleClass().add("my-button"); 
txtProperty.getStyleClass().add("my-text-field");

CSS-Code:

.my-text-field {
    -fx-background-color: transparent;
    -fx-border-width: 1px;
    -fx-border-color: black;
    -fx-pref-height: 3.5em;
}

.my-button {
    -fx-background-color: #AAD3E7;
    -fx-border-width: 1px;
    -fx-border-color: black;
    -fx-pref-height: 3.5em;
}

Text auf 200% vergrößerbar + Benutzerdefinierte Einstellungen

Menschen mit einer Sehbehinderung passen im Betriebssystem die Schriftgröße an. JavaFX übernimmt Einstellungen des Betriebssystems, daher muss im Code nichts geschrieben werden, damit eine JavaFX-Anwendung für Menschen mit Sehbehinderung bedienbar ist.

Der ganze Java-Code

Hier kommt der ganze Java-Code:

package com.example.myformfx;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.AccessibleRole;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Screen;
import javafx.stage.Stage;
import java.util.Objects;

public class MyFormFX extends Application {

    private int fontSize = 12;

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Daten einer Person eingeben");

        VBox layout = new VBox(10);
        layout.setPadding(new Insets(10));

        GridPane formLayout = new GridPane();
        formLayout.setVgap(10);
        formLayout.setHgap(10);

        // Labels und Eingabefelder hinzufügen
        String[] properties = {"_Vorname", "_Nachname", "_Straße", "_PLZ", "_Ort", "_Telefon", "_E-Mail"};
        TextField[] textFields = new TextField[properties.length];
        String[] fieldDescriptions = {
                "Geben Sie den Vorname ein", "Geben Sie den Nachname ein", "Geben Sie die Straße ein",
                "Geben Sie die Postleitzahl ein", "Geben Sie den Ort ein", "Geben Sie die Telefonnummer ein",
                "Geben Sie die E-Mail-Adresse ein"
        };
        for (int i = 0; i < properties.length; i++) {
            Label lblProperty = new Label(properties[i]);
            TextField txtProperty = new TextField();
            txtProperty.getStyleClass().add("my-text-field"); // Füge eine CSS-Klasse hinzu
            txtProperty.setPromptText(fieldDescriptions[i]);
            txtProperty.setAccessibleRole(AccessibleRole.TEXT_FIELD);
            txtProperty.setAccessibleText(fieldDescriptions[i]);
            lblProperty.setLabelFor(txtProperty); // Verknüpfe das Label mit dem Textfeld
            lblProperty.setMnemonicParsing(true);
            txtProperty.setPrefHeight(Region.USE_COMPUTED_SIZE);
            GridPane.setHgrow(txtProperty, Priority.ALWAYS);
            formLayout.addRow(i, lblProperty, txtProperty);
            textFields[i] = txtProperty;
        }

        layout.getChildren().add(formLayout);

        // Button Abschicken
        Button btnSubmit = new Button("Abschicken");
        btnSubmit.setDefaultButton(true);
        btnSubmit.setPrefHeight(30);
        btnSubmit.setMaxWidth(Double.MAX_VALUE);
        btnSubmit.getStyleClass().add("my-button"); // Füge eine CSS-Klasse hinzu
        btnSubmit.setAccessibleRole(AccessibleRole.BUTTON);
        btnSubmit.setAccessibleText("Inhalt des Formulares senden!");
        btnSubmit.setOnAction(e -> submitForm());
        layout.getChildren().add(btnSubmit);

        // Button Programm beenden
        Button btnClose = new Button("Beenden");
        btnClose.setPrefHeight(30);
        btnClose.setMaxWidth(Double.MAX_VALUE);
        btnClose.getStyleClass().add("my-button"); // Füge eine CSS-Klasse hinzu
        btnClose.setAccessibleRole(AccessibleRole.BUTTON);
        btnClose.setAccessibleText("Programm beenden");
        btnClose.setOnAction(e -> closeApplication());
        layout.getChildren().add(btnClose);

        // Erstelle die Szene
        Scene scene = new Scene(layout);

        // Erhalte die Bildschirmauflösung
        Screen screen = Screen.getPrimary();
        double screenWidth = screen.getBounds().getWidth();
        double screenHeight = screen.getBounds().getHeight();

        // Setze die Größe der Szene auf die Bildschirmauflösung
        primaryStage.setScene(scene);
        primaryStage.setWidth(screenWidth);
        primaryStage.setHeight(screenHeight);
        // Maximiere das Fenster
        primaryStage.setMaximized(true);

        String cssPath = "file://" + Objects.requireNonNull(getClass().getResource("/com/example/myformfx/style.css")).getPath();
        scene.getStylesheets().add(cssPath);
        scene.getRoot().getStyleClass().add("my-scene");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    private void submitForm() {
        // Meldung anzeigen
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle("Formular abgeschickt");
        alert.setHeaderText(null);
        alert.setContentText("Formular wurde abgeschickt!");
        alert.showAndWait();
    }

    private void closeApplication() {
        System.exit(0);
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Der ganze CSS-Code

Hier der ganze CSS-Code:

.my-text-field {
    -fx-background-color: transparent;
    -fx-border-width: 1px;
    -fx-border-color: black;
    -fx-pref-height: 3.5em; /* Setze die Höhe auf 1.5-fache der Schriftgröße */
}

.my-text-field:focused {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}

.my-button {
    -fx-background-color: #AAD3E7;
    -fx-border-width: 1px;
    -fx-border-color: black;
    -fx-pref-height: 3.5em;
}

.my-button:focused {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}

Schlussbemerkung

Mit der Programmiersprache Java und dem Framework JavaFX ist es möglich, eine barrierefreie Software 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.