Direkt zum Inhalt
Bild
Untitled%20design%20%2831%29.jpg

Der Drupal-Faktor für Web-Barrierefreiheit

AI-Translated
article publisher

Gurpreet Kaur

Drupal

Man sagt, dass weltweit fast eine Milliarde Menschen mit einer Behinderung leben;
Jeder vierte Erwachsene in Amerika kämpft täglich mit einer schweren Behinderung;
Bis zu 217 Millionen Menschen leiden an Sehbehinderungen;

Erscheinen Ihnen diese Zahlen schockierend? Mir waren sie es auf jeden Fall. Und die noch unglücklichere Tatsache ist, dass diese Zahlen in Zukunft nur noch steigen werden. Was sollte also getan werden? Wir können nicht verhindern, dass Menschen eine Behinderung bekommen, das liegt nicht in unserer Hand. Wir können jedoch sicherstellen, dass diese Behinderung sie nicht zurückhält. Wir sollten uns für Inklusion einsetzen, bei der jeder Mensch auf diesem Planeten die gleiche Chance erhält, wobei eine Behinderung kein Kriterium sein sollte, das seine Lebenserfahrungen beeinträchtigt. 

In diesem Sinne wurde Barrierefreiheit konzipiert – für Inklusion, für Gleichheit und um Menschen mit Behinderungen das Gefühl zu geben, dass ihre Stimmen und Gefühle zählen. Barrierefreiheit hat sich seit ihrer Einführung als Konzept erweitert und wird nun auch konsequent im Web umgesetzt.

Das Web oder das Internet ist für alle da; man kann nicht behaupten, dass es für eine bestimmte Demografie konzipiert wurde, denn das war es einfach nicht. Von 5-Jährigen, die YouTube-Videos ansehen, die sie auf die Schule vorbereiten, bis zu 70-Jährigen, die ein YouTube-Tutorial zum Aktualisieren ihres WhatsApp-Status ansehen – das Internet ist für alle da, und Web-Barrierefreiheit stellt sicher, dass es von jedem ohne Schwierigkeiten genutzt werden kann. 

Dies bringt uns zur Bedeutung von Web-Barrierefreiheit, nämlich etwas im Web so zu gestalten, dass es die Bedürfnisse von Menschen mit Behinderungen berücksichtigt. Menschen mit Hör-, kognitiven, Seh- und Sprachbehinderungen (neben anderen) sollten das Web mühelos wahrnehmen, verstehen, navigieren und mit ihm interagieren können. Sie sollten bedenken, dass Barrierefreiheit nicht nur auf Menschen mit Behinderungen beschränkt ist, sondern auch über andere Lebensbereiche hinausgeht, die die Fähigkeit einer Person beeinträchtigen können, das direkt vor ihr Liegende wahrzunehmen. Alter, helles Sonnenlicht, die Größe des verwendeten Geräts und der mentale und physische Zustand einer Person zu einem bestimmten Zeitpunkt – all das wird berücksichtigt, wenn wir über barrierefreies Design im Web sprechen. Wenn Unternehmen und Organisationen also solche Erlebnisse schaffen, die all das berücksichtigen, was ich gerade erwähnt habe, erst dann wären sie wirklich barrierefrei. 

Hier ist ein Video, das Ihnen hilft, Barrierefreiheit etwas besser zu verstehen. 

Warum sollten Sie Barrierefreiheit priorisieren? 

Nachdem wir die Bedeutung von Barrierefreiheit betrachtet haben, ist es wichtig, ihre Wichtigkeit zu verstehen. Solange wir den wahren Wert einer Sache nicht kennen, sind wir nicht geneigt, sie zu akzeptieren. Und Barrierefreiheit zu akzeptieren und umzusetzen, muss heute eine Priorität sein

Tim Berners-Lee, der Erfinder des World Wide Web und Direktor des W3C, sagte:

"Die Stärke des Webs liegt in seiner Universalität. Der Zugang für alle, unabhängig von einer Behinderung, ist ein wesentlicher Aspekt."

Mit Tims Worten im Hinterkopf wollen wir herausfinden, worum es bei der Barrierefreiheit geht. Hier sind drei Gründe, die den Kern der Barrierefreiheit zusammenfassen und warum sie bis ins kleinste Detail des Webgeschäfts praktiziert werden sollte.

Möchten Sie eine breitere Kundenbasis aufbauen?

Der wichtigste Grund für die Umsetzung von Barrierefreiheit liegt in den Zahlen, über die wir in der Einleitung gesprochen haben. Die fast eine Milliarde Menschen mit Behinderungen weltweit könnten Ihr Webprojekt problemlos nutzen. Sie würden sich von Ihrem Geschäftsmodell nicht frustriert oder unterbewertet fühlen, wenn es barrierefrei ist. Und können Sie erraten, was das bedeutet? Ja, Sie könnten einen Markt ansprechen, den Ihre Konkurrenten möglicherweise übersehen haben. Und das reicht aus, um den Umsatz zu erzielen, den Sie anstreben.

Möchten Sie auf der richtigen Seite des Gesetzes stehen?

Sie kennen die Vereinten Nationen? Ich bin sicher, Sie tun es. Und wenn die UN sagt, dass etwas wichtig ist und befolgt werden muss, dann befolgen Sie es. Die UN-Konvention über die Rechte von Menschen mit Behinderungen besagt klar, dass der Zugang zu Informations- und Kommunikationstechnologien ein grundlegendes Menschenrecht ist. Und wenn Sie Websites erstellen, die für Menschen mit Behinderungen unzugänglich sind, verstoßen Sie gegen die UN, und das wollen Sie sicher nicht.

