Testen der Zugänglichkeitsattribute mit Divi 5

Barrierefreiheit Attribute sind jetzt vollständig mit Divi 5 kompatibel, sodass Sie eine Möglichkeit haben, Aria-Rollen, Beschriftungen und andere Bildschirmleser-Helfer direkt im Bauherr hinzuzufügen. Wenn Sie mit Divi 5 arbeiten, ist dies der einfachste Weg, um die Zugänglichkeit in Ihre Website aufzubauen, ohne Ihren Workflow oder Ihr Design zu ändern.

Angesichts des European Accessity Act, der am 28. Juni in Kraft tritt und Google zunehmend Best Practices für Barrierefreiheit bevorzugt, ist nun die Zeit, weiter zu kommen. So funktionieren Attribute für Barrierefreiheit und wie sie Ihrer Website hilft, moderne Barrierefreiheitsstandards zu erfüllen!

Zugänglichkeitsattribute für Divi 5

Barrierefreiheit Attribute ist ein Divi -Plugin, mit dem Sie Ihren Webseiten direkt vom Divi -Builder zu Aria -Rollen, -bezeichnungen und anderen Helf zur Zugänglichkeit hinzufügen können, ohne Code zu schreiben. ARIA (Accessiable Rich Internet Applications) Attribute helfen Ihnen dabei, Elementen, die nicht genügend Kontext für sich bieten, Bedeutung zu hindern, insbesondere wenn Sie benutzerdefinierte Layouts in Divi 5 erstellen.

Wenn Sie beispielsweise ein Textmodul verwenden, um eine Überschrift oder ein Schaltflächenmodul visuell zu stylen, versteht Bildschirme ihre Rollen nicht automatisch. Mit Aria -Rollen und -bezeichnungen können Sie definieren, was jedes Element ist und wie assistive Technologien es interpretieren sollten, ohne das visuelle Design zu ändern. Dies hilft sicherzustellen, dass Ihre DIVI 5 -Website sowohl zugänglich als auch flexibel ist.

Nachdem Sie das Plugin installiert haben, fügt es Ihren Abschnitten, Zeilen, Modulen und anderen Divi -Elementen automatisch benutzerdefinierte Eingangsfelder hinzu. (Klicken Sie auf ein beliebiges Element und wenden Sie sich auf die Registerkarte Erweitert .)

Jetzt können Sie Rollen definieren, Aria -Etiketten hinzufügen und die Unterstützung der Bildschirmleser für jedes Element direkt vom Divi Builder verbessern. Zugänglichkeitsattribute passt reibungslos in Ihren Divi -Workflow und kostet nur 19 US -Dollar pro Jahr. Es bietet Ihnen eine einfache, erschwingliche Möglichkeit, zugängliche Websites zu erstellen.

Erhalten Sie Zugänglichkeitsattribute

Warum Barrierefreiheit nicht mehr optional ist

Barrierefreiheit war früher etwas, das Sie abschrecken konnten, aber nicht mehr. Es wirkt sich nun auf Ihre Rechtssicherheit, Ihre Suchleistung und das Vertrauen der Benutzer aus.

Wenn Ihre Website nicht zugänglich ist, sind Sie nicht nur zurück, sondern auch gefährdet. Hier ist der Grund:

