Die Relevanz barrierefreier Popups in modernen Webdesigns
Ich bin ja grad im Deep Dive zum Thema Barrierefreiheit im Netz (Disclaimer: ja meine Website ist noch sehr überarbeitungswürdig). Nochmal kurzes Recap: Im Kern geht es darum, dass wirklich jeder im Netz die gleichen Chancen haben sollte, Inhalte zu erleben und zu nutzen – und dazu gehören auch die so oft übersehenen Popups. Hier mal ein Verweis auf einen älteren Blogartikel von mir, der erklärt, warum Barrierefreiheit im Web so wichtig ist.
Barrierefreiheit ist mehr als nur eine technische Anforderung; es ist ein Versprechen an alle Nutzer, dass sie willkommen sind und dass ihre Bedürfnisse ernst genommen werden. Wir als Websitenbetreiber haben die Verantwortung, dieses Versprechen einzuhalten.
Erstellung von Popups in Elementor
Also, fangen wir mal ganz einfach an. In Elementor erstellst du ein Popup, indem du zuerst einen Button auf deiner Seite platzierst. Sobald dein Besucher dann auf den Button klickt, öffnet sich das Popup. Das Popup erstellst du mit Elementor Pro im extra Fenster. Damit sich das Popup öffnet, gibst du kein statisches Linkziel ein, sondern wählst dein Popup als dynamischen Inhalt aus. Anleitungen gibt es hierzu genug. Aber die wirkliche Herausforderung ist es, all das barrierefrei zu gestalten.
Schritt-für-Schritt: barrierearme Popups mit Elementor erstellen
Was ist überhaupt wichtig im Bezug auf Barrierefreiheit und Popups?
Zuerst solltest du testen, welche der Standardfunktionen von Elementor bereits barrierefrei sind. Beispielsweise ist es entscheidend, dass sich Popups nicht nur durch Mausklicks, sondern auch über Tastaturbefehle öffnen und schließen lassen – ja, das Schließen über die ESC-Taste ist hier ein Muss. Und das geht auch tatsächlich schon ganz gut. Auch das Attribut aria modal=true, war bei meinem letzten Versuch vorhanden.
Barrierefreiheit bedeutet auch, auf Details zu achten. Stelle also sicher, dass alle Inhalte des Popups, einschließlich Text und Bilder, klar verständlich und leicht zugänglich sind. Und denk dran, auch Menschen mit eingeschränkter Sehfähigkeit nutzen das Web. Nutze also kontrastreiche Farbschemata und biete Textbeschreibungen für alle Bilder und Videos. Für die Inhalte des Popups gilt also dasselbe, wie für die anderen Seiten auch.
Der Fokus sollte direkt im Popup in das erste fokussierbare Element springen. Beim Schließen sollte es dann weiter in der richtigen Reihenfolge mit dem Tabben gehen. Es sollte ein großes Schließen-Zeichen zu sehen sein (z.B. ein großes X). Das Schließen Symbol sollte beschriftet sein mit “Popup schließen” oder Ähnlichem. Es sollte genauso beschriftet sein, was sich beim Öffnen des Buttons tut. Außerdem sollte es mit role=dialog und nicht role=document ausgezeichnet sein.
Nun geht es an die konkrete Umsetzung zu barrierearmen Popups mit Elementor
- As always: Backup machen – better safe than sorry
- Popup inhaltlich verbessern = Kontraste, Struktur, Texte umschreiben, Überschriften, Responsivität (dafür gehst du direkt in den Popup Builder und passt alles an)
- Dem entsprechenden Button vergibst du ein Attribut unter Erweitert → Dort schreibst du einfach folgendes rein aria-label|Popup öffnen
- Code Snippets einfügen. Da wir jetzt Javascript einfügen, müssen wir dies immer am Body Ende machen. Du kannst es in Costum Code einfügen oder z. B. über das Plugin Code Snippets. Hinweis: nicht verwechseln mit CSS!
Hier kommt der erste Code, der den Fokus beim Öffnen setzt und beim Schließen wieder zurück setzt.
// Fokus beim Öffnen setzen & Rücksprung beim Schließen
(function($) {
var lastTrigger = null;
// Vor dem Öffnen: Trigger merken
$(document).on('click', '[data-elementor-open-popup]', function() {
lastTrigger = $(this);
});
// Beim Öffnen Fokus ins Popup setzen
$(document).on('elementor/popup/show', function(event, id) {
var $popup = $('#elementor-popup-modal-' + id);
var $focusTarget = $popup.find('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])').first();
if ($focusTarget.length) {
$focusTarget.focus();
} else {
$popup.attr('tabindex','-1').focus();
}
});
// Beim Schließen Fokus zurück auf Trigger setzen
$(document).on('elementor/popup/hide', function() {
if (lastTrigger && lastTrigger.length) {
lastTrigger.focus();
}
});
})(jQuery);Der zweite Code fügt ein Aria-Label für das Schließen-Icon hinzu:
jQuery(document).on('elementor/popup/show', function(event, id) {
jQuery('#elementor-popup-modal-' + id).find('.dialog-close-button').attr('aria-label', 'Popup schließen');
});Der dritte Code fügt role=dialog hinzu:
jQuery(document).on('elementor/popup/show', function(event, id) {
jQuery('#elementor-popup-modal-' + id).attr('role', 'dialog');
});Fertig! Du hast nun dein Popup viel inklusiver gestaltet. Es gibt noch viel zu tun, um Websites barrierearm zu machen. Ich möchte dich aber ermutigen, dich nicht von der Komplexität abschrecken zu lassen. In dem Punkt muss man nicht nach dem Motto „Ganz oder gar nicht“ leben. Jeder kleine Schritt zählt meiner Meinung nach, und jeder von uns kann etwas beitragen, um das Web für alle zugänglicher zu machen. Heute hast du schon einen großen Schritt getan und dich mit barrierearmen Popups beschäftigt. Jetzt fehlt noch der Umsetzungspart, also trau dich ruhig und probiere es aus. Falls du Fragen hast oder an einer Stelle nicht weiterkommst, melde dich bei mir oder hinterlasse einen Kommentar. Oder buche einfach ein kostenloses Erstgespräch mit mir.
0 Kommentare