Auch in den USA legt der Americans with Disabilities Act (ADA) Grundlagen für die Web-Barrierefreiheit fest, und die Einhaltung dieser Richtlinien ist wichtig, um auf der richtigen Seite des Gesetzes zu bleiben, finden Sie nicht auch?

Möchten Sie, dass Ihr Markenimage positiv ist?

Dann gibt es noch die Frage des Markenimages. Wenn ich die Essenz der Barrierefreiheit beschreiben müsste, wäre das Einzige, was ihr gerecht würde, soziale Inklusion. Jede Gesellschaftsschicht und jedes Szenario, das ihr Weberlebnis beeinträchtigen könnte, einzubeziehen und ein Webprojekt zu entwickeln, das all dies berücksichtigt, würde mit größter Sicherheit positives Feedback vom Publikum erhalten. Und so bauen Sie ein positives Markenimage auf. 
 
Sagen Sie mir jetzt, stehen Sie nicht auf der Seite der Barrierefreiheit? Streben Sie nicht danach, Ihre gesamte Website wirklich barrierefrei für die Nutzer zu gestalten, wer auch immer sie sein mögen, was auch immer ihr physischer oder mentaler Zustand sein mag und wo auch immer sie sich befinden mögen? 
 
Wenn das der Fall ist, lesen Sie weiter, denn ich werde über Barrierefreiheitstools sprechen, die in Drupal, einem führenden CMS, zu finden sind, damit Sie diese Tools und Module nutzen können, um Ihre Website zum Inbegriff der Barrierefreiheit zu machen.

Es gibt fünf Zitate von fünf einflussreichen Personen.


Beginnen wir damit, Drupal und Barrierefreiheit als Einheit zu verstehen

Drupal verfügt über bestimmte Checklisten, die zur Bewertung der Kompetenz eines bestimmten Aspekts Ihres Projekts verwendet werden; diese werden als Drupal Core Gates bezeichnet. Es gibt insgesamt sechs, die von Inhalt über Frontend bis hin zu Tests reichen. Und es wird Sie freuen zu hören, dass Barrierefreiheit einer dieser sechs Parameter ist; dies allein erklärt bereits, wie sehr Drupal diesen Teil des Webdesigns priorisiert. 

In Drupals Barrierefreiheitserklärung heißt es: 

„Als inklusive Gemeinschaft verpflichten wir uns, sicherzustellen, dass Drupal ein barrierefreies Werkzeug zum Erstellen von Websites ist, die auch von Menschen mit Behinderungen genutzt werden können.“

Und es gibt noch mehr; 

  • Drupal hält sich streng an die World Wide Web Consortiums WCAG 2.0 und ATAG 2.0 Richtlinien in seinen Kernoperationen;
  • Drupals HTML-Strukturen entsprechen ebenfalls den WCAG 2.0 Standards; 
  • Drupal konzentriert sich auch auf einen ausreichenden Kontrast zwischen Textfarbe und Hintergrund; 
  • Drupal legt Wert auf Tastaturbedienbarkeit, daher ist das Testen eines Projekts ausschließlich mit der Tastatur ein wichtiger Bestandteil von Drupals Barrierefreiheitsprozess;
  • Schließlich betont Drupal, dass Formularfelder nach den richtigen Standards beschriftet sein müssen. 

All dies ist ein Beweis für Drupals Einhaltung der Barrierefreiheit, was bedeutet, dass Drupal ohne sie unvollständig ist. Mit der zusätzlichen WAI-ARIA-Unterstützung wird Drupal immer versierter darin, Projekte zu erstellen, die barrierefrei und reichhaltige Internetanwendungen sind. 

Damit kommen wir zu den barrierefreiheitszentrierten Funktionen in Drupal. 

Die logische Semantik 

Die Hinzufügung von WAI-ARIA-Landmarks, Live-Regionen, Rollen und Eigenschaften hat Drupal befähigt, mehr semantische HTML5-Elemente bereitzustellen, die von assistiven Technologien genutzt werden können.

Versuchen wir, dies zu verstehen: Wenn ein assistives Gerät eine Webseite nach Informationen durchsucht, extrahiert es die Daten über das Document Object Model (DOM) oder die HTML-Struktur der Seite. Keine weiteren Informationen werden vom Screenreader gelesen.

Oft erlauben diese assistiven Geräte einem Benutzer nur, die Überschriften auf der Seite oder nur die Links zu lesen. Sie priorisieren nach der Hierarchie, in der die Überschriften und Links präsentiert werden, was das Browsen für Benutzer assistiver Geräte erleichtert. HTML und WAI-ARIA helfen also dabei, Bildschirmfreundlichkeit zu erreichen und die Benutzeroberflächen interaktiver zu gestalten.

Die Readouts 

Auditive Nutzer spielen eine wichtige Rolle, wenn es um barrierefreies Design geht. Zu diesem Zweck wurde Drupal.announce() in den Drupal-Core integriert, damit diesen Nutzern, die sich auf einen Screenreader verlassen, zeitnahe Nachrichten auch mit verschiedenen Tönen übermittelt werden können; Sie können bestimmend oder höflich sein, es liegt an Ihnen. Dies ist die Funktion für akustische Warnmeldungen.