• Die rechtlichen Schritte steigen: Vom 28. Juni 2025 wird das Gesetz über die Europäische Zugänglichkeit durchgesetzt. Wenn Ihre Website nicht zugänglich ist und Personen in der EU sie verwenden, können Sie mit Geldstrafen oder anderen Strafen konfrontiert sind. Das Gesetz gilt für die meisten Unternehmen mit mehr als 10 Mitarbeitern und verdient über 2 Millionen Euro pro Jahr, aber kleinere werden auch aufgefordert, ihm zu folgen, weil…
• Die Zugänglichkeit kann sich auf Ihre Ranglisten auswirken: Obwohl die Zugänglichkeit kein Ranking -Faktor ist, können viele zugängliche Funktionen indirekt Ihre SEO beeinflussen. Dinge wie ALT -Text, ordnungsgemäße Überschriftenstrukturen und beschreibende Beschriftungen erleichtern Ihre Website sowohl für Benutzer als auch Suchmaschinen, die sie verstehen können. Wenn Ihre Website schwer zu navigieren ist, können Sie in den Suchergebnissen leise zurückfallen.
• Unzugängliche Websites treiben die Benutzer weg: Wenn Ihre Website nicht zugänglich ist, können Menschen mit Behinderungen sie möglicherweise nicht verwenden. Wenn sie schnell abreisen, kann es eine schlechte Benutzererfahrung auf Suchmaschinen signalisieren und Ihre Ranglisten verletzen. Änderungen wie klare Struktur, lesbare Schriftarten und einfache Tastaturnavigation machen Ihre Website für alle.

Es ist einfach, die Zugänglichkeit nur für große Unternehmen zu übernehmen, aber das Ignorieren kann Sie trotzdem verletzen, selbst wenn Sie eine kleinere Marke sind.

Einrichten der Attribute für Barrierefreiheit in Divi 5

Dieser Abschnitt führt Sie durch die Installation und Zugriff von Tools in Barrierefreiheitattributen in Ihren Divi 5 -Websites.

Installieren des Plugins

Sobald Sie Zugriffsattribute kaufen, erhalten Sie die ZIP -Datei des Plugins. Laden Sie es in die Plugins Ihres WordPress -Plugins> Plugin> Upload -Plugin hinzufügen.

Fügen Sie nun die ZIP -Datei hinzu und klicken Sie jetzt auf Installieren.

Endlich aktivieren Sie es.

Sobald Sie aktiviert sind, werden Sie die zusätzlichen ARIA -Felder feststellen, die der erweiterten Registerkarte jedes Elements hinzugefügt wurden.

Sie können diese Zugänglichkeitsattribute jetzt einfach zu jedem Element auf Ihrer Seite hinzufügen, direkt vom Divi Builder. Das werden wir in nur einer Minute abdecken. Lassen Sie uns zuvor schnell alle Optionen überprüfen, die Sie im Dashboard der Zugänglichkeitsattribute verfügbar haben.

Barrierefreiheit Attribute Walkthrough

Sobald das Plugin auf Ihrer Divi -Site aktiv ist, wird der Registerkarte "Barrierefreiheit " Ihrer WordPress -Seitenleiste hinzugefügt. Klicken Sie darauf, um auf Ihr Dashboard zuzugreifen, das vier Registerkarten hat: Administrator, Module, Elemente und Produkte.

Lassen Sie uns die Optionen der einzelnen Registerkarten überprüfen:

Die Registerkarte Admin

Auf dieser Registerkarte können Sie Steuerelemente auf Kontoebene wie das Verwalten Ihres Abonnements (die Unterstützung ermöglicht) , das Überprüfen des Plugin-Status, die Auswahl des Löschens, ob Daten in Deinstallation gelöscht werden, und alle Einstellungen auf Standards zurückzusetzen.

Die Registerkarte Module

Sie können entscheiden, welche Aria -Attribute in Ihren Divi -Modulen ermöglicht werden sollen. Nur die ausgewählten Optionen werden auf der Registerkarte Erweitert als Felder angezeigt. Vielleicht möchten Sie sie alle einschalten lassen.

Nicht jedes Modul benötigt Zugänglichkeitsattribute. Zum Beispiel können Sie sicher dekorative Elemente wie Trenner, animierte Symbole oder Bildgalerien ohne Unterschriften oder Links überspringen, da sie keine aussagekräftigen Inhalte für Bildschirmleser hinzufügen.

Um ein Modul auszuschließen, geben Sie den Modul -Slug (wie et_pb_image) in den Kompatibilitätsabschnitt ein. Dies sagt, dass das Plugin es überspringen soll, wenn Aria -Felder hinzugefügt werden und sich nur auf die Module konzentrieren, die tatsächlich Successity -Unterstützung benötigen.

