Auszeichnungen, Siegel oder Zertifikate
Das Widget "Auszeichnungen, Siegel oder Zertifikate" ist, wie der Name bereits sagt, ein Widget für Shop-Auszeichnungen bzw. Trust-Badges oder Sicherheits-Zertifikate.
Konfiguration
Das Widget "Auszeichnungen, Siegel oder Zertifikate" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Texte und Links bearbeiten
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.
Barrierefreiheit
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.
Title
Den Tooltip-Text (title-Attribut) kannst du über folgenden Textbaustein pflegen:
twt.widget.awards.customImage1.titletwt.widget.awards.customImage2.titletwt.widget.awards.customImage3.titletwt.widget.awards.customImage4.titletwt.widget.awards.customImage5.titletwt.widget.awards.customImage6.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Alt-Attribut bzw. Aria-Label
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 imimg-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 einaria-labeldirekt 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.
Zusammenfassung
Theme-Konfiguration
Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate"
Textbausteine
Überschrift
twt.widget.awards.headline
Text
twt.widget.awards.content
Titel für individuelle Logos
twt.widget.awards.customImage1.titletwt.widget.awards.customImage2.titletwt.widget.awards.customImage3.titletwt.widget.awards.customImage4.titletwt.widget.awards.customImage5.titletwt.widget.awards.customImage6.title
Alternative URLs für individuelle Logos
twt.widget.awards.customImage1.urltwt.widget.awards.customImage2.urltwt.widget.awards.customImage3.urltwt.widget.awards.customImage4.urltwt.widget.awards.customImage5.urltwt.widget.awards.customImage6.url
Alt-Attribut (wird verwendet, wenn das Bild nicht verlinkt ist)
twt.widget.awards.customImage1.alttwt.widget.awards.customImage2.alttwt.widget.awards.customImage3.alttwt.widget.awards.customImage4.alttwt.widget.awards.customImage5.alttwt.widget.awards.customImage6.alt
Aria-Label (wird verwendet, wenn das Bild verlinkt ist)
twt.widget.awards.customImage1.ariaLabeltwt.widget.awards.customImage2.ariaLabeltwt.widget.awards.customImage3.ariaLabeltwt.widget.awards.customImage4.ariaLabeltwt.widget.awards.customImage5.ariaLabeltwt.widget.awards.customImage6.ariaLabel
Last updated
Was this helpful?