Der Tabbing Manager 

Benutzer, die sehbehindert sind und diejenigen, die keine Maus bedienen können, können den Tabbing Manager wählen. Dies ist eine Funktion, die im Wesentlichen zu einem Leitfaden für diese Benutzer wird, damit sie alle wichtigen Funktionen und das auch in einer logischen Reihenfolge nutzen können. 

Die CSS-Optionen 

Ihr Inhalt kann auf vielfältige Weise angezeigt werden; es liegt an Ihnen, wie Sie ihn wünschen. Mit Drupals CSS-Klassen können Sie steuern, wie Ihr Inhalt ausgeblendet wird oder nicht. Ob bestimmte Screenreader ihn sehen können oder alle, ob er versteckt, visuell ausgeblendet oder fokussierbar oder vollständig unsichtbar ist – Sie können jede einzelne Nuance entscheiden.   

Dies ist auf die zentralisierte Alternative zu CSS display:none; und die Standardisierung der HTML5 Boilerplate-Namenskonvention zurückzuführen. 

Die barrierefreien Formulare 

Es ist wichtig, den Benutzern das notwendige Feedback zu den Ergebnissen ihrer Formularübermittlung zu geben. Sowohl bei Erfolg als auch bei Misserfolg. Dies beinhaltet ein Inline-Feedback, das typischerweise nach dem Absenden des Formulars bereitgestellt wird.

Benachrichtigungen müssen prägnant und klar sein. Die Fehlermeldung sollte insbesondere leicht verständlich sein und einfache Anweisungen zur Behebung der Situation geben. Und im Falle einer erfolgreichen Übermittlung würde eine Bestätigungsnachricht ausreichen. 

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

Die Fieldsets 

Fieldset-Labels werden als Systeme zum Gruppieren verwandter Formularsegmente verwendet. Ein effektiv implementiertes <fieldset>-Label bietet eine visuelle Gliederung um die Formularfeldgruppe. Dies kann für Menschen mit kognitiven Behinderungen in hohem Maße nützlich sein, da es das Formular effektiv in Unterabschnitte unterteilt und so das Verständnis erleichtert.

Drupal verwendet derzeit Fieldsets für Radiobuttons und Checkboxen in der Formular-API. Dies trägt zur weiteren Verbesserung von Formularen in Drupal bei. Diese Funktion wird auch in der erweiterten Suchoption verwendet. 

Der Alternativtext 

Menschen mit gutem Sehvermögen können die Bilder sehen, aber was ist mit Sehbehinderten? Sie können die Bilder nicht sehen. Und Bilder sind wichtig im Kontext dessen, was Sie in Ihrem Inhalt darstellen möchten. Was ist also die Lösung?

Es ist ein Alternativtext; dieser Text beschreibt alles, was auf dem Bild passiert, damit Menschen ohne Sehvermögen verstehen können, worum es bei dem Bild geht. 

Drupal hat Alternativtext standardmäßig aktiviert, um den Inhalt für alle zugänglich zu machen, und Inhaltsersteller verstehen seine Bedeutung. Der Standard kann jedoch über CKEditor oder Bildfelder überschrieben werden, falls Sie dies bevorzugen. 

Das Bartik 

Wenn Sie darüber nachdenken, ist ein Link wie jeder andere Inhalt auf einer Webseite, doch er ist anders, weil er die Macht hat, Sie für weitere Informationen auf eine andere Seite zu bringen. Diese Macht sollte richtig hervorgehoben werden. Und Bartik hilft dabei. Ein Bartik unterstreicht einen Link, was ihn im Grunde hervorhebt und leicht identifizierbar macht, was die Barrierefreiheit weiter verbessert. 

Die jQuery UI 

Drupals Autovervollständigungsfunktion ist sehr nützlich, und jQuery UI trägt dazu bei, ihre Nützlichkeit zu steigern. Sie wird in der Views-Benutzeroberfläche und an anderen Stellen implementiert und verbessert Drupals Barrierefreiheitsstandards. Durch die Beteiligung der jQuery UI-Community profitieren beide Projekte sprunghaft. 

Drupal-Barrierefreiheit geht auch auf Entwickler über: D7AX

Wenn wir Barrierefreiheit hören, denken wir immer an die Nutzer. Barrierefreiheit muss doch um sie gehen, oder? Wir müssen sicherstellen, dass alles auf der Website für jeden Nutzer vollständig zugänglich ist, unabhängig von seinem physischen Zustand. 

Diese Vorstellung ist wahr, aber nur halb wahr. Ja, die meisten Barrierefreiheitsrichtlinien konzentrieren sich auf die Nutzer, aber auch die Entwickler, die Menschen, die ein Projekt von Grund auf aufbauen, müssen die Barrierefreiheit priorisieren. Der Entwicklungsprozess muss also für sie zugänglich sein, damit sie etwas Großartiges bauen können, wozu sie voll und ganz fähig sind.

Und Drupal bietet auch dies. Drupal hat sich auf die Barrierefreiheit für Entwickler konzentriert, und das macht mich als Drupalist stolz auf diese Plattform. Entwickler können sich auf Drupal verlassen, wenn sie barrierefreie Websites und Projekte erstellen. 

D7AX ist in dieser Hinsicht Drupals glänzende Errungenschaft. Es macht es Entwicklern äußerst bequem, beigesteuerte Module und Themes zu finden, die die Entwicklung barrierefreier Websites unterstützen. 