Die Registerkarte Elemente

Einige Teile Ihrer Website werden nicht mit Divi -Modulen erstellt. Sie können aus Ihrem Thema, anderen Plugins oder einfachem HTML stammen. Mit der Registerkarte Elemente können Sie diesen Teilen Ihrer Website mit CSS -Selektoren Aria -Attribute hinzufügen. Möglicherweise möchten Sie globale Elemente wie Menüs, Ikonen, Schaltflächen und Formfelder einbeziehen, die im Divi -Builder nicht erstellt wurden.

• ARIA MAIN: Teilen Sie Bildschirmleser mit, wo Ihr Hauptinhalt beginnt, damit sie Menüs oder Seitenleisten überspringen können.
• Aria versteckt: verbirgt dekorative Elemente, damit assistierende Technologie sie nicht laut auslesen.
• ARIA -Link: Markierende Elemente, die keine echten Links als Links sind. Dies hilft Bildschirmlesern, sie richtig zu identifizieren.
• ARIA -Schaltfläche: Fügt Schaltflächenrollen zum Umschalten von Symbolen oder gestylerischen Textlinks hinzu, die wie Schaltflächen wirken.
• ARIA erforderlich: Markiert benutzerdefinierte Formularfelder nach Bedarf, auch wenn das HTML dies nicht sagt.
• Registerkartenindex: Erbringt wichtige Elemente mit der Registerkarte Taste, die für die Navigation nur für die Tastatur hilfreich ist.

Mit jeder Einstellung können Sie diese Rollen mit CSS -Selektoren hinzufügen oder entfernen. Wenn Sie sich nicht sicher sind, wo Sie anfangen sollen, sind ARIA Main und Aria Button gute erste Picks, sie haben oft vermisst und einfach eingerichtet.

Die Registerkarte "Produkte" enthält andere Produkte aus demselben Schöpfer.

Verwenden von Barrierefreiheitattributen innerhalb von Divi 5

Nach dem Setup ereignet sich die eigentliche Arbeit im Baumeister. Jedes Aria -Feld hat einen Zweck. Schauen wir uns an, was es tut, wann es verwendet werden soll und wie es bei der Zugänglichkeit in realen Layouts hilft.

1. Weisen Sie Elementen mit Aria -Rolle Rollen zu

Mit dem Feld ARIA Rollen können Sie einem Element, das im Code möglicherweise nicht offensichtlich ist, einen Zweck zuweisen. Wenn Sie beispielsweise ein Blurbmodul verwendet haben, um eine Anrufe zu erstellen, werden die Bildschirmleser es nicht automatisch als Schaltfläche erkennen. Sie müssen ihm die Rollentaste zuweisen, um die Funktion für Benutzer, die mit Sprachbefehlen oder Tastaturverknüpfungen navigieren, klar zu machen.

Wie in diesem Fall unten enthält dieser Klappentext eine Taste.

Um ARIA -Rolle hinzuzufügen, wechseln Sie die Option und weisen Sie die folgenden Werte ein:

• ARIA -Rollentyp als Widget -Rollen (dies ist die Kategorie, in der interaktive Elemente wie Schaltflächen und Schieberegler leben.)
• ARIA -Aufgabe als Schaltfläche
• ARIA Rollenauswahl als .et_pb_button (Dies ist die Klasse Divi verwendet für Tastenmodule.)

2. Fügen Sie klare Etiketten für Bildschirmleser mit ARIA -Etikett hinzu

Während die ARIA -Rolle assistierende Technologien sagt , was für ein Element ist, erklärt das ARIA -Etikett , was es tut . Dies ist besonders nützlich, wenn ein Element keinen sichtbaren Text hat, wie ein Symbol, eine Button im benutzerdefinierten Stil oder etwas, das interaktiv aussieht, aber nicht laut aussieht. Lassen Sie es uns mit demselben Beispiel aufschlüsseln.

