Auszeichnungen, Siegel oder Zertifikate
Last updated
Was this helpful?
Last updated
Was this helpful?
Das Widget "Auszeichnungen, Siegel oder Zertifikate" ist, wie der Name bereits sagt, ein Widget für Shop-Auszeichnungen bzw. Trust-Badges oder Sicherheits-Zertifikate.
Das Widget "Auszeichnungen, Siegel oder Zertifikate" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Die Texte und Links die im Widget verwendet werden, kannst du über Textbausteine ändern bzw. übersetzen.
Welche Textbausteine genutzt werden erfährst du in den entsprechenden Hilfe-Texten der jeweiligen Konfigurationen. Die Textbausteine in den Hilfe-Texten von ThemeWare® sind verlinkt, damit du ohne Umwege in den Editor des entsprechenden Textbausteins gelangst.
Eine Übersicht der verwendeten Textbausteine findest du zudem weiter unten in diesem Artikel.
Bilder wie z. B. Zertifikate oder Siegel, die über die Theme-Konfiguration integriert werden, erhalten leider nicht automatisch den in der Meidenverwaltung hinterlegten alt-Text. Damit diese Bilder trotzdem barrierefrei eingebunden werden können, stellt ThemeWare® hierfür separate Textbausteine bereit, die du individuell nutzen kannst.
Den Tooltip-Text (title-Attribut) kannst du über folgenden Textbaustein pflegen:
twt.widget.awards.customImage1.title
twt.widget.awards.customImage2.title
twt.widget.awards.customImage3.title
twt.widget.awards.customImage4.title
twt.widget.awards.customImage5.title
twt.widget.awards.customImage6.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Ob du das alt-Attribut oder das aria-label verwendest, hängt davon ab, ob das Bild verlinkt ist oder nicht:
Alt-Attribut (für nicht verlinkte Bilder)
Ist das Bild nicht verlinkt, wird der alt-Text direkt im img-Tag eingebunden. Dieser wird über den passenden Textbaustein gesteuert.
Aria-Label (für verlinkte Bilder)
Ist das Bild verlinkt, bleibt das alt-Attribut im Bild leer (alt=""). Stattdessen wird der beschreibende Text über ein aria-label direkt am <a>-Tag gesetzt – denn hier trägt der Link die eigentliche Bedeutung und die Bilder sind lediglich "dekorativ".
Tipp: Gestalte deine Texte in alt- und aria-label-Attributen ausführlicher, konkreter und kontextbezogener als beispielsweise den titel-Text.
Statt nur "SSL-verschlüsselt", könntest du z. B. schreiben: "Ihre Daten sind durch SSL-Verschlüsselung geschützt". So profitieren auch Screenreader-Nutzer und es wirkt gleichzeitig vertrauensvoller für alle Besucher.
Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate"
Überschrift
twt.widget.awards.headline
Text
twt.widget.awards.content
Titel für individuelle Logos
twt.widget.awards.customImage1.title
twt.widget.awards.customImage2.title
twt.widget.awards.customImage3.title
twt.widget.awards.customImage4.title
twt.widget.awards.customImage5.title
twt.widget.awards.customImage6.title
Alternative URLs für individuelle Logos
twt.widget.awards.customImage1.url
twt.widget.awards.customImage2.url
twt.widget.awards.customImage3.url
twt.widget.awards.customImage4.url
twt.widget.awards.customImage5.url
twt.widget.awards.customImage6.url
Alt-Attribut (wird verwendet, wenn das Bild nicht verlinkt ist)
twt.widget.awards.customImage1.alt
twt.widget.awards.customImage2.alt
twt.widget.awards.customImage3.alt
twt.widget.awards.customImage4.alt
twt.widget.awards.customImage5.alt
twt.widget.awards.customImage6.alt
Aria-Label (wird verwendet, wenn das Bild verlinkt ist)
twt.widget.awards.customImage1.ariaLabel
twt.widget.awards.customImage2.ariaLabel
twt.widget.awards.customImage3.ariaLabel
twt.widget.awards.customImage4.ariaLabel
twt.widget.awards.customImage5.ariaLabel
twt.widget.awards.customImage6.ariaLabel