Was ist also D7AX? 

Es ist eine Art Plattform, die anderen Entwicklern mitteilt, dass ein Modul nach Befolgung aller Ressourcen für die Entwicklung barrierefreier Module entwickelt wurde. Wenn Sie auf einer Modulseite einen Hashtag mit D7AX sehen, wissen Sie, dass es barrierefrei ist. 

Immer wenn Sie ein D7AX-Modul verwenden, tragen Sie dazu bei, dass dieses Modul ein Erfolg wird. Die Verwendung würde bedeuten, dass alle zuvor übersehenen Probleme von Ihnen entdeckt und behoben werden könnten, was Sie ebenfalls zu einem D7AX-Entwickler und einem Mitwirkenden an der Drupal-Barrierefreiheit macht. 

Was ist mit Themes? 

D7AX ist nicht nur auf Module beschränkt, sondern arbeitet auch daran, die Barrierefreiheitsprobleme in den Theme-Ebenen zu lösen. Es funktioniert ähnlich wie bei Modulen, und der Hashtag informiert die Benutzer darüber, dass ein Theme den Barrierefreiheitsrichtlinien entspricht. Das Handbuch zur Barrierefreiheit hilft Ihnen in dieser Hinsicht weiter. 

Gibt es eine Barrierefreiheitsgruppe?

Ja, die gibt es, und es ist die Drupal Accessibility Group. Sie beantwortet all Ihre Fragen zur Drupal-Barrierefreiheit und lässt Barrierefreiheit an Ihren Fingerspitzen lebendig werden. Mit regelmäßigen Sitzungen und Vorträgen erfahren Sie alle Hinweise, Tipps und Tricks dazu. 

Ihr Feedback wird bei Drupal immer geschätzt, und die Barrierefreiheitsgruppe ist da keine Ausnahme. Selbst wenn Sie Bedenken haben, dass Drupal in einem Aspekt der Barrierefreiheit mangelhaft ist, sollten Sie dies ansprechen. Wer weiß, vielleicht machen Sie Drupal dadurch noch besser. 

Diese Art des Engagements von Entwicklern als Teil einer Gemeinschaft macht Drupal zu einem idealen Ort für Entwickler, um etwas universell Zugängliches zu bauen, da sie Zugang zu den Ideen und der Arbeit anderer Entwickler haben, und das verschafft Drupal einen beispiellosen Vorteil. 

Module, die Drupal-Websites universell zugänglich machen

Zu wissen, dass Drupal sich um die Barrierefreiheit für Administratoren und Entwickler sowie für Besucher kümmert, gibt ein Gefühl der Erleichterung, dass wir mit Drupal auf dem richtigen Weg sind. Reicht das jedoch aus? Ich glaube nicht. 

Solange Sie nicht wissen, wie Sie die oben genannten Barrierefreiheitsfunktionen effektiv in Ihr Projekt implementieren können, können Sie sich nicht zurücklehnen und entspannen. Um Ihnen bei der Umsetzung der Barrierefreiheit bis ins Detail zu helfen, finden Sie hier eine Liste der Module, die es Ihnen ermöglichen, ein universell zugängliches Projekt bereitzustellen. 

#1 Die CKEditor-Familie 

Man kann nicht über Drupal-Barrierefreiheitsmodule sprechen, ohne den CKEditor zu erwähnen. Es ist ein WYSIWYG-Modul, das unzählige Funktionen wie strukturierte Inhalte und sauberes Markup sowie praktische Drag-and-Drop-Funktionen basierend auf seiner Benutzeroberfläche bietet, zusammen mit ziemlich sicheren Sicherheitsrichtlinien für Ihre Inhaltsersteller.

Der CKEditor selbst ist in Bezug auf Barrierefreiheit ziemlich leistungsstark, aber wenn Sie fünf seiner Varianten ins Spiel bringen, hat er das Potenzial, Drupal noch zugänglicher zu machen. Werfen wir einen Blick darauf.

CKEditor Accessibility Auditor 

Der HTML_CodeSniffer Accessibility Auditor ist im Paket des CKEditor Accessibility Auditor enthalten, mit einer Schaltfläche, die den Quellcode Ihres aktuellen Inhalts prüft. 

Wenn Sie einen spezifischen Fehler haben; 
Wenn Sie Erfolgskriterien und Vorschläge für Techniken wünschen; 
Wenn Sie wissen möchten, was den Fehler ausgelöst hat; 

All das wird von diesen Modulen gefunden, und die Ergebnisse liegen Ihnen fast sofort nach dem Ausführen des Auditors vor.

CKEditor Accessibility Checker 

Der CKEditor Accessibility Checker bietet ein Plugin mit einer Kreativität für die Barrierefreiheitsprüfung Ihres im CKEditor selbst erstellten WYSIWYG-Textkörpers. Natürlich führt die Prüfung zu sofortigen Lösungen für alle gefundenen Probleme. Sie sollten wissen, dass dieses innovative Plugin der Accessibility Checker ist, daher der Name des Moduls.

CKEditor Balloon Panel 

Dieses Modul wird in Verbindung mit dem vorherigen verwendet, um schwebende Panels mit Barrierefreiheitstipps zu erstellen. Diese schwebenden Panels sind eine Höflichkeit des Balloon Panel-Plugins, das es Ihnen ermöglicht, Inhalte an jeder gewünschten spezifischen Position zu präsentieren. 

