Zum Inhalt wechseln

Mendix – Eine Einführung in die Web Accessibility

Technology

3 Februar 2021 - 4 Minuten lesen

Mendix Accessibility 416X300
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

1394 DE Resources Thumbs

Teilen

Inhaltsverzeichnis

  1. Was ist Web Accessibility? 
  2. Warum Web Accessibility? 
  3. Web Accessibility Richtlinien 
  4. Zusammenfassung

Auf den ersten Blick scheint Web Accessibility ein herausforderndes Thema zu sein, insbesondere wenn es um Low-Code-Technologien geht. In diesem Artikel möchte ich das Thema Barrierefreiheit von Webseiten / Webanwendungen auf der Mendix-Plattform vorstellen und Richtlinien vorstellen, mit denen Sie Anwendungen so erstellen können, dass sie für Menschen mit verschiedenen Einschränkungen besser zugänglich sind.

 Was ist Web Accessibility? 

Das Konzept der Barrierefreiheit im Internet basiert auf der Anpassung von Webseiten und Anwendungen, damit diese von möglichst vielen Personen verwendet werden können. Wenn wir über Behinderungen sprechen, beziehen wir uns nicht nur auf Gesundheitszustände. Der Umfang dieses Artikels umfasst auch Personen, die mobile Geräte verwenden oder eine langsame Internetverbindung haben. Im Wesentlichen geht es darum, Benutzer unabhängig von ihren Einschränkungen nicht auszuschließen. 

Warum Web Accessibility? 

Warum sollten Sie sich auf Web Accessibility konzentrieren? Hier sind drei wichtige Punkte zu beachten:

  • Es ermöglicht Menschen mit Behinderungen, das Internet zu nutzen, und hilft ihnen, sich aktiv an der Gesellschaft zu beteiligen. Es ist erwähnenswert, dass sich die Anforderungen an die Barrierefreiheit häufig mit Best Practices für die Erstellung von Webseiten und Webanwendungen überschneiden, z. B. RWD (Responsive Web Design), Anwendungsdesign, Nutzer-Probleme oder SEO (Search Engine Optimization).
  • In bestimmten Fällen können Barrierefreiheitsstandards gesetzlich vorgeschrieben sein. Zum Beispiel, wenn Sie Anwendungen für den öffentlichen Sektor entwickeln oder Regierungswebseiten entwerfen.
  • Die Verwendung von semantischem HTML-Code verbessert die Benutzerfreundlichkeit und die Suchmaschinenoptimierung und erleichtert das Auffinden Ihrer Webseite mithilfe von Suchmaschinen.

Web Accessibility Richtlinien 

Um sicherzustellen, dass Webseiten und Webanwendungen für jeden Benutzer zugänglich sind, sollten Designer und Entwickler die Richtlinien für die Barrierefreiheit digitaler Produkte befolgen. Die WCAG (Web Accessibility Guidelines) sind eine Reihe von Grundsätzen für die Erstellung barrierefreier digitaler Produkte. Sie können in drei Ebenen unterteilt werden:

 

Level A 

Dies ist die Mindeststufe, welche die grundlegendsten Funktionen der Barrierefreiheit enthält. Wenn eine App die Anforderungen nicht erfüllt, haben einige Benutzergruppen überhaupt keinen Zugriff auf Informationen.

Achten Sie als Entwickler besonders auf folgendes:

  • Aktivieren der Navigation auf der Seite nur mithilfe der Tastatur.
  • Sicherstellen, dass keine automatische Aktion ausgeführt werden kann, nachdem Sie "Fokus" auf ein Element gesetzt haben.
  • Hinzufügen eines Links "Skip to Content", um die sich wiederholenden Elemente auf allen Unterseiten zu überspringen.
  • Stellen Sie sicher, dass der Zweck jedes Links anhand seines Textes definiert werden kann (wenn dies nicht möglich ist, fügen Sie visuell verborgenen Inhalt hinzu oder verwenden Sie die ARIA-Attribute).
  • Beseitigen von Elementen, die in einer Sekunde mehr als dreimal aufblinken.
  • Anzeigen von Dateneingabefehlern für die Benutzer in den Formularfeldern.
  • Lesen Sie die detaillierten Anforderungen, um Audio- / Videoinhalte auf der Webseite ordnungsgemäß vorzubereiten: 1.2.1, 1.2.2, 1.2.3, 1.4.2.
  • Stellen Sie sicher, dass die hinzugefügten Tastenkombinationen den Anforderungen 2.1.4 und 2.5.1 entsprechen.

