Direkt zum Inhalt
Bild
banner-6.jpg

Drupal stellt die Einhaltung der Web-Accessibility-Standards sicher

AI-Translated
article publisher

Akshita

Drupal

So wie Land, Luft und Wasser für alle Menschen bestimmt sind, wurde das Web so konzipiert, dass es für alle Menschen funktioniert und jedes Hindernis beseitigt, unabhängig von den Umständen und Fähigkeiten der Menschen. Die Auswirkungen der Einschränkung (von Einzelpersonen) angesichts der Tatsache, dass die Webstandards nicht alle einschließen, hat sich jedoch zu einer Barriere entwickelt. Dies führt zu einem Paradoxon in der Situation.

Grafiken zur Web-Barrierefreiheit mit Ohr, Gehirn, Auge, Mund und Herz

Bevor ich diesen Blogbeitrag fertigstellte, glaubte ich in meiner Unwissenheit, dass sich die Web-Barrierefreiheit auf "Barrierefreiheit nur für Menschen mit Behinderungen" beschränkt. Eine andere Sache, die man mir einreden wollte, war, dass sie fast gleichbedeutend mit Problemen der Sichtbarkeit ist. Sie gilt aber genauso für Menschen mit Hörbehinderungen wie für Menschen mit kognitiven oder neurologischen Beeinträchtigungen. Ich erkannte jedoch, dass ich nicht der Einzige war, der solche falschen Vorstellungen mit Behinderungen und Web-Barrierefreiheit verband.

Mangelndes Bewusstsein und Tabus im Zusammenhang mit Behinderungen führen uns oft in die Irre.

Um sicherzustellen, dass Menschen mit Behinderungen einen gleichberechtigten und inklusiven Zugang zu den Ressourcen im Web haben, befolgen Regierungen und Behörden bestimmte Richtlinien, um eine gleichberechtigte Barrierefreiheit für alle ohne jegliche Benachteiligung zu gewährleisten.

Was sind Web-Barrierefreiheitsstandards und warum sind sie wichtig?

Die Web Content Accessibility Guidelines (WCAG) erläutern, wie Webinhalte für Menschen besser zugänglich gemacht werden können. Das Wort "Inhalt" bezieht sich hier auf jede Art von Information auf einer Webseite, wie z. B. Text (einschließlich Überschriften und Bildunterschriften), Bilder, Töne, Codes, Auszeichnungen - alles, was das Layout und den Rahmen definiert.

"WCAG wird im Rahmen des World Wide Web Consortium-Prozesses entwickelt, mit dem Ziel, einen einzigen gemeinsamen Standard für die Barrierefreiheit von Webinhalten bereitzustellen, der die Bedürfnisse von Einzelpersonen, Organisationen und Regierungen auf internationaler Ebene erfüllt."

Nehmen Sie Beispiele für physische Infrastrukturen wie Rampen und digitale Hinweisschilder, die von jedem genutzt werden können. In ähnlicher Weise ist die Web-Barrierefreiheit für alle gedacht.

Wenn Sie mittags ausgehen, kann der Kontrast ein Problem sein, sowohl für eine Person mit 6/6-Sehvermögen als auch für eine Person mit Sehproblemen. Oder ältere Menschen (aufgrund des Alterns) haben mit veränderten Fähigkeiten zu kämpfen, ebenso wie Menschen mit "vorübergehenden Behinderungen" wie einem gebrochenen Arm oder einer verlorenen Brille. Web-Barrierefreiheitsstandards gewährleisten also nicht nur Gerechtigkeit für Menschen mit Behinderungen, sondern sind für alle inklusiv.

Laut der Konvention der Vereinten Nationen über die Rechte von Menschen mit Behinderungen ist die Wahrnehmung gleicher Menschenrechte eine grundlegende Freiheit. Um sicherzustellen, dass die Würde von Menschen mit Behinderungen nicht zum Gespött wird, haben Regierungen auf der ganzen Welt einen Vertrag über eine einfache Web-Barrierefreiheit unterzeichnet.

Wie hilft Drupal?

Ein Problem kann entweder beim Erstellen einer Website oder bei deren Nutzung auftreten. Die WCAG stellt sicher, dass die Richtlinien in beiden Fällen befolgt werden. Die Richtlinien des World Wide Web Consortium (W3C) werden dann in zwei Teile unterteilt: ATAG 2.0 und WCAG 2.0. Die Authoring Tool Accessibility Guidelines (ATAG 2.0) befassen sich mit Authoring-Tools und die Web Content Accessibility Guidelines (WCAG 2.0) mit Webinhalten und werden von Entwicklern, Authoring-Tools und Tools zur Bewertung der Barrierefreiheit verwendet.