CKEditor Abbreviation 

Der Zweck des CKEditor Abbreviation ist recht einfach. Wenn Sie eine Schaltfläche zum CKEditor hinzufügen möchten, um Abkürzungen einzufügen und zu bearbeiten, wird er das für Sie tun. Die Hinzufügung eines Links zum Bearbeiten der Abkürzung ist ein zusätzlicher Bonus.

USWDS CKEditor Integration

Wie der Name schon sagt, integriert das USWDS CKEditor Integration Modul das US Web Design System in den CKEditor, was zu einer Anforderung für Regierungswebsites geworden ist. Sie können die USWDS-Klassen und -Komponenten verwenden und sie in den CKEditor einfügen, alles ohne den Quellcode auch nur einmal zu öffnen.

#2 Automatischer Alternativtext 

Wussten Sie, dass es eine API gibt, die Bilder mit ihren modernsten Algorithmen verarbeiten und eine ziemlich präzise Ausgabe liefern kann? Sie kann den Inhalt des Bildes, seine Reifegrade und sogar die dominanten Farben darin erkennen. 

Die Microsoft Azure Cognitive Services API kann dies mühelos tun. Drupals Modul für automatischen Alternativtext nutzt die Kompetenz dieser API und bietet Alt-Text für Bilder, die Ihre Benutzer nicht bereitgestellt haben. 

Sie müssen sich jedoch bewusst sein, dass die Art und Weise, wie wir Bilder wahrnehmen und wie die Technologie sie wahrnehmen würde, möglicherweise nicht ähnlich ist, sodass der erzeugte Alt-Text von dem abweichen kann, was Sie erwartet haben. 

#3 A11Y:Form Helpers 

Erinnern Sie sich an die barrierefreien Formulare, die ich als Drupal-Funktion erwähnt habe? Die A11Y: Form Helpers helfen dabei, dies zu erreichen. Sie zielen darauf ab, die in Drupal-Formularen gefundenen Barrierefreiheitsprobleme zu beheben. 

Die Funktionen dieses Moduls sind ziemlich beeindruckend. 

  • Sie benötigen keine HTML-Validierung; 
  • Sie können lesbare Inline-Fehlermeldungen für Screenreader einfügen; 
  • Sie können sogar vorausgefüllte Attribute zu bestimmten Formularelementen hinzufügen, was immer ein Gewinn ist.

#4 Block ARIA Landmarks Role

Menschen bevorzugen es in der Regel, wenn man direkt zur Sache kommt und Smalltalk überspringt. Und ARIA-Landmarks sind genau das Mittel dafür; sie ermöglichen es Benutzern, das Unnötige zu überspringen und zum Hauptinhalt zu wechseln. 

Mit der Block ARIA Landmarks Role können Sie zusätzliche Elemente zu den Blockkonfigurationsformularen hinzufügen, und Benutzer können einem bestimmten Block eine ARIA-Landmark-Rolle oder ein Label zuweisen. Dieses Modul wurde inspiriert von der Block Class und trägt zur Barrierefreiheit bei.

#5 Editoria11y

Editoria11y ist ein Modul, das sich um die Barrierefreiheitsbedürfnisse der Inhaltsersteller und Redakteure kümmert. Als benutzerfreundlicher Checker konzentriert es sich auf die Barrierefreiheitsprobleme von Inhaltsautoren und behebt diese. 

  • Es stellt sicher, dass die Rechtschreibprüfung immer aktiv ist und Inhaltsfehler sofort korrigiert werden.
  • Es stellt sicher, dass Fehler niemals in Bezug auf Views, Layout Builder, Media und ähnliche Module auftreten. Dies liegt daran, dass es im Kontext mit ihnen läuft und seine Prüfer immer aktiv sind.
  • Schließlich stellt es sicher, dass Inhaltsprobleme durch Priorisierung behoben werden. Sein exklusiver Fokus auf sie stellt sicher, dass Seitenredakteure nichts übersehen, was von ihnen leicht behoben werden kann.

#6 Fluidproject UI Options 

Eine Webseite hat viele verschiedene Elemente, die möglicherweise Änderungen benötigen, um sie an die von Drupal und W3C festgelegten Barrierefreiheitsstandards anzupassen. Die Fluidproject UI Options macht diese Modifikationen für Sie einfach. 

Sei es; 

  • die Schriftgröße der Seite;
  • der Schriftstil der Seite; 
  • die Höhe der Seite; 
  • die Kontrastverhältnisse der Seite; 
  • der Linkstil der Seite; 

alles kann sortiert und die Änderungen mittels Cookies beibehalten werden. Es gibt jedoch gewisse Einschränkungen, die Verwendung von CSS-Verläufen für Kontrasteinstellungen ist eine davon. 

#7 High Contrast 

Sie werden ein Theme haben, das Sie derzeit verwenden, dann wird es ein Theme geben, das eine kontrastreiche Version davon ist. Wenn Sie dies zusammen mit dem Namen des Moduls lesen, sollten Sie erraten können, worum es bei diesem Modul geht. 

Mit High Contrast können Sie zwischen Ihrem Theme und einer kontrastreichen Version davon wechseln. Alles, was Sie tun müssen, ist nach der Installation des Moduls die Tab-Taste auf der Tastatur zu drücken, und Sie erhalten den Pop-up-Link für hohen Kontrast auf Ihrem Bildschirm, und die Arbeit ist erledigt.

