Website / App ERKENNTNISSE Barrierefreiheit

Barrierefreiheit für Website/App Erkenntnisse

In die Projekte von Website ERKENNTNISSE sind viele Funktionen eingebaut, die die Barrierefreiheit erleichtern. Wir empfehlen insbesondere, ein Responsive-Dialogfeld oder eine Feedback-Schaltfläche auszuprobieren, die mit Blick auf die Barrierefreiheit entwickelt wurden.

Auf dieser Seite stellen wir Ihnen spezifische Einstellungen und bewährte Verfahren vor, mit denen Sie die Barrierefreiheit Ihres Website ERKENNTNISSE-Projekts verbessern können.

Erstellung eines barrierefreien Responsive-DIALOGFELDES

Responsive-Dialogfelder sind Website-Overlays, die unter Berücksichtigung der Barrierefreiheit entwickelt wurden. Im Folgenden heben wir einige der Funktionen zur Barrierefreiheit hervor, die Sie erwarten können:

• Leicht zu definierender Alternativtext: Wenn ein benutzerdefiniertes Symbol im Dialog verwendet wird, Benutzern die Angabe von Alternativtext erlauben Gibt den Text an, den das Bildschirmausleseprogramm lesen soll, wenn der Fokus auf dem Symbol liegt.
  TIPP: Wenn Sie ein Symbol zum Beenden des Intercept auswählen, lautet der Alt-Text für die X-Schaltfläche, die oben rechts im Dialogfeld erscheint, “Schließen” Dieser Alternativtext ist ebenfalls lokalisiert.
• ARIA-Bezeichner für Drucktasten-Controls: Standardmäßig lesen Bildschirmausleseprogramme den Text, den Sie für die Drucktastenbeschriftung angeben. In einigen Fällen möchten Sie jedoch möglicherweise, dass das Bildschirmausleseprogramm zusätzlichen Kontext liest, z.B. „Klicken Sie auf diese Schaltfläche, um ein neues Umfrage zu öffnen“. In diesem Fall können Sie die ARIA-Bezeichner für die Drucktasten-Controls.
• Iframe-Titel für eingebettete Umfragen: Wenn Sie eine Umfrage in Ihren Dialog einbetten möchten , ist es einfach, einen iframe-Titel für Bildschirmleser hinzuzufügen.
• Farbkontraste für Elemente innerhalb der Creative selbst: Qualtrics kann zwar keine direkte Anleitung zum Kontrast geben, aber Sie können die Farbe der Schaltflächen und des Textes in Ihrem Dialogfeld nach Bedarf anpassen.

Erstellen einer Creative für barrierefreies Feedback

Feedback-Schaltflächen sind Registerkarten an der Seite einer Seite, auf die ein Benutzer klicken kann, um Feedback zu hinterlassen. Hier sind einige Funktionen der Barrierefreiheit, die die Feedback-Taste hat:

• Iframe-Titel: Fähigkeit zu Geben Sie einen iFrame-Titel an im Abschnitt Animation.
• Benutzerdefinierter Alt-Text für Schaltflächen: Standardmäßig lesen Bildschirmlesegeräte den Text, den Sie für die Beschriftung der Schaltfläche angeben. In manchen Fällen können Sie jedoch stattdessen ein benutzerdefiniertes Bild für Ihre Schaltfläche verwenden. In diesem Fall können Sie einen Alt-Text für das Bild der Schaltfläche angeben.
• Iframe-Titel für eingebettete Umfragen: Wenn Sie eine Umfrage in Ihren Dialog einbetten möchten , ist es einfach, einen iframe-Titel für Bildschirmleser hinzuzufügen.
• Farbkontraste für Elemente innerhalb der Creative selbst: Qualtrics kann zwar keine direkte Anleitung zum Kontrast geben, aber Sie können die Farbe des Hintergrunds und des Texts Ihrer Schaltfläche nach Bedarf anpassen.

Hinzufügen von Alt-Text und Rollen zu Ziel-Schaltflächen für Legacy Creatives

Wenn Ihr Ziel in Form eines Bild vorliegt, das Sie hochgeladen haben, hilft das Hinzufügen von Alternativtext und einem Attribut dem Bildschirmausleseprogramm dabei, zu verstehen, was die Drucktaste sagen und tun soll. Dieser Ratschlag ist für Legacy-Creatives, wie die Pop-over- oder Infobar.

1. Öffnen Sie Ihr Creative im Creatives Registerkarte.
2. Doppelklicken Sie auf das Ziel, das das Bild enthält.
   
3. Klicken Sie auf Quelle.
4. Innerhalb des <img> Tag, Attribut hinzufügen <img alt="text here" /> auf das Tag und setzen Sie den Wert gleich dem Text des Bild.

   <img alt="Sign Up Now" ... />

   Tipp: Bildschirmlesesoftware liest vor, was im Attribut enthalten ist, wenn es auf dem Bild ankommt.

   

5. Umgeben Sie die <img> Tag mit einem <span> Tag.
   
6. Fügen Sie ein role=”button”-Attribut zur <span> Tag.

   <span role="button"><img .../></span>

   Tipp: Das Attribut teilt dem Besucher mit einem Bildschirmausleseprogramm mit, dass es sich bei diesem Element um eine Drucktaste handelt, die aktiviert werden kann.

   

Standardziele (Linktext)

1. Öffnen Sie Ihr Creative im Creatives Registerkarte.
2. Doppelklicken Sie auf das Ziel, das den Text enthält.
   
3. Klicken Sie auf Quelle.
4. Fügen Sie ein role=”button”-Attribut zur <span> Tag.

   <span role="button" ... >Textfeldinhalt</span>

   

Hinzufügen von Alt-Text und Rollen zu Schaltflächen zum Schließen von Legacy Creatives

Ältere Creative wie Pop-over und Schieberegler erfordern zusätzliche Anpassungen, um ihre Schließschaltflächen zugänglich zu machen.

Drucktaste “Schließen” als Bild

1. Öffnen Sie Ihr Creative im Creatives Registerkarte.
2. Doppelklicken Sie auf das Element Schließen, das das Bild enthält.
   
3. Klicken Sie auf Quelle.
4. Fügen Sie das Attribut alt=”close” zur <img> Tag.

   <img alt="close" ... />

   Tipp: Bildschirmlesesoftware liest vor, was im Attribut enthalten ist, wenn es auf dem Bild ankommt.

   

5. Umgeben Sie die <img> Tag mit einem <span> Tag.
   
6. Fügen Sie ein role=”button”-Attribut zur <span> Tag.

   <span role="button"><img .../></span>

   Tipp: Das Attribut teilt dem Besucher mit einem Bildschirmausleseprogramm mit, dass es sich bei diesem Element um eine Drucktaste handelt, die aktiviert werden kann.

   

Drucktaste “Schließen” als Text

1. Öffnen Sie Ihr Creative im Creatives Registerkarte.
2. Doppelklicken Sie auf das Element Schließen, das den Text enthält.
   
3. Klicken Sie auf Quelle.
4. Fügen Sie ein role=”button”-Attribut zur <span> Tag.

   <span role="button" ...>Textfeldinhalt</span>

   Tipp: Das Attribut teilt dem Besucher mit einem Bildschirmausleseprogramm mit, dass es sich bei diesem Element um eine Drucktaste handelt, die aktiviert werden kann.

   

FAQs