Mit Hilfsmitteln überprüfte Elemente:

  • Alle Seiten müssen Sprache und Titel definiert haben.
  • Die Formularfelder müssen eine Beschriftung oder eine Anweisung haben, z.B. <label>.
  • Alle nicht-textuellen Inhalte müssen eine Textalternative haben, mit Ausnahme der hier beschriebenen Situationen.

Wichtig!

  • Detaillierte Richtlinien und Möglichkeiten zur Implementierung der einzelnen Spezifikationen finden Sie in der Dokumentation unter diesem Link (englische Version). 

Level AA 

Dies ist die empfohlene Stufe, mit der die häufigsten Zugänglichkeitsprobleme gelöst werden können, welche für Menschen mit Beeinträchtigungen zutreffen. Wenn eine App diese Kriterien nicht erfüllt, haben bestimmte Personengruppen möglicherweise Schwierigkeiten auf Informationen zuzugreifen.

Achten Sie als Entwickler besonders auf:

  • Die Reaktionsfähigkeit der Webseite.
  • Stellen Sie sicher, dass der Inhalt der Seite nicht auf eine einzelne Anzeige beschränkt ist.
  • Hinzufügen eines sichtbaren "Fokus" zu allen anklickbaren Elementen.
  • Stellen Sie sicher, dass die Seite beim Vergrößern des Inhalts (Strg +) gut und klar aussieht (bis zu 200%).
  • Informieren Sie den Benutzer, welcher unterstützende Technologien verwendet, über den dynamisch aktualisierten Inhalt, ohne einen "Fokus" auf diese Elemente legen zu müssen.
  • Stellen Sie sicher, dass alle Inhalte in einer anderen Sprache mit dem LANG-Attribut gekennzeichnet sind.

Mit Hilfsmitteln überprüfte Elemente:

  • Kontrast

Wichtig! 

  • Um die Barrierefreiheit im Internet auf Stufe AA sicherzustellen, müssen alle Richtlinien der Stufe A erfüllt sein.
  • Detaillierte Richtlinien und Möglichkeiten zur Implementierung der einzelnen Punkte finden Sie in der Dokumentation unter diesem Link (englische Version).

 Level AAA  

Das Komfortniveau (AAA) ist das höchste von der WCAG festgelegte Maß an Zugänglichkeit. In der Praxis ist dies schwierig zu erreichen, insbesondere wenn Sie große IT-Systeme erstellen. Alle Kriterien sollten erfüllt sein, um den Zugang zu Informationen in keiner Weise zu behindern.

Wichtig!

  • Detaillierte Richtlinien und Möglichkeiten zur Implementierung der einzelnen Punkte finden Sie in der Dokumentation unter diesem Link (englische Version).
  • Um die Barrierefreiheit im Internet auf Ebene AAA sicherzustellen, müssen alle Richtlinien auf Ebene AA und A erfüllt sein.

Wir empfehlen Ihnen den Mendix Accessibility Report zu lesen, in dem weitere Informationen darüber zu finden sind. Wie unterstützt Mendix Web Accessibility? Was hat die Plattform zu bieten und wofür sind die Entwickler verantwortlich? Der Bericht ist in alle Ebenen (A, AA, AAA) unterteilt, in denen alle Erfolgskriterien erläutert werden. 

 Zusammenfassung

Die Barrierefreiheit im Internet ist ein sehr komplexes Thema und die in diesem Artikel behandelten Themen sind nur ein Teil der Dokumentation. Wir hoffen jedoch, dass die in diesem Text enthaltenen Richtlinien Ihnen beim Erstellen besser zugänglicher Anwendungen helfen werden.

Wenn Sie das Thema Barrierefreiheit mit Mendix weiter untersuchen möchten, lesen Sie die Beiträge zu semantischem HTML und Typografie sowie Best Practices zum Erstellen barrierefreier Apps.

 

Dieser Artikel wurde von Objectivity ins Deutsche übersetzt. 

1394 DE Resources Thumbs
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