Wir haben die Rolle bereits hinzugefügt, aber der Schaltflächentext heißt „jetzt spenden“. Das ist in Ordnung für visuelle Benutzer, aber Personen, die Bildschirmleser verwenden, benötigen möglicherweise mehr Kontext, noch mehr, da die Schaltfläche mehrmals angezeigt wird.

Um dieser Schaltfläche ein Etikett zuzuweisen, wechseln Sie einfach auf das ARIA -Etikett und fügen Sie ein kurzes Etikett hinzu.

Auf der Schaltfläche heißt es nun weiterhin "Jetzt spenden" auf dem Bildschirm, aber die Bildschirmleser lesen das vollständige Etikett, um den Benutzern zu verstehen, was die Schaltfläche tut und wohin es führt.

3. Geben Sie einen zusätzlichen Kontext mit Aria -Beschreibung an

ARIA -Beschreibung gibt Bildschirmleser mehr Details zu einem Element als ein Etikett erklären kann. Während ein Etikett sagt, was etwas ist, erklärt eine Beschreibung, warum es wichtig ist.

Nehmen wir beispielsweise an, Sie haben mehrere Schaltflächen „Now Now“ auf einer Seite, die jeweils unter eine andere Ursache wie Küstenreinigung, Meeresausbildung oder Wiederherstellung der Lebensräume gestellt werden. Ein Benutzer des Bildschirmleser kann direkt auf der Schaltfläche landen und den Inhalt der nahe gelegenen Inhalte verpassen. Hier hilft die Aria -Beschreibung.

Nehmen wir die erste Karte: Küstenreinigung. Um mehr Kontext hinzuzufügen, können Sie eine Beschreibung wie „Diese Spende unterstützt die Bereinigung des Ozeans und den Schutz von Wildtieren“ als ARIA -Beschreibungstext hin.

Tun Sie dasselbe für die anderen Schaltflächen, so dass, obwohl sie alle visuell „jetzt spenden“ sagen, die Bildschirmleser für jedes einzelne Beschreibungen ankündigen. Dies gibt den Benutzern den vollständigen Kontext, ohne das zu ändern, was sie auf dem Bildschirm sehen.

4.. Dekorative Elemente vor Bildschirmlesern verbergen

Aria Hidden ist hilfreich, wenn Sie etwas visuell anzeigen möchten, wie ein Symbol oder ein Hintergrundbild, möchten jedoch nicht, dass Bildschirmleser es ankündigen. Dadurch konzentriert sich die Erfahrung stärker auf Benutzer, die sich auf assistive Technologie verlassen.

Nehmen Sie beispielsweise das Vorschau -Bild einer Kampagne wie ein Foto von Möwen. Es unterstützt das Design, fügt jedoch keine neuen Informationen hinzu, die über das hinausgeht, was sich bereits in der Überschrift oder in der Beschreibung befindet. Hier können Sie Aria versteckt verwenden, um es vor Bildschirmlesern zu verbergen.

5. Link zu zusätzlichen Informationen mit ARIA -Details

Mit Aria -Details können Sie ein Element mit einem anderen anschließen, das zusätzliche Informationen liefert. Zum Beispiel können Sie eine Schaltfläche mit einem nahe gelegenen Absatz verlinken, in dem erklärt wird, worum es bei der Schaltfläche geht. Es ist nützlich, wenn Sie möchten, dass assistierende Technologien mehr Kontext vorlesen, der nicht direkt Teil des geklickten Elements ist.

Nehmen wir den Bereich der Meeresbildung. Angenommen, Sie möchten, dass der Absatztext die Schaltfläche „Jetzt spenden“ beschreibt. Sie können die Schaltfläche mit ARIA -Details mit dem Absatz verknüpfen.

Fügen Sie zunächst dem Absatz eine eindeutige ID hinzu. Klicken Sie auf das Textmodul , das die Beschreibung enthält, und wechseln Sie zu der ID und Klassen für erweiterte> CSS . Geben Sie Ihre eindeutige ID in das Feld CSS -ID ein. Betreten wir Marine-Edu.

