Zum Inhalt wechseln

Zugängliche Layouts in Mendix erstellen—Best Practices 

Technology

Feb 3, 2021 - 4 minuten lesen

1 1356 Accessibility Mendix Blog Zewnetrzny 2881 1449 Resized
Wojciech Machniak Senior UI Entwickler

Ist ein erfahrener Senior UI Entwickler bei Objectivity, der sich auf Low-Code-Plattformen und Lösungen spezialisiert hat. Er bringt seinen Kollegen der Rapid Development Abteilung bei, wie man Layouts erstellt und in den richtigen Stilen schreibt. Er beteiligt sich an der Erstellung von Widgets und Erweiterungen auf Low-Code-Plattformen und teilt sein Wissen auf verschiedenen Konferenzen und Meetups mit anderen. 

Alle Beiträge von Wojciech anzeigen
V01 DE 2053 Cloud Checklist Res 385X300

Teilen

Inhaltsverzeichnis

  1. Alternativer Text für Bilder 
  2. Formulare 
  3. Seiten-Titel
  4. Tastatur-Navigation 
  5. Icon Button 
  6. Zusammenfassung

Es gibt viele Anleitungen zur Barrierefreiheit im Internet und die Dokumentation selbst ist umfangreich und geht über den Rahmen dieses Artikels hinaus. In diesem Text konzentrieren wir uns auf die häufigsten Probleme und Fehler. 

Alternativer Text für Bilder 

Der alternative Text und seine korrekte Verwendung ist eine der größten Herausforderungen bei der Zugänglichkeit von Webanwendungen. Dies ist besonders wichtig für Blinde, welche die Bilder nicht sehen können. Der alternative Text wird auf ihren Bildschirmlesern abgespielt. Es ist auch wichtig, an Personen zu denken, die eine langsame Internetverbindung haben und die Bilder in ihren Browsern deaktiviert haben, um die Ladezeit zu verkürzen.

Der alternative Text ist hauptsächlich anwendbar, wenn wir über Grafiken sprechen. Mendix hat eine Komponente namens "Image", die solchen Text eingeben kann. Wir tun dies in "Eigenschaften" der Komponente "Image" im Abschnitt "Allgemein".

Es wird empfohlen, dass ein solcher Text das Bild genau beschreibt. Wenn das Bild ausschließlich zu Dekorationszwecken hinzugefügt wird, können Sie es weglassen. Mendix fügt die entsprechenden ARIA-Rollen für uns hinzu, die den Bildschirmlesern mitteilen, dass das Bild ignoriert werden sollte und keine semantische Bedeutung hat. 

Formulare 

Formulare sind in den meisten von uns entwickelten Anwendungen enthalten und Mendix erfüllt alle Anforderungen hinsichtlich ihrer Zugänglichkeit. Es wird empfohlen sicherzustellen, dass jedes Formularelement seine Bezeichnung hat. Sie können es z.B. im Steuerelement "Eingabe" unter "Eigenschaften" im Abschnitt "Beschriftung" ändern Sie die Option "Beschriftung anzeigen" in "Ja". Bei Pflichtfeldern sollten Sie das Attribut "Erforderlich" mit einer entsprechenden Meldung festlegen, die den aufgetretenen Fehler beschreibt.

In einer der neuesten Versionen von Mendix Studio Pro 8.12 wurden zusätzliche Verbesserungen hinsichtlich der Barrierefreiheit vorgenommen. Wenn Sie die dem Formularfeld zugeordnete Beschriftung nicht anzeigen oder nur das Attribut "Platzhalter" verwenden, können Sie eine Beschreibung hinzufügen, die bei Verwendung eines Bildschirmlesegeräts angezeigt wird. Zusätzlich gibt es die Option "Autocomplete". Diese neuen Funktionen finden Sie unter "Eigenschaften" im Abschnitt "Barrierefreiheit". 

Seiten-Titel

Der Titel der Seite ist eines der häufig übersehenen Elemente der in Mendix entwickelten Anwendungen. Beim Erstellen einer neuen Seite in Mendix wird ihr automatisch ein Titel mit dem Namen "Neue Seite" zugewiesen. Leider liefert es keine wichtigen Informationen für eine Person mit Einschränkungen, die einen Bildschirmleser verwendet. Der Titel kann einfach unter "Eigenschaften" im Abschnitt "Allgemein" festgelegt oder mit Microflow in einer Aktivität namens "Seite anzeigen" überschrieben werden.

Es ist auch wichtig, den Haupttitel für die gesamte Anwendung festzulegen. Sie können dies in den Navigationseinstellungen tun, indem Sie den "Anwendungstitel" ändern. Mendix wiederholt den Haupttitel auf jeder Seite.

Tastatur-Navigation 

Für viele Benutzer ist eine Tastatur die einzige Möglichkeit, mit dem sie in der Anwendung navigieren können. Aus verschiedenen Gründen verwenden sie die Maus nicht und es ist die Aufgabe der Entwickler, dies zu ermöglichen. Alle interaktiven Elemente wie Links, Schaltflächen, Formularelemente und Modalitäten sollten nur über die Tastatur zugänglich sein.