Drupal entspricht beiden Richtlinien. Die Initiative begann mit der Drupal 7-Barrierefreiheit und die Community hat sich verpflichtet, die Barrierefreiheit für alle zu gewährleisten.

Was Drupal tut...

Die Community verfügt über ein Barrierefreiheitsteam, das daran arbeitet, Barrieren sowohl auf Code- als auch auf Bewusstseinsebene zu identifizieren, um sie zu beseitigen. Als Person, die assistive Technologien zum Surfen im Web verwendet, ist Drupal so aufgebaut, dass es das semantische Markup fördert und unterstützt (das jetzt in Drupal 8 standardmäßig enthalten ist).

Man kann erkennen, dass die Verbesserungen sowohl für den Besucher als auch für den Administrator gedacht sind:

  • Farbkontrast und -intensität
  • Drag-and-Drop-Funktionalität
  • Hinzufügen von Skip-Navigation zu Core-Themes
  • Bildbearbeitung
  • Formularbeschriftung
  • Suchmaschinenformular und -präsentation
  • Entfernen doppelter oder Null-Tags
  • Barrierefreiheit für Entwickler

Module für Barrierefreiheit

Im Folgenden sind einige Drupal-Module aufgeführt, die Sie dabei unterstützen, die Barrierefreiheitsstandards einzuhalten.

  1. Automatischer Alt-Text
    Das grundlegende Prinzip, das hier zum Tragen kommt, ist die Idee der einfachen Wahrnehmbarkeit. Jede Information sollte daher so präsentiert werden, dass sie für den Benutzer leicht wahrnehmbar ist. Es ist erforderlich, dass alle Nicht-Text-Informationen wie Bilder und Videos den Inhalt in Form von Text beschreiben, damit die Bildschirmleseprogramme ihn lesen können.

    Logo des automatischen Alt-Text-Moduls von Microsoft

    Das Automatic Alt text module generiert automatisch einen alternativen Text für Bilder, wenn kein Alt-Text vom Benutzer angegeben wurde. Dieses Modul eignet sich hervorragend für Websites und Portale mit benutzergenerierten Inhalten, bei denen sich die Benutzer möglicherweise nicht einmal des Zwecks und der Bedeutung des alternativen Textes bewusst sind.

    Es beschreibt den Inhalt des Bildes in einem Satz, bietet aber keine Gesichtserkennung.
     
  2. Block ARIA Landmark Roles
    Inspiriert von Block Class, fügt Block ARAI Landmark Roles zusätzliche Elemente zu den Blockkonfigurationsformularen hinzu, mit denen Benutzer einem Block eine ARIA-Landmark-Rolle zuweisen können.
     
  3. CKEditor Abbreviation
    Das CKEditor Abbreviation-Modul fügt dem CKEditor eine Schaltfläche hinzu, mit der Abkürzungen in einen bestimmten Text eingefügt und bearbeitet werden können. Wenn ein vorhandenes Abbr-Tag ausgewählt ist, enthält das Kontextmenü auch einen Link zum Bearbeiten der Abkürzung.

    Das Abbr-Tag definiert die Abkürzung oder das Akronym im Inhalt. Das Markieren von Abkürzungen kann Browsern und Übersetzungssystemen nützliche Informationen liefern und die Suchmaschinenoptimierung verbessern.
     
  4. CKEditor Accessibility Checker
    Das CKEditor Accessibility Checker-Modul aktiviert das Accessibility Checker-Plugin in Ihrem WYSIWYG-Editor. Mit diesem Plugin können Sie die Barrierefreiheit der erstellten Inhalte überprüfen und alle gefundenen Barrierefreiheitsprobleme sofort beheben.
     
  5. High Contrast
    Am 13. April 2011 veröffentlichte Joseph Dolson einen Artikel "Web Accessibility: 10 Common Developer Mistakes", in dem er die häufigsten Fehler im Zusammenhang mit der Web-Barrierefreiheit auflistete und feststellte, dass die meisten Probleme "eher mit einem mangelnden Verständnis dessen zu tun haben, was barrierefreie Inhalte ausmacht, als mit einem mangelnden Verständnis der Technologie".

    In den meisten Umfragen wird ein schlechter Kontrast oft als das am häufigsten übersehene Merkmal von Entwicklern genannt.

    ein Beispiel für Drupal High Contrast

    High Contrast Modul, bietet eine schnelle Lösung, mit der der Benutzer zwischen dem aktiven Theme und einer kontrastreichen Version davon wechseln kann, um das Problem zu beheben.

  6. htmLawed
    Laut dem Artikel "Ten Common Accessibility Problems" von Roger Hudson ist die unsachgemäße Verwendung von HTML-Header-Elementen eines der wichtigsten Probleme der Barrierefreiheit.

    Das htmLawed-Modul verwendet die htmLawed PHP-Bibliothek, um HTML zu begrenzen und zu filtern, um die Konsistenz mit den Richtlinien und Standards des Site-Administrators und für die Sicherheit zu gewährleisten. Die Verwendung der htmLawed-Bibliothek ermöglicht eine hochgradig anpassbare Steuerung des HTML-Markups.

  7. Style Switcher
    Das Style Switcher Modul macht die Erstellung von Themes oder den Aufbau von Websites mit alternativen Stylesheets zum Kinderspiel. Die meisten Probleme mit der Barrierefreiheit wurden auf Theme-Ebene angegangen. Mit diesem Modul können Themer ein Theme mit alternativen Stylesheets bereitstellen. Site-Builder können direkt im Admin-Bereich weitere alternative Stylesheets hinzufügen, um es unter die richtigen Richtlinien der Barrierefreiheit zu bringen. Das Modul ermöglicht ein spezielles Styling eines Teils der Website und präsentiert alle diese Stile als Block mit Links. So kann jeder Website-Benutzer den Stil der Website wählen, den er/sie bevorzugt.

  8. Text Resize
    Die handlichste Funktion, die den Endbenutzern genau die richtige Autonomie gibt, um die Textgröße nach ihrem Sehkomfort anzupassen. Das Text Resize-Modul bietet den Endbenutzern einen Block, mit dem sie die Schriftgröße des Textes auf Ihrer Drupal-Site schnell ändern können.

    ein Beispiel für einen Text Resize Block

    Es enthält zwei Schaltflächen, mit denen die Größe des gedruckten Textes auf der Seite vergrößert und verkleinert werden kann.

  9. Accessibility
    Ein Modul für den Entwickler, das Accessibility-Modul, bietet Ihnen eine Liste der verfügbaren Barrierefreiheitstests, die (meistens) an einer oder mehreren Richtlinien wie WCAG 2.0 oder Section 508 ausgerichtet sind.

    Es informiert den Site-Betreuer sofort über das fehlende Attribut "alt" in einem Bild oder darüber, ob die Header ordnungsgemäß verwendet werden. Darüber hinaus kann jeder Test an die spezifischen Herausforderungen Ihrer Website angepasst und die Meldungen angepasst werden, die Benutzer für jeden Test sehen, sodass Sie Tipps zur Behebung von Barrierefreiheitsproblemen im Kontext der Bearbeitungsumgebung Ihrer Website geben können.