#8 Siteimprove

Hochwertige Inhalte, mehr Traffic und eine höhere digitale Performance anzustreben, ist nicht unvernünftig. Und all dies unter Einhaltung der gesetzlichen Vorschriften zu tun, dafür ist Siteimprove bekannt. 

Als umfassende cloudbasierte Software zur Optimierung der digitalen Präsenz bietet sie eine reibungslose Integration über ihr Drupal-Modul, wodurch Sie die Effizienz von Siteimprove im Prozess der Inhaltserstellung und -bearbeitung nutzen können.

Sei es das Testen des Inhalts; 
Sei es das Beheben des Gefundenen; 
Sei es das Optimieren der fortlaufenden Arbeit; 

Sie haben die Analysen und Content-Einblicke zur Verfügung, um dies zu ermöglichen. Die Fähigkeit der Siteimprove-Plugins, die Lücke zwischen Drupal und der Intelligence Platform der Software zu verringern, ist der einzige Grund für diese erstaunlichen Vorteile. 

#9 Style Switcher 

Haben Sie sich jemals in einem Dilemma befunden, in dem das Erstellen von Themes und das Bauen von Websites wie eine Mammutaufgabe erscheint? Wenn ja, hatten Sie höchstwahrscheinlich Probleme mit den alternativen Stylesheets. 

Das Style Switcher Modul macht all dies zum Kinderspiel, indem es sich sowohl auf den Themer als auch auf den Site Builder konzentriert. Es bietet ein alternatives Stylesheet für beide im Admin-Bereich. Diese Stile werden Ihren Website-Besuchern in einer Liste von Links in einem Block präsentiert. 

Und es gibt noch mehr: Da das Modul Cookies verwendet, werden diese Stile immer gespeichert, und wenn jemand auf eine Seite zurückkehrt, wird er mit dem gleichen Stil begrüßt, den er bei seinem vorherigen Besuch gewählt hat. Ziemlich erstaunlich, oder?

#10 Text Resize 

Haben Sie jemals die Augen zusammengekniffen, um einen zu kleinen Text zu lesen? Hat es Sie frustriert? Stellen Sie sich nun vor, Sie haben ein schwaches Sehvermögen und das Fokussieren ist immer ein Problem. Würden Sie eine kleine Schriftgröße lesen können? Ich glaube nicht, und jetzt wissen Sie, wie sich Sehbehinderte fühlen.

Das Text Resize Modul hilft dabei, Sehbehinderte weniger frustriert fühlen zu lassen. Mit jQuery und jQuery Cookie erstellt es einen Drupal-Block, der es Benutzern ermöglicht, die Schriftgröße des Textes zu ändern, wodurch Ihre Seiten zugänglicher werden. Es wird Sie freuen zu hören, dass es auch Bilder skalieren kann. Sie müssen jedoch daran denken, den Text Resize-Block Ihres Themes zu aktivieren, nur dann wird der Block angezeigt. 

#11 Civic Accessibility Toolbar  

Die Civic Accessibility Toolbar hat ein ziemlich ähnliches Prinzip wie das vorherige Modul. Im Gegensatz zum Text Resize Modul unterstützt sie nicht nur Änderungen der Schriftgröße des Textes, sondern hilft Benutzern auch, zu einer Theme-Version mit höherem Kontrast zu wechseln. 

Ähnlich wie Text Resize basiert auch dieses Modul auf der Erstellung von Blöcken für die Dienstprogramme, die für die Barrierefreiheit unter Berücksichtigung von Sehbehinderten implementiert werden. 

Bartik, Garland, Zen Starterkit, Stark und Oliveiro sind alle Themes, in denen die Civic Accessibility Toolbar erprobt und getestet wurde.

#12 HTML Purifier

Ihre Website mit einer gründlichen und sicheren Whitelist zu prüfen und sicherzustellen, dass Ihre Dokumente den Standards der W3C-Spezifikation entsprechen, wird Sie auf der richtigen Seite der Barrierefreiheit halten. Drupals HTML Purifier Modul tut genau das durch die HTML-Filterbibliothek des standardmäßig strengen HTML Purifier

Mit diesem Modul können Sie sich von allem bösartigen Code verabschieden.

Benutzerdefinierte Schriftarten; 
Inline-Stile; 
Bilder und Tabellen; 
Eingeschränkte Tags; 

All dies ist möglich, wenn Sie den HTML Purifier mit Ihren WYSIWYG-Editoren kombinieren. Mit diesem Modul werden Sie den standardkonformen Ball mit einem Homerun aus dem Park schlagen. 

Nachdem wir nun alle notwendigen Module besprochen haben, die dazu beitragen, Ihre Drupal-Website universell zugänglich zu machen, hören wir uns an, was einer unserer Frontend-Entwickler bei OpenSense Labs über Drupal und seinen Beitrag zur Barrierefreiheit zu sagen hat.

„Der Drupal-Core selbst kümmert sich um die Barrierefreiheit auf der Website. Da viele Barrierefreiheitsprobleme auf die Frontend- (Theme-) Ebene beschränkt sind, ist es besser, gute Praktiken für die Frontend-Entwicklung zu etablieren, um barrierefreie Websites zu gewährleisten.“ 

