Du baust deine Website gerade mit Divi 5 und bist fast fertig oder du hast schon eine Divi 5 Website. Doch dann kommt die Frage: Wie machst du deine Seite barrierefrei, ohne dich in Technik zu verlieren? Ein einfacher, aber wirkungsvoller Schritt ist das aria-label. In diesem Artikel erfährst du, was ein aria-label ist, warum es für Barrierefreiheit wichtig ist und wie du es in Divi 5 einsetzt.
Was ist ein aria-label?
Ein aria-label ist ein unsichtbares Attribut im HTML-Code. Es hilft Screenreadern, Elemente richtig zu beschreiben, die sonst unverständlich wären.
Beispiel:
Ein Such-Icon ohne Text sagt einem Screenreader nur „Button“. Mit aria-label="Suche öffnen" wird klar, was dieser Button bewirkt.
Das bedeutet: Deine Seite wird für alle nutzbar, auch für Besucher*innen mit Sehbeeinträchtigung.
Warum aria-labels in Divi 5 wichtig sind
- Barrierefreiheit: Du erfüllst wichtige Standards und machst deine Inhalte für mehr Menschen zugänglich, auch wenn du wie ich gar nicht dazu verpflichtet bist.
- Benutzerfreundlichkeit: Besucher*innen verstehen deine Website besser, auch wenn sie auf Hilfstechnologien angewiesen sind.
- SEO: Google bevorzugt Websites mit guter Usability. Barrierefreiheit wirkt sich positiv auf dein Ranking aus.
Kurz gesagt: Mit aria-labels machst du deine Website professioneller, zugänglicher und suchmaschinenfreundlicher.
aria-labels in Divi 5 einfügen – Schritt für Schritt
Divi 5 macht es einfach, eigene Attribute wie aria-label einzubauen. So gehst du vor:
1. Modul auswählen: z.B. Social-Media-Icons
2. Erweiterte Einstellungen öffnen
Klicke im Modul-Editor auf dein erstes Icon und dann den Reiter Erweitert und scrolle zu Attribute.
3. aria-label hinzufügen
Trage im Bereich „Attribut hinzufügen“ ein:
- Admin label:
Arial Label (da kannst du reinschreiben was du möchtest) - Target Element: Module
- Attribute Name: aria-label
- Attribute Value: Zu meinem LinkedIn Profil
4. Speichern und testen
Speichere deine Änderungen und teste die Seite. Am besten testest du deine Website mit wave.webaim.org. Gib dort deine Domain ein und schau dir deine Aria Labels an.
Benutze das Aria Label überall dort wo kein Text vorhanden ist!
Fazit: Mit aria-labels Barrierefreiheit und SEO verbessern
Barrierefreiheit wirkt auf den ersten Blick komplex. Doch mit kleinen Schritten wie dem Setzen von aria-labels in Divi 5 machst du deine Website sofort barrierearmer. So verbesserst du nicht nur die Nutzererfahrung, sondern stärkst auch deine Sichtbarkeit in Google.
Deine Divi 5 Website wird damit nicht nur schön, sondern auch verständlich. Und das für alle.