Dies ist eine der größten Herausforderungen bei SPAs. Wenn die URL sich ändert, aber die Seite nicht neu lädt, bleibt der Fokus oft auf dem angeklickten Link zurück.
- Fokus manuell setzen: Nach jedem Routen-Wechsel muss dein Code den Fokus aktiv auf den neuen Inhaltsbereich setzen, idealerweise auf die neue
-Überschrift der Seite. Dies signalisiert Screenreader-Nutzer:innen, dass sich der Seiteninhalt geändert hat.
- Seitentitel aktualisieren: Der des Dokuments ändert sich bei SPAs nicht automatisch. Implementiere eine Lösung (z. B. mit react-helmet), um den Seitentitel bei jedem Routen-Wechsel dynamisch zu aktualisieren. Dies ist entscheidend für die Orientierung.</li>
</ul>
</div> </details> </div></div> <section id="s-ergebnis" class="band grayband"><div class="wrapc"> <h2 class="center-h">✅ Ergebnis</h2> <div><p>Am Ende dieser SOP hast du:</p>
<ul>
<li>Die Fähigkeit, moderne und mächtige Werkzeuge zu nutzen, ohne die Barrierefreiheit zu opfern.</li>
<li>Eine klare Strategie zur Bewertung, Konfiguration und Ergänzung dieser Tools, um konforme Websites zu erstellen.</li>
<li>Weniger „Black Box“-Probleme, bei denen das Werkzeug einen unzugänglichen Output diktiert.</li>
<li>Die Kontrolle über deinen Code und deine Barrierefreiheit zurückgewonnen.
Und hier noch ein Textbaustein, der dir helfen soll, wenn eine Agentur oder ein Entwickler deinen Online Shop oder deine Website für dich erstellen.
Betreff: Anforderungen an den Einsatz von Pagebuildern / Frameworks für unser Projekt
Hallo Team,</li>
</ul>
<p>für die technische Umsetzung unseres neuen Webprojekts gelten folgende Anforderungen an die verwendeten Werkzeuge:</p>
<ul>
<li>Semantischer Output: Das gewählte Tool (Pagebuilder oder Framework) muss die Erzeugung von semantisch korrektem HTML (korrekte Überschriften-Hierarchie, nav, main etc.) ermöglichen.</li>
<li>Manuelle Kontrolle: Es muss möglich sein, HTML-Tags und Attribute (wie aria-label) bei Bedarf manuell anzupassen.</li>
<li>Komplexe Komponenten: Eingebaute Module für Slider, Tabs oder Akkordeons müssen entweder nachweislich barrierefrei sein oder durch eine zugängliche Alternative (z. B. eine externe Bibliothek oder eine Eigenentwicklung) ersetzt werden.</li>
<li>Bei SPAs: Ein robustes Fokus-Management und die dynamische Aktualisierung des Seitentitels bei Routen-Wechseln müssen implementiert werden.</li>
</ul>
<p>Bitte berücksichtigt diese Punkte bei der Auswahl der technologischen Basis und während der gesamten Entwicklung.</p>
<p>Danke!</p>
<p>Viele Grüße [Dein Name]
Fragen und Antworten (FAQ ) zu dieser SOP</p>
</div> </div></section> <div id="s-copy" class="wrapc" style="padding:44px 28px;"><div class="cpbox"> <h2>💬 Copy-Paste-Baustein</h2> <div></div> </div></div> <div class="wrapc"><div class="navbtns"> <a class="pill" href="/sop/sop-39">Zu SOP 39 →</a> <a class="pill" href="/sops">📚 Zurück zum Inhaltsverzeichnis</a> </div></div> <section id="s-faq" style="padding:48px 0 70px"><div class="wrapc"> <h2 class="center-h">Fragen und Antworten (FAQ) zu dieser SOP</h2> <div class="faqwrap"> <details class="faq navy"> <summary>Ich nutze einen Pagebuilder. Was ist der einfachste Weg, um zu prüfen, welche Module semantisch korrekt sind und welche nur </p> <div>s ausgeben?<span class="ar" aria-hidden="true">⤢</span></summary> <div class="body"><p>Der einfachste Weg, das zu prüfen, du, ist der Browser-Inspektor (Rechtsklick auf das Element → „Untersuchen“ oder „Element untersuchen“).</p>
<p>•
Wähle das Modul auf deiner Seite aus: Klick es an und schau dir den generierten HTML-Code an.</p>
<p>•
Prüfe den Tag: Wenn du ein „Überschriften“-Modul verwendest, sollte dort <h1 , <h2 , etc. stehen. Siehst du stattdessen <div oder <span> mit Inline-Styles, ist das ein Warnsignal, dass es nicht semantisch ist.</p>
<p>•
Teste Button vs. Klickbare Box: Ein echtes Button-Modul sollte einen <button> -Tag generieren. Eine „Klickbare Box“ ist oft nur ein <div> oder <span> mit einem onClick -Handler, was Tastaturnutzende ausschließt.</p>
<p>Das erfordert ein wenig technisches Verständnis, aber es ist der direkteste Weg zur Wahrheit über die Semantik deiner Module.</p>
</div> </details><details class="faq gray"> <summary>Meine Designer bestehen auf einem speziellen %22Custom Module%22 für Animationen oder komplexe Layouts, das vom Pagebuilder nicht nativ unterstützt wird. Wie sorge ich hier für Barrierefreiheit?<span class="ar" aria-hidden="true">⤢</span></summary> <div class="body"><p>Bei Custom Modules, die außerhalb der Standard-Pagebuilder-Module liegen, liegt die volle Verantwortung für die Barrierefreiheit bei dir und deinem Entwicklungsteam.</p>
<p>•
Definiere klare Anforderungen: Gib den Entwicklern, die dieses Custom Module bauen, eine klare Spezifikation mit allen relevanten SOPs (z.B. für Animationen, Modale, Fokus-Management, Semantik). Es sollte von Anfang an „Accessibility by Design“ umgesetzt werden.</p>
<p>•
Regelmäßiges Testing: Baue von Anfang an Tastatur- und Screenreader-Tests in den Entwicklungszyklus ein. Warte nicht bis zum Ende.</p>
<p>•
Code-Reviews: Implementiert Code-Reviews, die einen Fokus auf die Einhaltung von Barrierefreiheitsstandards legen.</p>
<p>•
Dokumentation: Bestehe auf einer detaillierten Dokumentation der Barrierefreiheitseigenschaften des Custom Modules, damit es von anderen Teams korrekt genutzt und gewartet werden kann.</p>
<p>Ein Custom Module bietet mehr Flexibilität, birgt aber auch ein höheres Risiko für Barrierefreiheitslücken, wenn es nicht sorgfältig umgesetzt wird.</p>
</div> </details><details class="faq navy"> <summary>Was ist, wenn mein Pagebuilder es mir erlaubt, mehrere H1-Module auf einer Seite zu platzieren? Wie gehe ich damit um?<span class="ar" aria-hidden="true">⤢</span></summary> <div class="body"><p>Das ist ein sehr häufiges Problem bei Pagebuildern, du! Die Möglichkeit, mehrere H1s zu platzieren, ist ein Designfehler des Builders. Deine Aufgabe ist es, diese Funktion nicht zu nutzen und diszipliniert zu bleiben:</p>
<p>•
Klares Kommunikations-Briefing: Informiere alle Content-Ersteller und Redakteure über diese Regel. H1 ist für den Haupttitel der Seite (z.B. der Titel des Blogposts oder der Produktseite) und sollte nur einmal vorkommen.</p>
<p>•
HTML-Tag-Management: Nutze die Funktion, den HTML-Tag manuell einzustellen (wie in SOP Phase 2 beschrieben), um sicherzustellen, dass nur der eigentliche Seitentitel ein H1 ist und alle anderen „großen“ Überschriften H2, H3, etc. sind.</p>
<p>•
Audit-Prozess: Implementiere einen regelmäßigen Audit-Prozess (z.B. mit Tools wie WAVE oder axe DevTools), der Seiten auf multiple H1s prüft. So kannst du Fehler identifizieren und korrigieren.</p>
<p>Ein einziger, klar definierter H1 ist entscheidend für die Navigation und das Verständnis der Seitenstruktur durch Screenreader.</p>
</div> </details><details class="faq gray"> <summary>Ich verwende ein JavaScript-Framework (z.B. React, Angular, Vue). Wie genau helfen mir %22Fragmente%22 dabei, unnötige </p> <div>-Container zu vermeiden, und warum ist das wichtig für die Barrierefreiheit?<span class="ar" aria-hidden="true">⤢</span></summary> <div class="body"><p>Das ist ein exzellenter Punkt! In Frameworks wie React können Komponenten oft zusätzliche <div> -Wrapper um ihre Inhalte legen, die eigentlich nicht benötigt werden und das HTML unnötig aufblähen.</p>
<p>•
Fragmente ( <>...</> oder <React.Fragment>...</React.Fragment> ): Erlauben es dir, mehrere Elemente in einer Komponente zurückzugeben, ohne einen zusätzlichen DOM-Knoten (also einen <div> ) zu erstellen.</p>
<p>•
Wichtigkeit für Barrierefreiheit:</p>
<p>•
Weniger unnötige DOM-Elemente: Ein „saubererer“ DOM-Baum ist leichter zu verarbeiten für Browser und Screenreader. Jeder unnötige <div> kann theoretisch die Lesereihenfolge stören oder die Struktur unübersichtlicher machen.</p>
<p>•
Keine Brechung von semantischen Strukturen: Stell dir vor, du hast eine Tabelle <table> und möchtest Zeilen ( <tr> ) in einer Unterkomponente rendern. Wenn diese Unterkomponente einen <div> als Wrapper hätte, würde sie die <tr> s direkt in das <table> rendern und damit die semantische Struktur von HTML-Tabellen brechen (ein <tr> darf nur direkt im <table> oder <tbody> sein). Fragmente verhindern dies, indem sie den <div> -Wrapper entfernen und die <tr> s direkt rendern. Fragmente sind also ein kleines, aber feines Detail, das zu einem saubereren, semantisch korrekteren und damit barrierefreieren Code beiträgt.</p>
</div> </details><details class="faq navy"> <summary>Meine SPA hat viele dynamische Inhalte, die sich beim Routen-Wechsel ändern. Reicht es, den Fokus auf die neue </p> <h1> zu setzen, oder muss ich auch ARIA Live Regions für andere dynamische Änderungen nutzen?<span class="ar" aria-hidden="true">⤢</span></summary> <div class="body"><p>Den Fokus auf die neue <h1> zu setzen, ist ein hervorragender Startpunkt für die Orientierung bei einem Routen-Wechsel, du! Es signalisiert dem Nutzer, dass er auf einer „neuen Seite“ gelandet ist.</p>
<p>•
Fokus für Hauptinhaltswechsel: Der Fokus auf die <h1> ist ideal, um den Startpunkt des neuen Inhalts zu markieren.</p>
<p>•
ARIA Live Regions für Statusänderungen: Wenn innerhalb der neuen Seite weitere dynamische Inhalte geladen oder aktualisiert werden, die nicht den Hauptinhalt betreffen (z.B. eine Erfolgsmeldung nach einem Formularversand, ein Lade-Spinner, der plötzlich erscheint, oder eine Filterung, die die angezeigte Liste ändert), solltest du weiterhin ARIA Live Regions ( aria-live="polite" oder role="status" ) nutzen. Diese stellen sicher, dass Screenreader diese kurzlebigen oder asynchronen Statusänderungen vorlesen, ohne den Fokus zu verschieben.</p>
<p>Es ist also ein Zusammenspiel: Der Fokus für den „großen“ Wechsel der Seite, Live Regions für die „kleineren“ Statusänderungen innerhalb der Seite.</p>
</div> </details> </div> </div></section> <script>
// Callouts im "Warum"-Body (nativer Markdown-Body)
document.querySelectorAll('.sop-content p').forEach(function (p) {
if (/^(Aber Achtung|Achtung|Wichtig|Hinweis|Beachte)[!:]/i.test((p.textContent || '').trim())) {
var a = document.createElement('aside');
a.className = 'callout';
a.innerHTML = '<span class="ci" aria-hidden="true">!</span><div>' + p.innerHTML + '</div>';
p.replaceWith(a);
}
});
// Tabs
document.querySelectorAll('.tabbar').forEach(function (bar) {
var btns = bar.querySelectorAll('.tabbtn');
var panes = bar.parentElement.querySelectorAll('.tabpane');
btns.forEach(function (b) {
b.addEventListener('click', function () {
btns.forEach(function (x) { x.setAttribute('aria-selected', 'false'); });
panes.forEach(function (x) { x.classList.remove('active'); });
b.setAttribute('aria-selected', 'true');
panes[+b.dataset.t].classList.add('active');
});
});
});
// Schritt-Fortschritt (localStorage)
(function () {
var key = 'regukit_' + location.pathname;
var boxes = [].slice.call(document.querySelectorAll('.tg input[type=checkbox]'));
var saved = {}; try { saved = JSON.parse(localStorage.getItem(key) || '{}'); } catch (e) {}
function upd() {
var n = 0;
boxes.forEach(function (b) { b.closest('.tg').classList.toggle('done', b.checked); if (b.checked) n++; });
var p = boxes.length ? Math.round((100 * n) / boxes.length) : 0;
var f = document.getElementById('pf'); if (f) f.style.width = p + '%';
var m = document.getElementById('pm'); if (m) m.textContent = n + ' von ' + boxes.length + ' Schritten erledigt';
var pp = document.getElementById('pp'); if (pp) pp.textContent = p + ' %';
}
boxes.forEach(function (b, i) { if (saved[i]) b.checked = true; b.addEventListener('change', function () { saved[i] = b.checked; localStorage.setItem(key, JSON.stringify(saved)); upd(); }); });
upd();
})();
// Kopieren
document.querySelectorAll('.cp-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
var m = btn.closest('.cp-mail');
var t = m.querySelector('.cp-subject').innerText + '\n\n' + m.querySelector('.cp-body').innerText;
navigator.clipboard.writeText(t).then(function () { btn.textContent = 'Kopiert ✓'; setTimeout(function () { btn.textContent = 'Kopieren'; }, 1600); });
});
});
// Scroll-Spy
(function () {
var links = [].slice.call(document.querySelectorAll('.toc a'));
var secs = links.map(function (a) { return document.querySelector(a.getAttribute('href')); });
if (!('IntersectionObserver' in window)) return;
var obs = new IntersectionObserver(function (es) {
es.forEach(function (e) {
if (e.isIntersecting) {
links.forEach(function (a) { a.classList.remove('active'); });
var i = secs.indexOf(e.target); if (i >= 0) links[i].classList.add('active');
}
});
}, { rootMargin: '-30% 0px -60% 0px' });
secs.forEach(function (s) { if (s) obs.observe(s); });
})();
</script> </main> </body></html>
