zum Hauptinhalt springen
Loading...
Skip to article
  • Qualtrics Platform
    Qualtrics Platform
  • Customer Journey Optimizer
    Customer Journey Optimizer
  • XM Discover
    XM Discover
  • Qualtrics Social Connect
    Qualtrics Social Connect

Barrierefreiheit von Website-/App-Erkenntnissen


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


Barrierefreiheitsfunktionen für Website-/App-Insights

Website-/App-Insights-Projekte verfügen über viele integrierte Funktionen, um die Barrierefreiheit mühelos zu gestalten. Im Folgenden finden Sie einige der Funktionen für die Barrierefreiheit, die Sie auf der gesamten Plattform erwarten können:

  • Alle Creative-Elemente sind tab-fähig und per Tastatur anklickbar. Wir unterstützen TAB, ESC und Enter (und Return, für Mac-Benutzer), aber keine Pfeiltasten oder andere.
  • Für Popover- und Responsive-Dialog-Creatives können Benutzer nicht außerhalb des Creatives navigieren, bis es geschlossen wird. Außerdem ist ein Tabbing auf der zugrunde liegenden Seite nicht möglich.
  • Bei Popover- und Responsive-Dialog-Creatives wird der Fokus direkt auf das Creative gesetzt, sobald es angezeigt wird.
  • Wenn eingebettete Ziele verwendet werden, können Benutzer mit der rechten Maustaste auf das eingebettete Ziel klicken und einen iFrame-Titel hinzufügen.
  • Wenn eingebettete Fenster in den erweiterten Optionen Intercept verwendet werden, können Benutzer einen iFrame-Titel hinzufügen.

Als Nächstes behandeln wir Funktionen für die Barrierefreiheit, die auf die Anforderungen des Designs jedes Creatives zugeschnitten sind.

Creative für responsiven Dialog

  • Alt Text einfach definieren: Wenn im Dialog ein benutzerdefiniertes Symbol verwendet wird, können Benutzer Alt Text angeben, um den Text anzugeben, den das Bildschirmausleseprogramm lesen soll, wenn der Fokus auf dem Symbol liegt.
    Tipp: Wenn Sie ein Symbol einfügen, um das Intercept zu verwerfen, lautet der alte Text für die Drucktaste X, der oben rechts im Creative angezeigt wird, “Close”. Dieser alternative Text ist ebenfalls lokalisiert.
  • ARIA-Bezeichner für Drucktastenelemente: Standardmäßig lesen Bildschirmausleseprogramme den Text, den Sie für den Drucktastenbezeichner angeben. In einigen Fällen möchten Sie jedoch, dass das Bildschirmausleseprogramm zusätzlichen Kontext liest, z.B. “Klicken Sie auf diese Schaltfläche, um ein neues Umfragefenster zu öffnen.” In diesem Fall können Sie den ARIA-Bezeichner für die Drucktastenelemente angeben.
  • Farbkontraste für Elemente innerhalb des Creatives selbst: Während Qualtrics keine direkte Kontrastführung bereitstellen kann, haben Benutzer die volle Kontrolle, um die entsprechende Farbe für Creative-Elemente auszuwählen und auszuwählen.

Feedback-Button Creative

Pop-Over, Schieberegler, InfoBar und benutzerdefinierte eingebettete Feedback-Creatives

  • Farbkontraste für Elemente innerhalb des Creatives selbst: Während Qualtrics keine direkte Kontrastführung bereitstellen kann, haben Benutzer die volle Kontrolle, um die entsprechende Farbe für Creative-Elemente auszuwählen und auszuwählen.
Tipp: Zieldrucktasten auf diesen Creatives müssen zusätzlich bearbeitet werden, um sie zugänglich zu machen, da die Namen und Rollen der gewählten Drucktasten variieren können. Weitere Informationen finden Sie in den verlinkten Abschnitten der Supportseite.