Wenn die Anwendung über eine Tastatur navigiert wird, wird die Reihenfolge durch das tabindex-Attribut bestimmt, dem Sie einen Wert zuweisen können, welcher wiederum die Reihenfolge der Navigation bestimmt. Wenn Sie das tabindex-Attribut auf -1 setzen, schließen Sie das Element von der Tastaturnavigation aus.

Nach dem Einrichten der Tabindexe sollten Sie überprüfen, ob auf die Anwendung wie vorgesehen zugegriffen werden kann. Sie können einfach versuchen, es ohne Verwendung der Maus durchzugehen, um Fehler zu identifizieren und zu beseitigen.

Die meisten Steuerelemente in Mendix haben das tabindex-Attribut. Sie können dieses Attribut unter "Eigenschaften" im Abschnitt "Allgemein" festlegen, um die richtige Navigationsreihenfolge zu erhalten. Wenn Sie den Standardwert 0 beibehalten, wird die Reihenfolge durch die Position des Artikels auf der Seite bestimmt.

Verfügbar ist:

  • Tab - geht weiter auf das nächste klickbare Element 
  • Shift + Tab - geht zurück auf das vorherige klickbare Element
  • Leertaste - ändert den Status des Elements (z. B. Kontrollkästchen), aktiviert das Element (Schaltfläche), schließt oder öffnet das Element (z. B. Dropdown)
  • Pfeile innerhalb der Steuerelemente bewegen
  • (z. B. Tab oder Dropdown-Option ändern)
  • Esc – Schließen von Elementen (z. B. modales, erweitertes Dropdown)
  • Enter - Aktiviert einen Link oder eine Schaltfläche und sendet ein Formular 

Icon Button 

Eine weitere wichtige Sache, die wir verbessern können, sind die Schaltflächen. In einigen Fällen haben sie nur Symbole und keine Beschriftungen. Eine solche Schaltfläche gibt Bildschirmlesern keine Informationen, daher sollten man immer eine genaue Beschreibung hinzufügen. In Mendix können Sie dies tun, indem Sie den gewünschten Wert in das Feld "QuickInfo" unter "Eigenschaften" eingeben. Diese Option finden Sie im Abschnitt "Allgemein". Mendix fügt der Schaltfläche die entsprechenden ARIA-Attribute hinzu. Es trägt das ARIA-Label mit der Beschreibung ein, die Sie im Feld "Tooltip" eingegeben haben. Mit dieser kleinen Änderung werden die Schaltflächen mit den Symbolen zugänglich.

   Zusammenfassung

Mendix selbst bietet bereits starke Unterstützung in Bezug auf die Barrierefreiheit im Internet. Die Entwickler müssen sich nur an die Grundlagen erinnern, die in den Richtlinien angegebenen Anforderungen befolgen und ihre Anwendungen ab den ersten Tagen der Entwicklung testen. Zum Testen empfehlen wir die Verwendung des in Google Chrome integrierten Lighthouse-Tools. Es kann einen Bericht zur Barrierefreiheit erstellen und Verbesserungsmöglichkeiten angeben. Darüber hinaus sollten Sie die Funktionalität Ihrer App mit dem Nur-Tastatur-Setup testen.

Es ist erwähnenswert, dass sich die Mendix-Plattform selbst schnell entwickelt und Mendix Studio Pro um weitere Verbesserungen erweitert wird, damit man die Kriterien für die Barrierefreiheit im Internet erfüllen kann. Deshalb sollten Sie über die neuen Versionen der Plattform im AppStore auf dem Laufenden bleiben. Lesen Sie unbedingt die Versionshinweise und halten Sie sich an den Mendix Accessibility Report, in dem Sie aktuelle Informationen zu Web Accessibility in Mendix finden.

Dieser Artikel wurde von Objectivity ins Deutsche übersetzt. 

 

 

V01 DE 2053 Cloud Checklist Res 385X300
Wojciech Machniak Senior UI Entwickler

Ist ein erfahrener Senior UI Entwickler bei Objectivity, der sich auf Low-Code-Plattformen und Lösungen spezialisiert hat. Er bringt seinen Kollegen der Rapid Development Abteilung bei, wie man Layouts erstellt und in den richtigen Stilen schreibt. Er beteiligt sich an der Erstellung von Widgets und Erweiterungen auf Low-Code-Plattformen und teilt sein Wissen auf verschiedenen Konferenzen und Meetups mit anderen. 

Alle Beiträge von Wojciech anzeigen

Was Sie noch interesieren könnte

Kontakt

Starten Sie Ihr Projekt mit Objectivity

CTA Pattern - Contact - Middle

Wir verwenden erforderliche Cookies für die Funktionalität unserer Website, sowie optionale Cookies zur Analyse, Leistung und/oder für Marketingzwecke. Das Sammeln und Berichten von Information durch optionale Cookies hilft uns dabei unsere Website zu verbessern und Ihnen Informationen über uns und unser Angebot zukommen zu lassen. Weitere Informationen und das Aussetzen von Cookies, finden Sie in unseren Cookie-Einstellungen.