Drupal 8-Funktionen für Barrierefreiheit

Neben den Modulen, die Ihnen helfen können, Probleme mit der Webkompatibilität zu überwinden, finden Sie hier eine Liste der wichtigsten Drupal 8-Funktionen für eine einfachere Web-Barrierefreiheit.

  1. Semantik im Kern
    Wenn ein Hilfsmittel eine Webseite nach Informationen durchsucht, extrahiert es die Daten über das Document Object Model (DOM) oder die HTML-Struktur der Seite. Es werden keine weiteren Informationen vom Bildschirmleseprogramm gelesen.

    Oft erlauben diese Hilfsmittel einem Benutzer nur, die Überschriften auf der Seite oder nur die Links zu lesen. Es priorisiert nach der Hierarchie, in der die Überschriften und Links präsentiert werden, was das Surfen für Benutzer von Hilfsmitteln erleichtert.

    Drupal 8 basiert auf HTML5. Die Präsentation neuer und besserer semantischer Komponenten HTML5 ist in der Tat eine von fünf wichtigen Initiativen, die in der Drupal 8-Entwicklung umrissen werden. Es ermöglicht Theme-Entwicklern zu steuern, wo die neuen semantischen Elemente verwendet werden sollen, und sich vollständig abzumelden, wenn sie dies wünschen.

    Wenn wir semantisch korrektes HTML erstellen, teilen wir dem Browser und der Hilfstechnologie mit, welche Art von Inhalt sie verwaltet und wie diese Informationen mit anderen Inhalten zusammenhängen. Auf diese Weise ist die Hilfstechnologie umso müheloser bereit, ihre Aktivität auszuführen, da sie über eine Struktur verfügt, mit der sie arbeiten kann.
     
  2. Aural Alerts
    Oft werden Seitenaktualisierungen visuell durch Farbänderungen und Animationen ausgedrückt. Aber das Anhören einer Website ist eine ganz andere Erfahrung als das Sehen, daher bietet Drupal eine Methode namens "Drupal.announce()". Dies hilft, Seitenaktualisierungen auf nicht-visuelle Weise offensichtlich zu machen. Diese Methode erstellt ein aria-live-Element auf der Seite.

    Dies informiert den Benutzer auch über alle angezeigten Warnfelder und gibt Anweisungen für Benutzer von Bildschirmleseprogrammen über den Ton. Text, der an die Seite angehängt ist, wird von den Hilfstechnologien gelesen. Drupal.announce akzeptiert eine Zeichenfolge, die von einem Audio-UA gelesen werden soll.
     
  3. Controlled Tab Order
    Die Probleme mit der Barrierefreiheit treten auch auf, wenn ein Benutzer verschiedene Medien verwendet, während er im Web navigiert. Nicht jeder Benutzer verwendet eine Maus, um auf der Website zu navigieren. Der TabbingManager in Drupal ist ein großartiges Medium, um sowohl nicht-visuelle als auch Nicht-Maus-Benutzer zu den Hauptelementen auf der Seite in einer logischen Reihenfolge zu führen. Es ermöglicht somit mehr Kontrolle beim Erkunden komplexer UIs.

    Der Tabbing-Manager hilft bei der Definition einer expliziten Tab-Reihenfolge. Es ermöglicht auch, dass Elemente neben Links und Formularen den Tastaturfokus erhalten. Ohne die Tab-Reihenfolge zu unterbrechen, platziert es die Elemente in einem logischen Navigationsfluss, als ob es sich um einen Link auf der Seite handeln würde.
     
  4. Accessible Inline Form Errors
    Es ist wichtig, den Benutzern das notwendige Feedback über die Ergebnisse ihrer Formulareinsendung zu geben. Sowohl bei Erfolg als auch bei Misserfolg. Dies beinhaltet ein Inline-Feedback, das typischerweise nach dem Absenden des Formulars gegeben wird.

    Benachrichtigungen müssen prägnant und klar sein. Insbesondere die Fehlermeldung sollte leicht verständlich sein und einfache Anweisungen geben, wie die Situation behoben werden kann. Und im Falle einer erfolgreichen Einreichung würde eine Bestätigungsmeldung ausreichen.

    Drupal-Formulare haben sich als beeindruckend offener für die Erweiterung verfügbarer Inline-Formularfehler herausgestellt. Es ist jetzt für jeden einfacher zu erkennen, welche Fehler er beim Ausfüllen eines Webformulars gemacht hat.

  5. Fieldsets
    Fieldset-Labels werden als Systeme zum Sammeln verwandter Formularsegmente verwendet. Ein effektiv implementiertes <fieldset>-Label bietet ein visuelles Diagramm um die Formularfeldersammlung herum. Dies kann für Personen mit kognitiven Beeinträchtigungen von großem Wert sein, da es das Formular effektiv in Unterabschnitte unterteilt und es so leichter verständlich macht.

    Drupal verwendet derzeit Fieldsets für Radios & Checkboxen in der Formular-API. Dies trägt dazu bei, Formulare in Drupal weiter zu verbessern.