Mobile App-SDK

  • Zugriff auf mobile Bildschirmausleseprogramme:
    • Ermöglicht es Bildschirmausleseprogrammen, einfach zu navigieren und den Dialog zu verlassen.
    • Erlaubt das Lesen von Text innerhalb von Drucktasten und des Typs des Items (z. B. Drucktaste).

Ein barrierefreies responsives Dialog-Creative anlegen

In diesem Abschnitt wird erläutert, wie ein flexibles Dialog-Creative bearbeitet wird, sodass es für Bildschirmausleseprogramme zugänglich ist.

  1. Navigieren Sie zur Seite Projekte, und legen Sie dann ein Website-/App-Insights-Projekt an.
  2. Klicken Sie auf Neu anlegen.
    Wählen Sie auf der rechten Seite "Neu anlegen".
  3. Auswählen Responsive-Dialogfeld als Intercept-Typ.
    Klicken Sie auf das Feld ganz links.
  4. Geben Sie Ihrem Intercept einen Namen.
    Intercept mit einem Namen anlegen
  5. Wählen Sie eine Umfrage aus, die Sie verknüpfen möchten, oder geben Sie eine benutzerdefinierte URL ein, zu der Sie navigieren möchten.
  6. Klicken Sie auf Weiter.
  7. Wählen Sie Drucktasten.
    Wählen Sie "Drucktasten", und geben Sie dann das Etikett "Feedback" ein.
  8. Fügen Sie für jede der Drucktasten im Abschnitt Text den entsprechenden Text ein. Dieser Text wird Benutzern visuell angezeigt und von Bildschirmausleseprogrammen vorgelesen.
  9. Klicken Sie auf Logos & Bilder.
    Klicken Sie auf der linken Seite auf Logos, und geben Sie Ihrem Text den Namen Alt.
  10. Ändern Sie den Abschnitt Alt. Text, um eine schriftliche Beschreibung der Grafik bereitzustellen. Besuchern, die Bildschirmausleseprogramme verwenden, wird der alte Text vorgelesen, damit sie wissen, was das Bild ist, wenn sie sehbehindert sind.
  11. Wenn Sie Ihre Umfrage direkt im Dialogfeld anzeigen, navigieren Sie zu Größe & Stil.in der Größe & Style-Registerkarte, iFrame-Titel hinzufügen
  12. Ankreuzfeld für Umfrage direkt im Dialog anzeigen.
  13. Geben Sie im Feld Iframe-Titel den Text ein, der von Bildschirmausleseprogrammen gelesen werden soll, wenn sie zum ersten Mal auf Ihre Umfrage treffen.
Tipp: Wenn Sie zum Erstellen Ihres Intercepts keinen geführten Workflow verwenden, führen Sie die Schritte 7 bis 13 für jedes Creative aus.

Anlegen eines Creatives für die Schaltfläche „Barrierefreies Feedback“

  1. Navigieren Sie zur Seite Projekte, und legen Sie dann ein Website-/App-Insights-Projekt an.
  2. Klicken Sie auf Neu anlegen.
    Wählen Sie auf der rechten Seite "Neu anlegen".
  3. Auswählen Feedback-Schaltfläche als Intercept-Typ.
    Klicken Sie auf das mittlere Symbol Feedback.
  4. Geben Sie Ihrem Intercept einen Namen.
    Intercept mit einem Namen anlegen
  5. Wählen Sie eine Umfrage aus, die Sie verknüpfen möchten, oder geben Sie eine benutzerdefinierte URL ein, zu der Sie navigieren möchten.
  6. Klicken Sie auf Weiter.
  7. Navigieren Sie zu Look& Feel.
    Gehen Sie zu Suchen & fühlen Sie sich auf der rechten Seite und geben Sie dann den Drucktastentext ein
  8. Fügen Sie den entsprechenden Text für die Drucktasten im Abschnitt Drucktastentext ein. Dieser Text wird Benutzern visuell angezeigt und von Bildschirmausleseprogrammen vorgelesen.
  9. Wenn Sie eine benutzerdefinierte Schaltfläche verwenden, wählen Sie Eigene Schaltfläche verwenden, und laden Sie das entsprechende Bild von Ihrem Computer hoch.
  10. Nachdem Sie das Bild hochgeladen haben, ändern Sie den Alt-Text, um eine schriftliche Beschreibung der Drucktaste bereitzustellen. Besuchern, die Bildschirmausleseprogramme verwenden, wird der alte Text vorgelesen, damit sie wissen, was das Bild ist, wenn sie sehbehindert sind.
    Wenn Sie darauf klicken, verwenden Sie meine eigene Schaltfläche, und laden Sie ein Bild von Ihrem Computer hoch.
  11. Klicken Sie auf Umfrageanzeige.
    Klicken Sie auf der linken Seite auf die Survey-Anzeige.
  12. Geben Sie im Abschnitt iFrame-Titel einen iFrame-Titel an. Wenn Sie Ihrem Intercept ein eingebettetes Ziel hinzugefügt haben, fügt diese Option dem iFrame einen Titel hinzu, den Bildschirmausleseprogramme interpretieren können.