Jetzt hat dieses Textmodul eine ID, auf die Bildschirmleser verweisen können.

Als nächstes fügen wir der Schaltfläche das Attribut der ARIA -Details hinzu. Klicken Sie auf das Schaltflächenmodul und gehen Sie zu den fortgeschrittenen ARIA -Details. Geben Sie Marine-Edue in das ID-Feld ein.

Dies zeigt assistive Technologien, dass die Schaltfläche mit der ID „Marine-Edu“ mit weiteren Informationen im Absatz verbunden ist. Es ist auch hilfreich, wenn Sie denselben Schaltflächentext an verschiedenen Stellen verwenden, aber jeder bedeutet etwas anderes.

Möglicherweise haben Sie festgestellt, dass Aria -Label, Aria -Beschreibung und ARIA -Details auf unterschiedliche Weise zusätzlichen Kontext hinzufügen. Daher ist es am besten, sie nicht im selben Element zu verwenden, wie es die Bildschirmleser verwirren kann. Wenn Sie bereits etwas auf der Seite erklären, sollten Sie ARIA -Details verwenden, um zu diesem Text zu verlinken, anstatt ein neues Etikett oder eine neue Beschreibung zu schreiben.

Sie haben gerade gesehen, wie die Zugänglichkeitsattribute das Hinzufügen von Aria -Rollen, -bezeichnungen und anderen wichtigen Funktionen für die Zugänglichkeit direkt vom Divi -Builder hinzufügen können. Dadurch wird Ihre Website ohne Codierung zugänglich.

Erhalten Sie Zugänglichkeitsattribute

Zusätzliche Divi-Modules-Zugänglichkeitstools für Divi 5

Barrierefreiheit Attribute kümmern sich um die technische Seite der Zugänglichkeit. Es wird außerdem mit Add-Ons (im Barrierefreiheit Bundle) geliefert, mit denen Sie zusätzliche Funktionen wie Tastaturnavigation und visuelle Steuerelemente bieten, um eine vollständigere, inklusive Lösung zu bieten.

1. Barrierefreiheit Seitenleiste

Die Sidebar der Barrierefreiheit fügt eine schwimmende Symbolleiste hinzu, in der Benutzer ihr Browsererlebnis anpassen können. Besucher mit Mobilitätsstörungen können Schriftgrößen einstellen, in den hohen Kontrastmodus umstellen, Graustufen aktivieren und mit einer Tastatur navigieren. Sie können es auch an das Design Ihrer Website anpassen.

2. Barrierefreiheit Amtiers

Barrierefreiheit -Optimierungen fügt praktische Funktionen hinzu, mit denen Benutzer einfacher durch die Navigation in Ihrer Website navigieren können. Dazu gehören Überspringen von Links für eine bessere Navigation, Fokusumleiter, um Tastaturnutzern zu unterstützen, wo sie sich befinden, und andere subtile Verbesserungen, die die Benutzerfreundlichkeit verbessern, ohne das Layout Ihrer Website zu ändern.

Schauen Sie sich Barrierefreiheit Bundle an

Machen Sie Ihre Divi 5 -Websites heute zugänglich

Barrierefreiheit Attribute bieten Ihnen eine einfache und visuelle Möglichkeit, Ihre Divi -Site integrativer zu gestalten. Keine Codierung, keine Problemumgehungen - genau die richtigen Werkzeuge, die direkt in den Bauherrn aufgebaut sind.

Es ist vollständig kompatibel mit Divi 5, aktiv unterstützt und jetzt 50% Rabatt bis zum 28. Juni. Solange das Angebot läuft, können Sie das volle Barrierebündel, einschließlich Seitenleiste und Optimierungen, für nur 36 US -Dollar pro Jahr erhalten. Wenn Sie bereit sind, Ihre Website für alle zu verbessern, ist dies der einfachste Weg, um zu beginnen.

Holen Sie sich Barrierebündel 50% Rabatt