Das WCAG-Erfolgskriterium 1.3.3 „Sensorische Eigenschaften“ legt fest, dass Anweisungen zur Nutzung von Inhalten nicht ausschließlich auf sensorischen Merkmalen beruhen dürfen. In diesem Beitrag erfahren Sie, wie Sie Ihre Webinhalte so gestalten, dass sie für alle Nutzer, unabhängig von ihren sensorischen Fähigkeiten, zugänglich sind.
Was sind sensorische Eigenschaften?
Sensorische Eigenschaften beziehen sich auf Merkmale, die über die menschlichen Sinne wahrgenommen werden. Im Kontext der Webzugänglichkeit umfasst dies vor allem:
- Visuelle Eigenschaften (Form, Farbe, Größe, Ort)
- Auditive Eigenschaften (Klang, Lautstärke, Tonhöhe)
- Taktile Eigenschaften (Textur, Vibration)
Warum sind sensorische Eigenschaften wichtig für die Barrierefreiheit?
Nicht alle Nutzer können sensorische Eigenschaften gleichermaßen wahrnehmen. Beispielsweise:
- Menschen mit Sehbehinderungen können visuelle Hinweise möglicherweise nicht erkennen.
- Gehörlose oder schwerhörige Nutzer können auditive Signale nicht wahrnehmen.
- Nutzer mit motorischen Einschränkungen können möglicherweise nicht auf bestimmte Formen oder Positionen reagieren.
Daher ist es entscheidend, Informationen und Anweisungen so zu gestalten, dass sie nicht ausschließlich auf sensorischen Eigenschaften basieren.
Best Practices für die Berücksichtigung sensorischer Eigenschaften
1. Textuelle Beschreibungen
Ergänzen Sie visuelle oder auditive Hinweise stets durch textuelle Beschreibungen.
Beispiel für einen barrierefreien Button:
<button>
<img src=“save-icon.png“ alt=“Speichern“>
Speichern
</button>
Visuelle Elemente wie Icons werden durch textuelle Beschreibungen ergänzt, um sie barrierefrei zu machen. Das alt-Attribut beschreibt das Bild für Screenreader. Der zusätzliche Text „Speichern“ stellt sicher, dass der Button auch ohne Bild verständlich bleibt.
2. Farbunabhängige Informationsvermittlung
Verwenden Sie nicht ausschließlich Farben, um Informationen zu vermitteln. Ergänzen Sie farbliche Hinweise durch Symbole oder Text.
Beispiel für eine barrierefreie Statusanzeige:
<p class=“status success“>
<span class=“icon“>✓</span> Erfolgreich abgeschlossen
</p>
<p class=“status error“>
<span class=“icon“>✗</span> Fehler aufgetreten
</p>
<style>
.status.success { color: green; }
.status.error { color: red; }
.icon { margin-right: 5px; }
</style>
In dem Code werden farbliche Hinweise (z. B. Grün oder Rot) durch Symbole und Text ergänzt, um Informationen unabhängig von sensorischen Eigenschaften hier den Farben zugänglich zu machen. Farben dienen nur als Unterstützung, nicht als alleinige Informationsquelle.
3. Richtungsunabhängige Anweisungen
Vermeiden Sie Anweisungen, die sich ausschließlich auf Richtungen oder Positionen beziehen.
Statt:
„Klicken Sie auf den Button rechts oben“
Besser:
„Klicken Sie auf den ‚Weiter‘-Button neben dem Suchfeld“
4. Multimodale Feedback-Mechanismen
Bieten Sie Feedback auf mehreren Kanälen an, um verschiedene sensorische Eigenschaften zu berücksichtigen.
Beispiel für ein barrierefreies Formular-Feedback:
<form id=“myForm“>
<label for=“name“>Name:</label>
<input type=“text“ id=“name“ name=“name“ required>
<button type=“submit“>Absenden</button>
<div id=“feedback“ aria-live=“polite“></div>
</form>
<script>
document.getElementById(‚myForm‘).addEventListener(’submit‘, function(e) {
e.preventDefault();
var feedback = document.getElementById(‚feedback‘);
feedback.textContent = ‚Formular erfolgreich gesendet!‘;
feedback.classList.add(’success‘);
// Visuelles Feedback
feedback.style.backgroundColor = ‚#dff0d8‘;
feedback.style.border = ‚1px solid #d6e9c6‘;
// Auditives Feedback
var audio = new Audio(’success-sound.mp3′);
audio.play();
});
</script>
Der Code zeigt eine Bestätigungsmeldung an und spielt einen Ton ab, wenn das Formular abgesendet wurde, ohne die Seite neu zu laden. Dabei wird sowohl visuelles als auch auditives Feedback gegeben und die Barrierefreiheit berücksichtigt.
5. Responsive Design und flexible Layouts
Verwenden Sie responsive Design-Techniken, um sicherzustellen, dass Inhalte unabhängig von der Bildschirmgröße oder -ausrichtung zugänglich bleiben.
Beispiel für ein flexibles Layout mit CSS Grid:
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
</style>
<div class=“grid-container“>
<div class=“grid-item“>Inhalt eins</div>
<div class=“grid-item“>Inhalt zwei</div>
…
</div>
Dieser Code erzeugt ein flexibles, responsives Grid-Layout, in dem die Elemente (Items) automatisch in Spalten angeordnet werden. Die Spalten passen sich an die Breite des Viewports an, wobei jedes Item mindestens 250px breit ist und bei Bedarf mehr Platz einnimmt.
Herausforderungen und Lösungen
Komplexe Interaktionen
Bei komplexen Interaktionen oder Spielen kann es schwierig sein, vollständig auf sensorische Eigenschaften zu verzichten.
Lösung: Bieten Sie alternative Spielmodi oder Steuerungsmöglichkeiten an.
Dynamische Inhalte
Bei dynamisch generierten Inhalten kann es schwierig sein, konsistente nicht-sensorische Beschreibungen zu gewährleisten.
Lösung: Implementieren Sie ein System, das automatisch textuelle Beschreibungen generiert.
Beispiel für dynamisch generierte, barrierefreie Inhalte:
function createDynamicContent(type, content) {
…
switch(type) {
case ‚warning‘:
icon.textContent = ‚⚠️‘;
icon.setAttribute(‚aria-hidden‘, ‚true‘);
text.textContent = ‚Warnung: ‚ + content;
container.style.backgroundColor = ‚yellow‘;
break;
case ‚info‘:
icon.textContent = ‚ℹ️‘;
icon.setAttribute(‚aria-hidden‘, ‚true‘);
text.textContent = ‚Information: ‚ + content;
container.style.backgroundColor = ‚lightblue‘;
break;
}
container.appendChild(icon);
container.appendChild(text);
container.setAttribute(‚role‘, ‚alert‘);
return container;
}
// Verwendung
const dynamicContent = createDynamicContent(‚warning‘, ‚Bitte speichern Sie Ihre Änderungen.‘);
document.body.appendChild(dynamicContent);
Dieser Code erzeugt dynamisch barrierefreie Inhalte wie Warnungen oder Informationen. Die Symbole werden hinzugefügt und für Screenreader versteckt (aria-hidden=“true“). Der zugehörige Text wird automatisch erstellt und visuell hervorgehoben. Das role=“alert“ sorgt dafür, dass Screenreader die Inhalte sofort vorlesen.
Testen der Berücksichtigung sensorischer Eigenschaften
Um sicherzustellen, dass Ihre Webinhalte das WCAG-Kriterium 1.3.3 erfüllen, können Sie folgende Tests durchführen:
- Deaktivieren Sie CSS und überprüfen Sie, ob alle Informationen noch verständlich sind.
- Nutzen Sie Ihre Webseite ausschließlich mit der Tastatur und prüfen Sie, ob alle Funktionen zugänglich sind.
- Verwenden Sie einen Screenreader, um zu testen, ob alle Informationen auch ohne visuelle Hinweise verständlich sind.
- Testen Sie Ihre Webseite mit verschiedenen Bildschirmgrößen und -ausrichtungen.
- Bitten Sie Nutzer mit verschiedenen Einschränkungen, Ihre Webseite zu testen und Feedback zu geben.
Vorteile der Berücksichtigung sensorischer Eigenschaften
Die Beachtung des WCAG-Kriteriums 1.3.3 bringt mehrere Vorteile mit sich:
- Verbesserte Zugänglichkeit für Menschen mit Behinderungen
- Erhöhte Benutzerfreundlichkeit für alle Nutzer
- Bessere Kompatibilität mit verschiedenen Geräten und Browsern
- Potenzielle Verbesserung des SEO-Rankings durch erhöhte Zugänglichkeit
- Erfüllung rechtlicher Anforderungen in vielen Ländern
Sensorische Eigenschaften: Alles Wichtige in Kürze
Die Berücksichtigung sensorischer Eigenschaften gemäß WCAG 1.3.3 ist ein entscheidender Aspekt für die Gestaltung barrierefreier Webinhalte. Durch die Vermeidung von Anweisungen, die ausschließlich auf Form, Größe, Farbe oder Position basieren, sowie durch die Bereitstellung alternativer Informationskanäle, machen Sie Ihre Webseite für ein breiteres Publikum zugänglich.
Wichtige Praktiken umfassen die Verwendung textueller Beschreibungen, farbunabhängiger Informationsvermittlung, richtungsunabhängiger Anweisungen und multimodaler Feedback-Mechanismen. Responsive Design und flexible Layouts tragen zusätzlich dazu bei, dass Inhalte unabhängig von der Darstellungsform verständlich bleiben.
Durch regelmäßiges Testen und die Berücksichtigung verschiedener Nutzerbedürfnisse schaffen Sie eine inklusive digitale Umgebung, die nicht nur die Zugänglichkeit verbessert, sondern auch die allgemeine Benutzerfreundlichkeit steigert und möglicherweise sogar Ihre Suchmaschinenoptimierung unterstützt.