Hinzufügen von altem Text und Rollen zu Zieldrucktasten

Tipp: Wenn Sie keinen Zugriff auf die in diesem Abschnitt beschriebenen Funktionen haben, wenden Sie sich an Ihren Vertriebsbeauftragten. Weitere Informationen über die Unterschiede zwischen digitalem Feedback und CustomerXM für Digital finden Sie unter Digitales Feedback vs. CustomerXM für Digital.
Tipp: Für flexible Dialoge und Feedback-Drucktasten ist dieser Schritt nicht erforderlich.
Achtung: Kundenspezifische Coding-Funktionen werden unverändert bereitgestellt und erfordern möglicherweise Programmierkenntnisse für die Implementierung. Unser Support bietet keine Hilfe oder Beratung im Zusammenhang mit benutzerdefinierter Codeerstellung. Stattdessen können Sie sich gerne in unserer Benutzer-Community erkundigen. Wenn Sie mehr über unsere zum Kauf verfügbaren Services für benutzerdefinierten Code erfahren möchten, wenden Sie sich an Ihren Qualtrics Account Executive.

Wenn Ihr Ziel in Form eines hochgeladenen Drucktastenbilds vorliegt, hilft das Hinzufügen von alternativem Text und einem Rollenattribut dem Bildschirmausleseprogramm dabei, zu verstehen, was die Drucktaste sagen und tun soll.

  1. Öffnen Sie Ihr Creative auf der Registerkarte Creatives.
  2. Doppelklicken Sie auf das Ziel-Element, das das Bild enthält.
    Die Drucktaste im Creative-Editor wird per Doppelklick ausgewählt, wodurch eine neue Symbolleiste oben mit einer darin enthaltenen Quelldrucktaste angezeigt wird.
  3. Klicken Sie auf Quelle.
  4. Fügen Sie innerhalb des<img> Tags ein Alt-Attribut<img alt="text here" /> zum Tag hinzu, und legen Sie den Wert auf den Text des Bildes fest.
    <img alt="Sign Up Now" ... />
    Tipp: Screenlesesoftware wird vorlesen, was im alt-Attribut enthalten ist, wenn es auf dem Bild ankommt.

    In der Quelle hat das img-Tag ein alt-Tag, genau wie dieses Bild.

  5. Umschließen Sie das<img> Tag mit einem<span> Tag.
    Spannen, die zum Quelltext der Drucktaste hinzugefügt wurden
  6. Fügen Sie dem Tag das<span> Attribut role=”button” hinzu.
    <span role="button"><img .../></span>
    Tipp: Das Rollenattribut weist den Besucher über ein Bildschirmausleseprogramm darauf hin, dass es sich bei diesem Element um eine aktivierbare Drucktaste handelt.

    Eine Rolle, die dem Span-Tag-Satz gleich der Drucktaste hinzugefügt wurde

