Barrierefreiheit

Dieser Artikel bietet eine Übersicht darüber, wie Braze die Barrierefreiheit innerhalb Ihrer Integration unterstützt.

Das Braze Web SDK unterstützt die Standards der Web Content Accessibility Guidelines (WCAG 2.1). Wir halten bei allen unseren neuen Versionen einen Lighthouse-Score von 100/100 für Content Cards und In-App-Nachrichten ein, um unseren Standard für Barrierefreiheit aufrechtzuerhalten.

Voraussetzungen

Die Mindest-SDK-Version, die WCAG 2.1 erfüllt, liegt nahe an v3.4.0. Wir empfehlen jedoch, auf mindestens Version 6.0.0 zu upgraden, um wichtige Fehlerbehebungen bei Bild-Tags zu erhalten.

Wichtige Verbesserungen der Barrierefreiheit

Unterstützte Barrierefreiheitsfeatures

Wir unterstützen die folgenden Features für Content Cards und In-App-Nachrichten:

• ARIA-Rollen und -Labels
• Unterstützung der Tastaturnavigation
• Fokusverwaltung
• Screenreader-Ankündigungen
• Alt-Text-Unterstützung für Bilder

Richtlinien zur Barrierefreiheit für SDK-Integrationen

Allgemeine Richtlinien zur Barrierefreiheit finden Sie unter Barrierefreie Nachrichten in Braze erstellen. Dieser Leitfaden enthält Tipps und bewährte Verfahren für maximale Barrierefreiheit bei der Integration des Braze Web SDK in Ihre Webanwendung.

Content Cards

Festlegen einer maximalen Höhe

Um zu verhindern, dass Content Cards zu viel vertikalen Platz einnehmen, und um die Barrierefreiheit zu verbessern, können Sie eine maximale Höhe für den Feed-Container festlegen, wie in diesem Beispiel:

1
2
3
4
5
6
7
8
9
10
11
/* Limit the height of the Content Cards feed */
.ab-feed {
  max-height: 600px; /* Adjust to your needs */
  overflow-y: auto;
}

/* For inline feeds (non-sidebar), you may want to limit individual cards */
.ab-card {
  max-height: 400px; /* Optional: limit individual card height */
  overflow: hidden;
}

Überlegungen zum Darstellungsbereich

Bei Content Cards, die inline angezeigt werden, sollten Sie die Einschränkungen des Darstellungsbereichs berücksichtigen, wie in diesem Beispiel dargestellt.

1
2
3
4
5
6
/* Limit feed height on mobile to prevent covering too much screen */
@media (max-width: 768px) {
  body > .ab-feed {
    max-height: 80vh; /* Leave space for other content */
  }
}

In-App-Nachrichten

Warnung

Fügen Sie keine wichtigen Informationen in Slide-up-In-App-Nachrichten ein, da diese für Screenreader nicht zugänglich sind.

Überlegungen für Mobilgeräte

Responsives Design

Das SDK enthält responsive Haltepunkte. Stellen Sie sicher, dass Ihre Anpassungen auf allen Bildschirmgrößen funktionieren, wie in diesem Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
/* Mobile-specific accessibility considerations */
@media (max-width: 768px) {
  /* Ensure readable font sizes */
  .ab-feed {
    font-size: 14px; /* Minimum 14px for mobile readability */
  }

  /* Ensure sufficient touch targets */
  .ab-card {
    padding: 16px; /* Adequate padding for touch */
  }
}

Prüfung der Barrierefreiheit

Manuelle Test-Checkliste

Überprüfen Sie die Barrierefreiheit manuell, indem Sie die folgenden Aufgaben ausführen:

• Navigieren Sie ausschließlich mit der Tastatur (Tab, Enter, Leertaste) durch Content Cards und In-App-Nachrichten.
• Testen Sie mit einem Screenreader (NVDA, JAWS, VoiceOver).
• Überprüfen Sie, ob alle Bilder über Alt-Text verfügen.
• Überprüfen Sie die Farbkontrastverhältnisse (verwenden Sie dazu Tools wie den WebAIM Contrast Checker).
• Testen Sie auf Mobilgeräten mit Touchscreen.
• Überprüfen Sie, ob die Fokusindikatoren sichtbar sind.
• Testen Sie das Fokus-Trapping bei modalen Nachrichten.
• Überprüfen Sie, ob alle interaktiven Elemente über eine Tastatur erreichbar sind.

Häufige Probleme bei der Barrierefreiheit

Um häufige Probleme mit der Barrierefreiheit zu vermeiden, gehen Sie wie folgt vor:

1. Fokusstile beibehalten: Die Fokusindikatoren des SDK sind für Tastaturnutzer:innen von entscheidender Bedeutung.
2. Verwenden Sie display: none nur für nicht-interaktive Elemente: Verwenden Sie visibility: hidden oder opacity: 0 zum Ausblenden interaktiver Elemente.
3. Überschreiben Sie keine ARIA-Attribute: Das SDK legt geeignete ARIA-Rollen und -Labels fest.
4. Verwenden Sie tabindex-Attribute: Diese steuern die Reihenfolge der Tastaturnavigation.
5. Stellen Sie eine Bildlaufleiste bereit, wenn Sie overflow: hidden festlegen: Stellen Sie sicher, dass scrollbare Inhalte weiterhin zugänglich sind.
6. Greifen Sie nicht in die integrierten Tastatur-Handler ein: Stellen Sie sicher, dass die vorhandene Tastaturnavigation ordnungsgemäß funktioniert.