Fazit

So gut die Funktionen sind, die Drupal bietet, liegt es letztendlich an den Organisationen, die Websites und Anwendungen rund um die Web-Barrierefreiheit zu strategisieren und zu erstellen.  

Wir stellen sicher, dass unsere verschiedenen Teams und Interaktionen zusammenarbeiten, um das Web für Menschen mit Behinderungen zugänglicher zu machen. Bei OpenSense Labs entwerfen und entwickeln wir die Webtechnologien, um eine universelle Barrierefreiheit zu gewährleisten. Kontaktieren Sie uns unter [email protected], um das Web zu einem besseren Ort zu machen. 

Abonnieren

Ready to start your digital transformation journey with us?

Related Blogs

Zurück von der DrupalCon Atlanta 2025: Ein Meilenstein für OpenSense Labs

DrupalCon Atlanta 2025 OpenSense Labs

„Fit. Schnell. Für die Ewigkeit gebaut.“ Das war nicht nur ein Slogan, sondern die Denkweise, mit der wir zur DrupalCon…

Erklärbare KI-Tools: SHAPs Stärke in der KI

Explainable AI tools Explainable AI And SHAP OpenSense Labs

Wissen Sie, was erklärbare KI-Tools sind? Erklärbare KI-Tools sind Programme, die zeigen, wie eine KI ihre Entscheidungen…

KI-Chatbots: Präzision und Persönlichkeit in Perfektion

Creating AI Chatbot OpenSense Labs

In der Welt der künstlichen Intelligenz ist die Entwicklung eines KI-Chatbots, der nicht nur akkurate Informationen liefert…