Standardziele (Linktext)

  1. Öffnen Sie Ihr Creative auf der Registerkarte Creatives.
  2. Doppelklicken Sie auf das Zielelement, das den Text enthält.
    Das Ziel im Creative-Editor wird per Doppelklick ausgewählt, wodurch eine neue Symbolleiste oben mit einer Quelldrucktaste im oberen Bereich angezeigt wird.
  3. Klicken Sie auf Quelle.
  4. Fügen Sie dem Tag das<span> Attribut role=”button” hinzu.
    <span role="button" ... >Textbox-Inhalt</span>

    Eine Rolle, die der Drucktaste entspricht, wurde im span-Tag festgelegt.

Hinzufügen von alternativem Text und Rollen zu Drucktasten zum Schließen

Tipp: Für flexible Dialoge und Feedback-Drucktasten ist dieser Schritt nicht erforderlich.
Achtung: Kundenspezifische Coding-Funktionen werden unverändert bereitgestellt und erfordern möglicherweise Programmierkenntnisse für die Implementierung. Unser Support bietet keine Hilfe oder Beratung im Zusammenhang mit benutzerdefinierter Codeerstellung. Stattdessen können Sie sich gerne in unserer Benutzer-Community erkundigen. Wenn Sie mehr über unsere zum Kauf verfügbaren Services für benutzerdefinierten Code erfahren möchten, wenden Sie sich an Ihren Qualtrics Account Executive.

Drucktaste “Schließen” als Bild

  1. Öffnen Sie Ihr Creative auf der Registerkarte Creatives.
  2. Doppelklicken Sie auf das Element Close, das das Bild enthält.
    Sie wählen im Creative-Editor die Drucktaste zum Schließen per Doppelklick aus. Daraufhin wird oben eine neue Symbolleiste mit einer Quelldrucktaste angezeigt.
  3. Klicken Sie auf Quelle.
  4. Fügen Sie dem Tag das<img> Attribut alt=”close” hinzu.
    <img alt="close" ... />
    Tipp: Screenlesesoftware wird vorlesen, was im alt-Attribut enthalten ist, wenn es auf dem Bild ankommt.

    Dem img-Tag in der Quelle wurde ein altes Tag hinzugefügt, das dem Wort Close entspricht.

  5. Umschließen Sie das<img> Tag mit einem<span> Tag.
    Tags innerhalb des Quelltexts spannen
  6. Fügen Sie dem Tag das<span> Attribut role=”button” hinzu.
    <span role="button"><img .../></span>
    Tipp: Das Rollenattribut weist den Besucher über ein Bildschirmausleseprogramm darauf hin, dass es sich bei diesem Element um eine aktivierbare Drucktaste handelt.

    Ein Rollenattribut, das der Drucktaste entspricht, wird dem Bereich hinzugefügt.

Drucktaste “Schließen” als Text

  1. Öffnen Sie Ihr Creative auf der Registerkarte Creatives.
  2. Doppelklicken Sie auf das Element Close, das den Text enthält.
    Der Text zum Schließen im Creative-Editor wird per Doppelklick ausgewählt, wodurch eine neue Symbolleiste oben mit einer darin enthaltenen Quelldrucktaste angezeigt wird.
  3. Klicken Sie auf Quelle.
  4. Fügen Sie dem Tag das<span> Attribut role=”button” hinzu.
    <span role="button" ...>Textbox-Inhalt</span>
    Tipp: Das Rollenattribut weist den Besucher über ein Bildschirmausleseprogramm darauf hin, dass es sich bei diesem Element um eine aktivierbare Drucktaste handelt.

    Ein Rollenattribut wurde der Drucktaste "Spannweite gleich" hinzugefügt.

Häufig gestellte Fragen

Viele Seiten dieses Portals wurden mithilfe maschineller Übersetzung aus dem Englischen übersetzt. Obwohl wir bei Qualtrics die bestmögliche maschinelle Übersetzung ausgewählt haben, um ein möglichst gutes Ergebnis zu bieten, ist maschinelle Übersetzung nie perfekt. Der englische Originaltext gilt als offizielle Version. Abweichungen zwischen dem englischen Originaltext und den maschinellen Übersetzungen sind nicht rechtlich bindend.