Ich persönlich finde, er hat Recht. Es gibt Hunderte von Modulen in Drupal, und Sie können so viele davon verwenden, wenn Sie Ihre Website erstellen. Mit so vielen Modulen ist Ihre Website zwangsläufig extrem funktional und beeindruckend. Sie ist jedoch möglicherweise immer noch nicht barrierefrei, wenn Sie Barrierefreiheit nicht als zwingenden Parameter während des Entwicklungsprozesses betrachten. 

Ich werde dies mit ein paar Modulen zum besseren Verständnis erklären. 

  • Das View Password Modul hilft dem Benutzer, das eingegebene Passwort zu sehen; 
  • Das Announcement Modal hilft Ihnen, ein Fenster zu erstellen, um neue Errungenschaften oder Updates auf Ihrer Website prominent anzuzeigen; 
  • Der Call Now Button ermöglicht es Ihnen, einen Anruf-Button am unteren Rand des Telefonbildschirms für mobile Websites hinzuzufügen, um eine einfache Konnektivität zu gewährleisten; 
  • Das User Registration Modul hilft Benutzern, sich über ihre Verifizierungs-E-Mails zu registrieren; 
  • Und das Language Cookie Modul hilft beim Erstellen von Cookies in der regionalen Sprache. 

Wenn Sie sich all diese Module ansehen, sind sie nicht offensichtlich mit Barrierefreiheit verbunden, aber alle tragen irgendwie zur Barrierefreiheit Ihrer Website bei. Wenn Ihre Entwickler also ständig mit Barrierefreiheit im Hinterkopf entwickeln, würden sie diese Module ohne Zögern verwenden. 

Daher, wie unser Frontend-Entwickler sagte, geht es bei der Drupal-Barrierefreiheit um gute Praktiken während des gesamten Entwicklungsprozesses und während der gesamten Lebensdauer des Webprojekts. 

Sind Sie sicher, dass Ihr Projekt barrierefrei ist? Lassen Sie uns überprüfen!

Bisher haben wir die in Drupal gefundenen Barrierefreiheitsfunktionen und die Module besprochen, die die Implementierung dieser Funktionen unterstützen. Glauben Sie, das reicht aus? Glauben Sie, dass die Installation und Ausführung einer Reihe von Modulen Ihre gesamte Barrierefreiheitsarbeit erledigt und Sie sich jetzt zurücklehnen und entspannen können? Wenn Sie das denken, mein Freund, liegen Sie völlig falsch. 

Durch das Ausführen von Modulen können Sie nicht sicher sein, dass Ihre Website wirklich barrierefrei ist, dass sie alle Barrierefreiheitskriterien erfüllt. Sie müssen eine gründliche Überprüfung aller Parameter durchführen, die die Barrierefreiheit Ihrer Website beeinflussen können, und nachdem Sie die Ergebnisse überprüft und behoben haben, können Sie sich so viel zurücklehnen und entspannen, wie Sie möchten. 

Beginnen wir also mit der Überprüfung.

Überprüfung durch Automatisierung 

Sie müssen Ihren Überprüfungsprozess mit Drupals automatisierten Tools beginnen, die entwickelt wurden, um die Barrierefreiheitsstufen Ihres Projekts und daraus resultierende Probleme zu bewerten und anschließend zu lösen. 

Einige dieser Tools sind; 

WAVE;
Tenon;
Accessibility Insights;
Google Lighthouse;
Siteimprove;
Und Siteimprove Accessibility Checker.

Mit axe-core können Sie einige davon automatisieren und sich zurücklehnen, während sie ihre Arbeit erledigen.

Überprüfen Sie die Tastatur

Die Tastaturnavigation ist von großer Bedeutung, wenn es um Web-Barrierefreiheit geht, daher können Sie es sich nicht leisten, hier Fehler zu machen. Alles und jedes Element auf Ihrem Bildschirm muss über eine Tastatur zugänglich sein und mit einer Tab-Reihenfolge, die Sinn ergibt.

Achten Sie bei Ihrer Bewertung auf folgende Punkte; 

  • Der Tab sollte vorwärts und rückwärts funktionieren; 
  • Die interaktiven Elemente sollten von anderen hervorgehoben werden; 
  • Das Document Object Model sollte in der Tab-Progression befolgt werden, um sie natürlich zu gestalten; 
  • Die Überspring-Option ist für wiederholte Inhalte verfügbar; 
  • Der Benutzer sollte Overlays, Modale und Autovervollständigungs-Widgets überspringen können; 
  • Inhalte, die beim Überfahren mit der Maus erscheinen, sollten auch über die Tastatur zugänglich sein. 

Solche Hinweise unter anderem würden Ihr Projekt tastaturfreundlich machen. Noch etwas: Sie sollten daran denken, dies auch auf Mobilgeräten und Tablets zu überprüfen, um responsive Haltepunkte zu vermeiden.

Überprüfen Sie Farbe und Kontrast 

Als Nächstes kommen Farbe und Kontrast, die ebenfalls priorisiert werden sollten. Vordergrund und Hintergrund müssen sich deutlich voneinander unterscheiden. 4,5:1 ist das ideale Verhältnis von Text zu Hintergrund. Alles, was darunter liegt, würde in direktem Widerspruch zu den Barrierefreiheitsrichtlinien stehen. 

Sie müssen auch bedenken, dass Farbe nicht die einzige Möglichkeit sein kann, Informationen zu übermitteln. Denken Sie an Ihr Publikum, das farbenblind sein könnte; würden sie verstehen können, was Sie sagen wollen?

