Barrierefreiheit von Website-/App-Erkenntnissen

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

• Iframe-Titel: Möglichkeit zur Angabe eines iFrame-Titels im Abschnitt Animation.
• Alt-Text für benutzerdefinierte Schaltfläche: Möglichkeit zum Angeben von Alt-Text für ein Bild, wenn eine benutzerdefinierte Schaltfläche verwendet wird.

Popover, Schieberegler, InfoBar und benutzerdefinierte HTML-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.

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.
   
3. Auswählen Responsive-Dialogfeld als Intercept-Typ.
   
4. Geben Sie Ihrem Intercept einen Namen.
   
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.
   
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.
   
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.
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.

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.
   
3. Auswählen Feedback-Schaltfläche als Intercept-Typ.
   
4. Geben Sie Ihrem Intercept einen Namen.
   
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.
   
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.
    
11. Klicken Sie auf Umfrageanzeige.
    
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

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.
   
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.

   

5. Umschließen Sie das<img> Tag mit einem<span> Tag.
   
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.

   

Standardziele (Linktext)

1. Öffnen Sie Ihr Creative auf der Registerkarte Creatives.
2. Doppelklicken Sie auf das Zielelement, das den Text enthält.
   
3. Klicken Sie auf Quelle.
4. Fügen Sie dem Tag das<span> Attribut role=”button” hinzu.

   <span role="button" ... >Textbox-Inhalt</span>

   

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

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.
   
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.

   

5. Umschließen Sie das<img> Tag mit einem<span> Tag.
   
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.

   

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.
   
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.

   

Häufig gestellte Fragen