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

<figure><img src="/files/AeQCKBccgLAcXfUbMghE" alt=""><figcaption><p>ThemeWare® "Auszeichnungen, Siegel oder Zertifikate"-Widget</p></figcaption></figure>

***

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

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

***

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/zusatzfunktionen/widgets/auszeichnungen-siegel-oder-zertifikate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.