Es gibt zwei Kästchen mit der gleichen Art von Figuren, die sich durch Farbe unterscheiden, aber das zweite hat zusätzlich Zahlen als Beschreibung.


Die zweite Darstellung in diesem Bild ist das, was Sie immer anstreben sollten. 

Überprüfen Sie den Inhalt 

Sie müssen auch Ihren Inhalt überprüfen. Mit Inhalt meine ich nicht genau die Wörter, die Sie verwenden, obwohl die Sprache leicht verständlich sein sollte. 

Abgesehen davon gibt es auch sich ändernde Inhalte wie die Liste der Suchergebnisse, die ständig aktualisiert wird. Dies wird als dynamischer Inhalt bezeichnet, und Sie müssen diese Änderungen durch assistive Technologien ankündigen; ARIA Live Regions helfen in dieser Hinsicht.

Überschriften sind ebenfalls Teil des Inhalts. In dieser Hinsicht müssen Sie sicherstellen, dass Ihre Überschriften nicht nur prominent genug, sondern auch beschreibend genug sind, um sicherzustellen, dass jemand, der sie liest, ihren gesamten Kontext versteht. 

Dann gibt es noch die Symbole, die nicht nur Symbole sein können, da die Benutzer ihre Funktionalität ohne eine entsprechende Beschreibung nicht kennen würden. Geben Sie allen Ihren Symbolen Beschriftungen, falls Sie dies noch nicht getan haben. 

Überprüfen Sie Ton und Video 

Dieser Punkt ist für die Gehörlosengemeinschaft und Menschen mit Hörproblemen. Die Elemente auf Ihrer Website, die Informationen über Töne und Videos übermitteln, sollten begleitende Texttranskripte und Untertitel haben, damit Menschen, die nicht hören können, was gesagt wird, es lesen können. Dies würde Ihre Website automatisch zugänglicher machen. 

Ich habe sowohl Untertitel als auch Texttranskripte verwendet, da diese Überprüfung auch Benutzer mit Sehbehinderungen berücksichtigt. Dies liegt daran, dass bei einem komplexen Video Untertitel allein möglicherweise nicht ausreichen. Es kann notwendig sein, die Szene textlich für Menschen zu beschreiben, die nicht sehen können, was passiert, und Untertitel würden nur bis zu einem gewissen Grad Kontext bieten. 

Überprüfen Sie Animationen und Autoplay 

Es besteht eine hohe Wahrscheinlichkeit, dass Ihr Projekt Animationen, Audios und Videos enthält. Offensichtlich gibt es einen Zweck für ihre Präsenz auf Ihrer Website, aber Sie müssen auch den Benutzer berücksichtigen, und das bedeutet, Autoplay zu vermeiden. 

Videos, die automatisch abgespielt werden und sich nicht von selbst pausieren, sind für mich, ehrlich gesagt, ein Ärgernis; wenn ich etwas sehen möchte, drücke ich selbst auf Wiedergabe. Sie sollten also auch die Autoplay-Option deaktivieren, und selbst wenn sie aktiviert ist, sollten die Animationen, Audios und Videos nach ein paar Sekunden aufhören zu spielen. 

Sie sollten auch darüber nachdenken, einfache Steuerelemente zum Abspielen und Anhalten dieser Medien hinzuzufügen. 

Überprüfen Sie den Screenreader 

Sie werden Benutzer haben, die sich vollständig auf einen Screenreader verlassen, daher muss sichergestellt werden, dass es damit keine Probleme gibt, auf Ihrer Überprüfungscheckliste stehen. 

Dafür; 

  • Sie sollten überprüfen, ob dieselben Informationen an Benutzer mit assistiver Technologie und sehende Benutzer übermittelt werden. 
  • Sie sollten den Informationsfluss überprüfen und sicherstellen, dass er logisch ist, ähnlich der Tab-Reihenfolge bei der Tastatur-Barrierefreiheit. 
  • Sie sollten sehen, dass alle Ihre Links Sinn ergeben; etwas wie „hier klicken“ wird dem Screenreader-Benutzer nicht wirklich helfen. 
  • Schließlich sollten Sie sicherstellen, dass alle Bilder Alternativtext haben, der sie klar und prägnant beschreibt. 

Fazit 

Web-Barrierefreiheit ist heute sehr populär geworden. Wenn Sie sich an die W3C-Richtlinien zur Barrierefreiheit halten, könnten Sie Wunder für Ihr Markenimage bewirken und Ihre Kundenbasis erheblich erweitern. Wenn Sie dies jedoch nicht tun, würde Ihr Image herabgestuft und damit auch Ihr Umsatz. Das Ziel der Barrierefreiheit sollte es sein, ein Webprojekt zu schaffen, das für jemanden ohne Behinderung, jemanden mit einer körperlichen Behinderung und jemanden mit kognitiven Behinderungen gleichermaßen und ohne den geringsten Anschein von Voreingenommenheit zugänglich ist.

Die Barrierefreiheitsfunktionen in Drupal sind so umfassend und vollständig, dass sie das letztere Ergebnis nicht einmal zulassen würden. Ich habe versucht, alle Drupal-Barrierefreiheitsmodule und -Tools abzudecken, und ich hoffe wirklich, dass Sie diese zur Kenntnis nehmen und ein Projekt entwickeln werden, das universelle Aufmerksamkeit erhält. Viel Erfolg!

Abonnieren

Ready to start your digital transformation journey with us?

Verwandte 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…